Power Apps – How to have a two-level numbered list in HTML control

Introduction:

We will create a 2-level table and order the items in a numbered list using the HTML control.

Step 1:

We will set up our sample data. Paste this code in the Formulas property of the App object:

varTable = Table(
    {Meal: "Breakfast",Foods: ["Egg","Hotdogs","Bread"]},
    {Meal: "Lunch",Foods: ["Spaghetti","Carbonara","Hamburger","Garlic Bread","Pizza"]},
    {Meal: "Dinner",Foods: ["Pork","Rice"]}
    );

Step 2:

Insert an HTML control. Make the AutoHeight property into:

true

Step 3:

Make the HtmlText property into:

Concat(varTable As currentItem,
"<b>" & currentItem.Meal & "</b><br>
<ol>"
&
Concat(currentItem.Foods,"<li>"&Value&"</li>")
&
"</ol>"
)

Conclusion:

You have a two-level HTML list where the second level is numbered automatically.