Display a Linked Section in Table Format

Note: This code is provided as a starting point for you to adjust your own styling. You may need to make adjustments to the CSS in order to match your requirements.

A linked section allows a you to repeat a list of questions, each time relating to a different Salesforce record. In a Shared Linked section, each of these records is related to a parent record; Essentially, a Youreka Shared Linked Section is similar to a Salesforce related list. For instance, an Account record could have a related list of many potential Contacts.

Out-of-the-box Youreka allows you to repeat these sections, displaying all of the related questions in one or two columns.

Using CSS however, we can organize shared linked section records as individual rows in a table. Rows can be added and deleted which will add or delete records from Salesforce.   

Steps to Apply Shared Linked Section Table CSS:

1. Set up a Linked Section or a Shared Linked Section in a form template. For our example, we’re going to use the Account and Contact object relationship for our shared linked section.
2. Add a section called “Headers” or “Table Headers” to your Template above your linked section.
3. In the headers section, add Free text (Content -> Free Text) for each question in your linked section, matching the text with the label of the corresponding question.
   
4. Starting with this CSS snippet, locate the section titled Set Column Count and Column Gap. If you are using an IDE such as Visual Studio Code, the section to update will be located starting on line 95.
   
5. Make sure to set the column-count to the amount of questions in your related contacts section +1. So for our example, we have 5 questions in our shared linked section so we would set the column count to 6. Adding an additional column allows for the “Add” linked section record button to have its own column at the end of the row.
6. Once the column count is set, the final step is to save your template.
7. Following the instructions here, paste the snippet inside the CSS CompleteForm input box in the Edit Template Properties window for the form template you want to apply the Table CSS to.

Considerations

• Small devices like mobile phones in portrait will experience display issues, due to the small amount of horizontal display space available. These devices should be held in landscape mode in order to properly display the table format.
• The more columns used, the less horizontal space is available and content may not have room to fit if questions and question fields are condensed too much.
• For the column code to work as written, the section in the template has to be initially set up as a single column
• Compact view must not be enabled.
• Picklist, Datetime, and Date not yet supported.