See all tasks >
We've included several extra components for your convenience.
These extra components work out of the box.
By Silvio Moreto, Ana Carolina, caseyjhol, and Matt Bryson. ( GitHub)
Set Allow Multi Selection to yes, to allow multiple selections
Allow Multi Selection
Set HTML Form Element Attributes to one of the Bootstrap styles:
HTML Form Element Attributes
Add data-live-search="true" into the elements "HTML Form Element Attributes" for a searchable selectlist
Add title="Yourtitle" into the elements "HTML Form Element Attributes" as an alternative to display when the option is selected.
Using the data-selected-text-format="value" attribute on a multiple select you can specify how the selection is displayed.
The supported values are:
count > x
You can also show the tick icon on single select with the show-tick class:
The bootstrap menu arrow can be added with the show-menu-arrow class:
Alternatively, use the data-width attribute to set the width of the select. Set data-width to auto to automatically adjust the width of the select to its widest option. An exact value can also be specified, e.g., 300px or 50%.
Add a header to the dropdown menu, e.g. header: 'Select a country' or data-header="Select a country"
header: 'Select a country'
data-header="Select a country"
Validating forms frontend have never been so powerful and easy.
Visit the Parsley website for all options
The theme uses a slightly different approach for adding validations to form elements.
Parsley normally is turned on by adding a data-attribute to the form. In Apex there are very limited possibilities to alter the way the form element is rendered.
The theme therefore expects the data-attribute on the form-elements individually.
Beautifying the error messages by giving them CSS and/or putting them in nice error-boxes as shown in the Components page is a work in progress.
Add the attribute parsley to commit the field to the Parsley engine.
Other data attributes on the field define what Parsley should do with the field.
Simply use one of the Parsley data attributes (all starting with data-parsley-*, to the elements attributes.
Below are some fields using a number of checks.
The check is done using a dynamic action on the "Validate" button.
The validate button should have a dynamic action that triggers the Parsley validation.
// in this example only one group is validated ('simple')
// you can make the check as complicated as you want.
// destroy parsley to prevent other checks to fire
This will bind the validation for the entire form, but only validates the fields that are part of the "simple" group.
You can add fields to a group by adding data-parsley-group="simple" to the fields' attributes.