List Builder is a tool for front end developers to create repeating layouts. This allows clients to fill out a form telling Antilles to repeat a complex html layout without the fear of missing a closing tag or mixing up what HTML tags go where. We can define a template to handle the hard stuff for a specific task, which allows us to create more complex content without greatly increasing complexity for the user to input data.
The Client
When users want to input data they have only a simple form to fill out. A good example of this is a control preset on this site to show you the power of List Builder. If you have visited our 'Meet the LRS Antilles Team' on the About Us page, then you have seen List Builder in action.
To the right is an image of the form used to build a List Builder control on the front end. This is a sample of what you would see if you were using a set-up list to enter content onto a page. The list can be included like any other plugin in LRS Antilles using a shortcode tag to tell the Antilles CMS where to include the list within the page and specifying which list you want to use in the settings of that plugin. One particular feature not shown here is the details page.
The details page of a List Builder record will allow our developers to set up a template so the end-user will be redirected to a new page with more details or a different layout when any record from the List Builder list is selected. The details page will still look much like what you see to the right, except it will have some additional fields that won't be visible at first when the list is being rendered on the web page.
The Developers
For the developers, things get a little more interesting. After developing a template using html, css and javascript, the List Builder template is then modified to use dynamic shortcodes that can also be defined by the developer.
So, for example, you would take something like this:
<li>
<a href="https://www.linkedin.com/in/#/" title="Follow Name on LinkedIn">
<div class="headshot" style="background-image: url(/images/lists/8/image.jpg)">
<img src="/themes/antilles2k17/assets/dist/images/staff/placeholder.gif" alt="">
</div>
<h3>First and Last Name</h3>
<span class="title">Job Title</span>
<span class="linkedin"><span></span> follow</span>
</a>
</li>
and then replace the text we want to be variable with shortcodes like this:/p>
<li>
<a href="{{linkedin-profile-link}}" title="Follow {{first-name}} {{last-name}} on LinkedIn">
<div class="headshot" style="background-image: url({{image}})">
<img src="/themes/antilles2k17/assets/dist/images/staff/placeholder.gif" alt="">
</div>
<h3>{{first-name}} {{last-name}}</h3>
<span class="title">{{job-title}}</span>
<span class="linkedin"><span></span> follow</span>
</a>
</li>
Notice how, instead of actual data we are including variable names between {{curly braces}}. This tells LRS Antilles that it needs to look for a variable by that name and insert it into that place within the structure that has been defined. There is also a static header and a static footer defined within the settings of the list that are not repeated but serve as a container for the repeating items of List Builder.
This format for the module allows great flexibility for List Builder - since it does nothing with the template after it is defined except to place it on the page. Anything that is possible with the template master pages is possible with List Builder as well. If List Builder gets pushed to its limits, however, a custom module can be developed with a better understanding of customer needs.