Sections - Basic, Conditional, Copyable & Subsections

A section is a wrapper of multiple fields added to an app. They serve two purposes -

1. Educate users about the nature of fields (modules) inside the section
2. Put conditions to display/hide all the fields inside the section

‍Adding A Section

Once you click on New App in your Dashboard, you will be directed to the Design App to start building your app. Name the app, and click on Add Section to start.

Editing a Section

• Click on a section name to edit it
• Add a title to the section. You can also remove the default title "Untitled Section" to keep it blank.
• Click on the Save button.

In this section, you will be able to add all relevant fields related to the section name. Click on Add Field, select the appropriate field from the list of customisable clocks available. You can also click on the ‘+’ icon that appears on every field to add fields in between.

‍

• You can add more sections to your app by clicking on Add Section.
  

• You can also drag an existing block from one section to another.

Reorder Sections

Similar to the drag-and-drop action of the blocks, you can also rearrange the sections. Click on the section and drag it to the desired placement area.

You can see that sections have been rearranged.‍

Conditional section

This is one of the most useful features that help app creators create very complex apps. You can use this to introduce branching of sections in your apps. Basically you can make sections appear in the app based on certain conditions (eg: selecting certain options, input certain details into fields).

Here we are taking an example of an employee management app for full-time employees, contractors and interns. Let’s say if the type of employee is full-time, a section should appear which takes the employee's joining date (and other details) and if the type of employee is a contractor, then the section which takes the joining date and the planned exit date of the contractor should appear.

This app has 6 sections: Basic, Other, Full Time, Contract, Internship, Bank Details.

‍In App Home, where the app is live, it looks like this:

Here only the Basic Details and Other Details sections are visible.

The employee on-boarding app will be used to enter the details of employees based on the type of employment.

If the ‘type of employment’ field is selected as ‘full time’ then then section ‘Full Time Details’ will be opened showing the corresponding fields.

This is achieved by inserting a simple formula in the Design App.

In the ‘Design App’, if the ‘Full Time Details’ section is selected, a right panel will appear. Under the Advanced option, go to Display this section if field.

Type '@' and select the Type of Employment variable and write =”Full Time” .

This means that when the type of employment is selected as ‘Full Time’ in the app, then the ‘Full Time Details’ section will be displayed.

If you are using Single Selectors, Multiple Selectors or Dropdowns to make sections appear upon selection, then make sure that the value in the display condition matches exactly, else it will not work.

You can also use multiple conditional display logic within sections.

In ‘App Home’, only two sections are visible. Once ‘Type of Employment’ is selected as ‘Full Time’, the ‘Full Time Details’ section appears.

Then in that section when the ‘Received Documents?’ field is selected as ‘Yes’, the ‘Bank Details’ section appears in the app.

The logic remains the same in the ‘Design App’.

Now let’s say the conditional display logic is also applied to the ‘Contract’ section, followed by which if the field ‘Received Documents?’ in this section is selected as ‘Yes’, the ‘Bank Details’ section should appear.

This would mean that the ‘Bank Details’ section should appear by selecting ‘Yes’ from the  ‘Received Documents?’ field from either the ‘Full Time Details’ section or ‘Contract Details’ section (Both sections contain this field).

For Full Time:

For Contract (same formula applied to show the ‘Contract’ section):

Here you will have to modify the display condition formula for the ‘Bank Details’ section in the Design App so that it takes both display conditions.

Select the ‘Bank Details’ section. Under the Advanced options, go to Display this section if field.

Now write the following formula: OR({received_d}="Yes",{received_d_1}="Yes")

This means when the ‘Received Documents’ field is selected as ‘Yes’, the bank details section will be displayed, be it for full time or contract based.

‍Additional Notes

