Skip to main content

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

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.




 



Step 2: Generating the HTML Table Row





  1. Create a form rule that applies to the RS1.


  2. Name the Rule “Create Row”.


  3. Here the rules triggers when any one of the Column is filled (Condition)


  4. When the condition is fulfilled, the “Row” field is assigned the value of <Formula>


  5. Assign the Formula. This is basically a partial HTML Table Row code.


  6. Here is the ELSE part. Row is assigned the Value of -Blank-


  7. Preview Form to Test it. Row should be filled with some HTML


Step 3: Combine Row into a Table





  1. Add a Text-Long control after the RS. Name it as “Table”.


  2. Create a form rule that apply to Form.


  3. Name the Rule as “Create Table”.


  4. Here the rules triggers when any one of the Row is filled (Condition)


  5. When the condition is fulfilled, the “Table” field is assigned the value of <Formula>

    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-


  7. Preview Form to Test it. “Table” should be filled with some HTML.




 



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



  3. Preview Form to Test it.


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.
      
    Use a replace function to search for “tr>,” and replace it with “tr>”


  2. Edit the Create Table rule




  3. Add Inline CSS and <TH> (Table Header)


  4. Preview the Form


  5. The form is attached




 

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings