Still need help?
Request support
Request Support
Help
 / 
 / 
Sections
 / 

Sections - Basic, Conditional, Copyable

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
Sections - Basic, Conditional, Copyable


Help video

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.
  • You can add more fields by clicking on the plus icon (that appears on every field of the section) OR by clicking the Add field button at the end of the section and then selecting a suitable block.
  • You can also drag an existing block to change its section

Reorder Sections

Similar to the drag-and-drop action of the blocks, you can also rearrange the sections.

Below example app consists of two sections.

Sections - Basic, Conditional, Copyable

Click on the Other Details section and drag-and-drop it in the place of Basic Details section.

You can see that sections have been rearranged. Other Details section is on top of the Basic Details section.

Sections - Basic, Conditional, Copyable

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 in your apps.

  • Click on a section title to select the section that should appear when some condition is met.
  • Click in the input box under the title "Display this section if" on the right panel.
  • Type @ to fetch all variables of the app.
Sections - Basic, Conditional, Copyable
Sections - Basic, Conditional, Copyable
Sections - Basic, Conditional, Copyable

In the example above, we are adding a condition to show this section only when the user selects Gender as Male.

  • You can also input advanced conditions like IF, ELSE, OR, AND etc. that are supported in Excel. The syntax is exactly what you type in the Excel formula bar. Just in place of the Cell number use @ and call the variables of the app.
  • Example: AND(@gender="Male", @age>18)

Here we are putting a condition to make sure that this section appears only when the person is Male and >18 years of age.

Copyable section

You can use this feature to collect data from the end-users when the count of input can be variable. For example, you want to collect the details of the family members of the user filling the data.

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

Sections - Basic, Conditional, Copyable

Sections - Basic, Conditional, Copyable

Enable: Allow Section to be copied

Enable this option to allow creating copes o the section, 'Family Members'

Max Number of copies

Enter a number of how many copies of the section that you want to create

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 member' is the text. You can add your own self-explanatory text. This appears on the bottom right side of the section

Preview
Sections - Basic, Conditional, Copyable
Sections - Basic, Conditional, Copyable

  1. Enter custom link text

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

<h2 style='color: #007BFF;cursor: pointer;text-align:left;'>+ Add another Basic Details section</h2>

Sections - Basic, Conditional, Copyable

In the above link, 'Add another member' can be changed to your own self-explanatory text. This appears on the bottom left side of the section

Preview:
Sections - Basic, Conditional, Copyable


Fields to prevent duplicates

For specific fields, such as Single Selector, Code Scanner, and Get Data from Other Apps, you can enable the "Fields to prevent duplicates" option to prevent the same values from being used in each copy of the section. This option appears only if any of these fields are in the section to be copied. It is useful when you need unique entries for these fields across multiple copies, ensuring that values like scanned codes or selected options are not duplicated.

Fields to prevent duplicates
Fields to prevent duplicates

Sub-sections

You can make some sections of the app as sub-sections 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.

Sections - Basic, Conditional, Copyable
Sections - Basic, Conditional, Copyable

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.
Sections - Basic, Conditional, Copyable
FAQs
Try our free plan
It will answer many more questions within just 15 minutes.
Made in Webflow