How to hide the Linked Section Add button after X records

This is a short tutorial on how to use CSS (Cascading Style Sheets) to prevent users from adding more than X numbers of linked sections. For example, if you would like users to be able to add up to, but not more than, 10 appliances when performing a home inspection and you don’t expect them to be counting each time they add a new record, you could use this code.

A little background first. Youreka uses basic HTML to display forms on the mobile device. Each part of the Youreka form gets assigned a randomly generated ID that can be referred to for styling. Each of these IDs (referred to as data-randomid) can be manipulated using CSS that is applied at the Form Template level. The process we’re going to describe here will refer to the same data-randomid multiple times to limit, with the number of times it is reference being the upper limit of times the user can hit the “Add+” button.

Steps

1. The first step in this process is to create a Form Template with a linked section. Once you have created a template with a linked section, publish the template and create a form. Then, open the form using the browser of your choice (this example uses Firefox).
2. Right click on the Form and select “Inspect”. This will bring up a window where you can identify the HTML code that makes up the Form.
   
3. Your Inspect window should have a selector tool like this one:
   
4. Click on the Selector tool and then click on the linked section header.
   
5. When you do this, you’ll be able to see the data-randomid value associated with the linked section. Copy this value, you’ll use it in a moment.

Code (Compact Linked Sections)

Work with this code below:

/*COMMENT: After four linked section records have been created, hide the 'add' button. Adjust with as many records as needed.*/
#formContent > div[data-randomid="###"]
~ div[data-randomid="###"] ~ div[data-randomid="###"] ~ div[data-randomid="###"]
~ .ls-card-add-container[data-randomid="###"]{
display: none !Important;
}

A bit of explanation is helpful here:

• The first line (wrapped by /* and */) is a comment to indicate what we want to do with our code
• #formContent is a reference to the parent container for the linked section. This value will always be in this position.
• “>” indicates that the next value (the div) falls under the #formContent container
• div[data-randomid=”###”] - this refers to the linked section record. You will replace each reference to ### with the data-randomid you selected when running Inspect. Each subsequent reference to an additional data-randomid allows one more linked section record to be added.
• “~” is used to indicate that another data-randomid value will follow.
• .ls-card-add-container is the container that is used to display the Add button.
• “{“ and “}” are used to bracket the action that will be taken once the maximum number of linked section records have been reached.
• “Display: none !important;” is used to remove the display of the Add button once the number of linked section records have been reached.
  In the code above, we are limiting the number of records to four total. The first one is displayed in red, the second in orange, the third in yellow and the fourth in blue.

The final result looks like this:

/*COMMENT: After four linked section records have been created, hide the 'add' button. Adjust with as many records as needed.*/
#formContent > div[data-randomid="23b25616"]
~ div[data-randomid="23b25616"] ~ div[data-randomid="23b25616"] ~ div[data-randomid="23b25616"]
~ .ls-card-add-container[data-randomid="23b25616"]{
display: none !Important;
}

Code (Compact Linked Sections)

You will need to pull an additional piece of information about your linked section for this code to work for non-compact linked sections. To obtain it, use the HTML selector tool and highlight the linked section header (highlighted below). Look a few lines up for the reference to the data-section-name (also highlighted). This name may have modifications for spaces and will possibly be shortened. Copy the value inside the quotation marks, you’ll use it later.

Work with this code below:

/*COMMENT: After five linked section records have been created, hide the 'add' button. Adjust with as many records as needed.*/
#formContent > div[data-randomid="###"]
~ div[data-randomid="###"] ~ div[data-randomid="###"] ~ div[data-randomid="###"]
~ div[data-section-name="NAME HERE"] div:nth-of-type(2) button{
display: none !Important;
}

• The first line (wrapped by /* and */) is a comment to indicate what we want to do with our code
• #formContent is a reference to the parent container for the linked section. This value will always be in this position.
• “>” indicates that the next value (the div) falls under the #formContent container
• div[data-randomid=”###”] - this refers to the linked section record. You will replace each reference to ### with the data-randomid you selected when running Inspect. Each subsequent reference to an additional data-randomid allows one more linked section record to be added.
• “~” is used to indicate that another data-randomid value will follow.
• div[data-section-name="NAME HERE"] div:nth-of-type(2) button is the reference to the Add button. Replace the text “NAME HERE” with the name of the section as it appears in the HTML code (see instructions for copying it above).
• “{“ and “}” are used to bracket the action that will be taken once the maximum number of linked section records have been reached.
• “Display: none !important;” is used to remove the display of the Add button once the number of linked section records have been reached.
• In the code above, we are limiting the number of records to five total. The first one is displayed in red, the second in orange, the third in yellow and the fourth in blue. There is an implied additional record before the first one listed.

The final result looks like this:

/*COMMENT: After five linked section records have been created, hide the 'add' button. Adjust with as many records as needed.*/
#formContent > div[data-randomid="23b25616"]
~ div[data-randomid="23b25616"] ~ div[data-randomid="23b25616"] ~ div[data-randomid="23b25616"]
~ div[data-section-name="YLS"] div:nth-of-type(2) button{
display: none !Important;
}

Apply the CSS Code

The code gets applied at the template. Once you have your finished code, go to the template in question. Select the gear icon in the upper right corner and then select “Edit Template Properties”. Scroll down a bit in this window and paste your code to the end of any existing code under “CSS FormDetail” (which drives how the form is viewed when not editing it) and “CSS CompleteForm” (which drives how the form is viewed while editing). Test the results and modify as needed.

Caveat

There is one limitation to this process. If a user reaches the maximum number of linked section records in their form (thus hiding the Add button) and later deletes a linked section record, the Add button is not dynamic using this process. Once the criteria for hiding it have been reached, the button will disappear for good.