Garrett
Communicator

Generating HTML Table from Repeating Section using Form Controls only

Jump to solution

Generating HTML Table from Repeating Section using Form Controls only

 

Many solutions have been developed to extract the data from the Repeating Section. Most, if not all solution, require the use of Query XML to extract the Repeating Section data and the For-Each Loop to assemble the structure. This may be intimidating or challenging for Business Users.

 

Here is one solution to generate a HTML Table from the Data in the Repeating Section without the use of Query XML.

 

Platform:

New Responsive Form (Forms O365 and NWC)

 

Knowledge Required:

HTML Table

New Responsive Forms, Repeating Section, Creating Form Rules.

 

Summary of Steps

Step 1: Create the Form

Step 2: Generating the HTML Table Row

Step 3: Combine Row into a Table

Step 4: Use a Label to display the Table

Step 5: Enhancing the HTML Table

Reply
4 Replies
Garrett
Communicator

Re: Generating HTML Table from Repeating Section using Form Controls only

Jump to solution

Step 1: Create the Form

  1. Add a Repeating Section control to the form. Name it “RS1”.
  2. Add 4 Text control to the form. Name them “Column1”, “Column2”, “Column3” and “Column4”.
  3. Add another Text control to the form. Name it as “Row”.
    This will be used to display the generated the HTML Table Row.
    Garrett_0-1663600747366.png

 

Step 2: Generating the HTML Table Row

  1. Create a form rule that applies to the RS1.
    Garrett_1-1663600805673.png
  2. Name the Rule “Create Row”.
  3. Here the rules triggers when any one of the Column is filled (Condition)
    Garrett_2-1663600830796.png
  4. When the condition is fulfilled, the “Row” field is assigned the value of <Formula>
    Garrett_14-1663601340060.png
  5. Assign the Formula. This is basically a partial HTML Table Row code.
    Garrett_15-1663601363087.png
  6. Here is the ELSE part. Row is assigned the Value of -Blank-
    Garrett_16-1663601389869.png
  7. Preview Form to Test it. Row should be filled with some HTML
    Garrett_17-1663601399555.png
0 Kudos
Reply
Garrett
Communicator

Re: Generating HTML Table from Repeating Section using Form Controls only

Jump to solution

Step 3: Combine Row into a Table

  1. Add a Text-Long control after the RS. Name it as “Table”.
    Garrett_0-1663601471295.png
  2. Create a form rule that apply to Form.
    Garrett_1-1663601502605.png
  3. Name the Rule as “Create Table”.
  4. Here the rules triggers when any one of the Row is filled (Condition)
    Garrett_2-1663601520323.png
  5. When the condition is fulfilled, the “Table” field is assigned the value of <Formula>
    Garrett_3-1663601542079.png
    The “Form.RS1.Row” is a collection of all the Rows in the Repeating Section.
  6. Here is the ELSE part. Table is assigned the Value of -Blank-
    Garrett_4-1663601580597.png
  7. Preview Form to Test it. “Table” should be filled with some HTML.
    Garrett_5-1663601592221.png

 

Step 4: Use a Label to display the Table

  1. Add a Label below the Table field.
  2. Insert into the Label – form controls -> Table
    Garrett_6-1663601638262.png
    Garrett_7-1663601650815.png
  3. Preview Form to Test it.
    Garrett_8-1663601671521.png
0 Kudos
Reply
Garrett
Communicator

Re: Generating HTML Table from Repeating Section using Form Controls only

Jump to solution

Step 5: Enhancing the HTML Table

  1. Remove the comma from the “Form.RS1.Row” collection.
    A comma is inserted after each row in the RS.
    Garrett_0-1663601790784.png  
    Garrett_0-1663601963786.png
    Use a replace function to search for “tr>,” and replace it with “tr>”
  2. Edit the Create Table rule
    Garrett_1-1663602001842.png

  3. Add Inline CSS and <TH> (Table Header)
    Garrett_3-1663602075257.png
  4. Preview the Form
    Garrett_2-1663602041077.png
  5. The form is attached
0 Kudos
Reply
Garrett
Communicator

Re: Generating HTML Table from Repeating Section using Form Controls only

Jump to solution

Garrett_0-1663602652587.png

 

0 Kudos
Reply