Extra components

We've included several extra components for your convenience.

These extra components work out of the box.

Bootstrap-select

By Silvio Moreto, Ana Carolina, caseyjhol, and Matt Bryson. ( GitHub)

Cascading LOV / Selects

Multiple

Bootstrap Select

Set Allow Multi Selection to yes, to allow multiple selections

Bootstrap classes

Bootstrap Select
Bootstrap Select
Bootstrap Select
Bootstrap Select
Bootstrap Select
Bootstrap Select

Set HTML Form Element Attributes to one of the Bootstrap styles:

  • data-style="btn-primary"
  • data-style="btn-info"
  • data-style="btn-success"
  • data-style="btn-warning"
  • data-style="btn-danger"
  • data-style="btn-inverse"

Title

Add title="Yourtitle" into the elements "HTML Form Element Attributes" as an alternative to display when the option is selected.

Bootstrap SelectUsing the title attribute on a multiple select will show the default prompt text when nothing is selected (note: this will not work on single select elements as they must have a selected value):

Count selected items

Using the data-selected-text-format="value" attribute on a multiple select you can specify how the selection is displayed.

The supported values are:

  • values A comma delimted list of selected values. (default)
  • count If one item is selected, then the value is shown, if more than one is selected then the number of selected items is displayed, eg 2 of 6 selected
  • count > x Where X is the number of items selected when the display format changes from values to count

Bootstrap Select

Tick

You can also show the tick icon on single select with the show-tick class:

Menu arrow

The bootstrap menu arrow can be added with the show-menu-arrow class:

Width

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%.

Width auto
Width 300
Width 75%

Data header

Add a header to the dropdown menu, e.g. header: 'Select a country' or data-header="Select a country"

Bootstrap Select

Options & Methods

Please see the Methods section on the demo page for additional possibilties using javascript

Standard example

Parsley

Parsley, the ultimate javascript form validation library
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.

Adding Parsley to a field

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.

Element attributes: parsley data-parsley-trigger="focusout"

Simple examples

Below are some fields using a number of checks.
The check is done using a dynamic action on the "Validate" button.

HTML Form Element Attributes is set to parsley, Value Required is set to Yes
HTML Form Element Attributes is set to parsley data-parsley-type="email"
HTML Form Element Attributes is set to parsley data-parsley-type="number"
HTML Form Element Attributes is set to parsley data-parsley-type="integer"
HTML Form Element Attributes is set to parsley data-parsley-required="true"
HTML Form Element Attributes is set to parsley data-parsley-equalto="#APEX_ITEM_NAME"

Dynamic Action

Dynamic Action

 

The validate button should have a dynamic action that triggers the Parsley validation.
Simply create a javascript dynamic action on the button, without firing the script at page-load.

// in this example only one group is validated ('simple')
// you can make the check as complicated as you want.
if($('form').parsley().validate('simple'))
{
// destroy parsley to prevent other checks to fire
$('form').parsley().destroy();
apex.submit();
}

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.

 

Callout

Danger callout

To create this callout just create a region with template "TB callout" and add "bs-callout-danger" to "Region CSS classes".

Warning callout

To create this callout just create a region with template "TB callout" and add "bs-callout-warning" to "Region CSS classes".

Info callout

To create this callout just create a region with template "TB callout" and add "bs-callout-info" to "Region CSS classes".

Success callout

To create this callout just create a region with template "TB callout" and add "bs-callout-success" to "Region CSS classes".
You can also add items to the callout.