Now that you’ve learned how to set up any parameter page you need inStep 4: Set up a Parameter Page, let’s add some more pages to our HMI. In this step we will be adding a Collection Page (Page Type) to display a list of recipes.

Creating a Collection Page

• What is the purpose of a Collection Page?

1. Create a »Recipes« Page

If you’ve been following along, you probably know how to add another page already.

Navigate to the Pages section in your HMI Content Tree (Content View), and click the Add ****button to bring up the Add Element dialog.

Choose Collection Page from this list to add a new page to your HMI.

Within this collection page we want to display a list of our recipes, so let’s change it’s title to “Recipes” (quick reminder: You can either do that in the content tree or within the General ****section in the page’s Properties Panel (Content View)).

The HELIO collection pages have a “List” Icon by default which already works, but let’s be a little more specific and use the “Recipes” Icon instead. This way, our operators will later be able to identify the recipes page at the first glance!

2. Connect your List

Right now our new collection page is looking quite empty, so let’s fix that.

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Note: When you move to the Data Source ****section in the page’s Properties Panel (Content View) you will see that HELIO is actually telling you what this page is missing by coloring the List Input orange!

</aside>

Click the Choose Data Record button in the List section and select the Quickstart > Recipes list from the dialog, then click confirm.

Now HELIO knows which list you want to display within your collection page and will generate a table from the Item Blueprint of your list. The Item Blueprint of our “Recipes” list consists of three elements: an id, a name and a target value. HELIO uses this information to create three columns in our recipes table (we call these columns Properties) and sets titles according to the names of the blueprint elements.

You can edit this table any way you like, we’ll get to that next!

3. Tweak the Properties

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Note: Every collection page has a Properties section, a Detail view and a Footer ****which you will find in the content tree.

</aside>

For now we will edit the Properties to create the table that our operators will need and we’ll get to the Details and Footer later on!

Our operators will be identifying the recipes by their name, so let’s put that in the first column and make it stand out visually!

• Within the content tree, drag the “Name” property to the top of the Properties section! HELIO will change the table layout straight away so the “Name” column should now be the first one.
• To clean this property up a bit, let’s rename it to “Recipe Name” in the Properties Panel (Content View).
• Since we want this property to stand out visually let’s change the width of this column. Navigate to the Column Width section in the Properties Panel (Content View) and set the width to relative and it’s weight to 3. Now the “Recipe Name” column should be wider than the others!
• To make the names a bit easier to read for our operators, let’s rename the “IsActive” column to “is Active”.

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" />

Note: You could also delete properties you don’t need on your collection page or add new ones! To learn all about the collection page properties go to Collection Page (Page Type).

</aside>

4. Tweak the Detail View