How to display fields in tabular format on an entity form in Power Portal?

[Sahil]

Hi Folks,

Please suggest the best way to display the below format on an entity form in Portal. I have whole number fields for Total count and Total value for each Type.  

Header row and Type values (1, 1.a, 1.b, Total...) are static - How should we display these on an entity form in a 3-column section? There are more than 30 types to be displayed. We have whole number fields for Total Count and Total value for each Type, we can hide label to just display text box in front of types. 

Type	Total Count	Total value
1
1.a	5	1000
1.b	5	1000
Total	10	2000
2
2.a	1	100
2.b	1	100
2.c	1	100
Total	3	300

We tried by creating an HTML web resource to display the required label for each type, it works in CRM but on the portal the Web Resource is not able to access the custom data parameter. 

Thanks!

[Fubar]

It really depends on exactly what you need to do, you could use

• HTML and Liquid - fetchxml https://learn.microsoft.com/en-us/power-pages/configure/liquid/template-tags#fetchxml
• Portals Web API https://learn.microsoft.com/en-us/power-pages/configure/web-api-overview
• If the number of rows are known - Subgrids on the a form.

or a combination of them

[Sahil]

Thanks for the response.

Number of rows are fixed as we know all the Types to be shown. For each Type/row, the user will enter the Total Count and Total value (there fields created for this in CRM). The only challenge we are having is to find an easiest way to display these Types in rows.

Type	Total Count	Total value
1
1.a	-	-
1.b	-	-
Total	-	-
2
2.a	-	-
2.b	-	-
2.c	-	-
Total	-	-

[Sahil]

Thanks for the response.

Number of rows are fixed as we know all the Types to be shown. For each Type/row, the user will enter the Total Count and Total value (there fields created for this in CRM). The only challenge we are having is to find an easiest way to display these Types in rows.

Type	Total Count	Total value
1
1.a	-	-
1.b	-	-
Total	-	-
2
2.a	-	-
2.b	-	-
2.c	-	-
Total	-	-

[Fubar]

As the user is entering both cells with data, I would probably do the initial layout via HTML (bootstrap - what the portal uses) and initial population of data via Liquid fetchxml, and then the save via the Web API.

Alternatively,

you don't mention the actual database structure e.g. are the type rows in a  child table or have you hard coded the fields on the 1 table, if the latter technically you could get a similar layout using a standard form with some additional JQuery and CSS e.g. 2 fields, 1 with the label of the Type the other with its label set to not be visible, then CSS to move the shown label from the top fo the field to the left.   (but be mindful that there is a reason why the labels sit above the fields - as it reduces layout issues on different screen sizes).  If in child records, you could possibly look at editable subgrids (editable with a PCF control).