1. If a section needs to be displayed if a field with variable name "field_one" is not empty, use the expression =(field_one <> "").
2. If a section needs to be displayed if a field with variable name "field_one" has a value "ABC" and if another field with variable name "field_two" has a value 1000., use the expression =(AND(field_one = "ABC", field_two = 1000)).
3. If a section needs to be displayed if a field with variable name "field_one" is not empty and if another field with variable name "field_two" is either less than 100 or greater than 100, use the expression =(AND(field_one <> "", OR(field_two < 100, field_two > 1000))=(AND(field_one <> "", OR(field_two < 100, field_two >10))

Following are reference guides to relevant functions in Excel.

• TRUE function in Excel
• LOGICAL operators in Excel
• AND function in Excel
• OR function in Excel

Retain Value

This configuration field appears only if the ‘Display this section if’ has been given a condition.

‍

‍

If enabled, this will enable any previously filled section to retain its values if edits are made to it and it is kept hidden even after submission. This is useful when it comes to approvals.

For example, if there are three sections in app:

• 1st section (first submission) - where an employee fills data, can see only this section and submits.
• 2nd section (edit after initial submission in submissions tab) - for first level approval where only the team lead can see it and fill data based on the employee submission i.e. they can also see the employee’s section filled in after submission.
• 3rd section (edit after team lead submission in submissions tab)- where the department head needs to give the final approval.

Now if the department head only needs to see the 2nd & 3rd section, the 1st section is hidden for them, and if the option ‘Retain Values if hidden’ is enabled, then all details filled in the first section will still be present in the submission.

All the values will be available for admins to see.

‍

Copyable section

‍You can create multiple copies of a section to collect different data with the same fields. For example, collecting family member details, education details, product price, etc.

Click on the section of which you want to create multiple copies. Edit from the Right Panel which appears on the right side.

Allow Section to be copied during submission

Enable this option to allow creating copies of the section selected.‍

Max Number of copies

Enter a number of how many copies of the section that you may need.

Link text to copy this section

Enter your desired text for the end user to understand that clicking on this will create another copy of that section.

There are 2 ways to do that:

1. Enter text

In this example, 'Add Another Qualification Section’ is the text. You can add your own self-explanatory text. This appears on the bottom right side of the section in App Home.

2. Enter custom link text

You can add your own custom link here. Below is an example of a custom link and its preview.

‍<h2 style='color: #007BFF;cursor: pointer;text-align:left;'>+ Add Another Qualification Section</h2>

In the above link, 'Add Another Qualification Section’ can be changed to your own self-explanatory text. This appears on the bottom right side of the section.

Position

This option allows you to control where the "Add Another Section" link appears in App Home.

You can choose to align the link to the Left, Center, or Right based on your preference.

Fields to prevent duplicates

For specific fields i.e. Single Selector, Code Scanner, and Get Data from Other Apps, you can enable the "Fields to prevent duplicates" option to exclude these fields from being copied along with the rest of the section. This option appears only if any of these fields are in the section to be copied. When enabled, users filling out the copied sections in App Home will not be able to select a value that has already been selected in another section copy.

Editing Copyable Section Fields through Edit Submission Workflow

Once a submission is created, there may be situations where you need to update or correct values inside a copyable section. This can be automated using the Edit Submission workflow node.

The Edit Submission node allows you to pick an existing submission and update its fields through workflow logic. With copyable sections, the same process applies, but you need to carefully configure filters and conditions so that the workflow knows exactly which repeated section to update.

How to Set It Up

1. Add an Edit Submission Node
   
   • Go to Design App > Workflows and select the flow where you want to place the node (New Submission Flow, Edit Submission Flow, or Review Submission Flow).
   • Click on Start or the ‘+’ symbol after a node you may have added and select the Edit Submission node.
     
     
2. Choose the Target App
   
   • On the right panel, select the app that contains the copyable section fields you want to edit.
   • If you are editing the same app where the workflow is being built, select that app itself. If you are editing another app, select that target app.
     
     
3. Filter the Correct Submission
   
   • Under Filters, you must identify which submission you want to edit.
   • If you are editing the same app, use the built-in Submission ID variable {$submission_id} (every submission generates a unique submission id in the Submissions tab).
   • If you are editing a different app, use a unique identifier such as Employee ID, Job ID, or another field that is common between the current app and the target app.
   • This ensures that the workflow is applied only to the correct submission and not to every record.
     
     
4. Set Field Values — Targeting Copyable Section Fields
   
   • Now move to the Set Field Values section of the node.
   • Select the field inside the copyable section that you want to edit.
   • Since there may be multiple copied sections in a submission, you must specify logic so that the workflow knows which copied section in that submission to update.
     
     
5. Use IF Logic to Match the Correct Row

Typically, you should have a unique identifier inside the copyable section itself (e.g., an Item ID field, Serial Number, or some other key).

In the logic box, use an IF condition to check if the identifier matches. For example:

IF({id} = {job_id},{quantity}+100,{quantity})

• The light grey variables come from the current app’s submission.
• The dark grey variables are fields from the target app’s existing submission.
• If the IDs match, the workflow updates that row with the new value.
• If they do not match, the workflow retains the old value.

This ensures you are not overwriting the field in every copied section but only the one that corresponds to the condition you define.

Key Points to Remember

• Two levels of matching are required:
  
  1. Match the correct submission using Filters.
  2. Match the correct row inside the copyable section using IF conditions in Set Field Values.
• Always make sure your copyable section includes some form of unique identifier (like Item ID, Task ID, etc.), otherwise it will be difficult to target the right row.
• If no match is found, the existing data will remain unchanged.

You can update multiple fields in the same copyable section row by repeating this process for each field under Set Field Values.

‍

Keep this Section Collapsed

By enabling this option, the section will appear collapsed (unopened) by default when the app loads in App Home.

Users can click on the section name to expand it and fill in the details.

This is especially useful in apps with multiple sections where you want to avoid overwhelming users or make navigation easier.

‍

Subsections

This option appears only if there are 2 or more sections in an app.

You can make some sections of the app as subsections of any other section in the app. For example, the screenshots below show a Checklist App with 3 main Checklists C1, C2, and C3 and each of them has sub-checklists like 1.1, 1.2. 2.1 etc. So the users filling data in the App will initially see only the 3 top-level sections. Then when they click on one of these sections, their sub-sections will appear.

To create such a setup with sub-sections, follow these steps.

• First, create all the desired sections. For example, C1, C2, C3 etc.
• On the right panel, turn ON the option Show advanced options, if it is not already ON.
• Then select the section to which you want to assign some sub-sections. For example, Checklist Subsections.
• Click on the drop-down for Sub-sections. You will see a list of all other sections of the app. Select the ones which are going to be the sub-sections of the current section.