Components

Cascading LOV


Cascading LOV's and cascading selects are supported out of the box.

Forms

Basic form

All input items are automatically transformed to Bootstrap items and get default 100% width. Set the Label template to TB Label

Does not matter
 Submit for error  Submit for success

Inline form

Simply type form-inline into Attributes → Region CSS Classes and change the Label template to TB Label inline

Remember me
Sign in

Horizontal form

Simply type form-horizontal into Attributes → Region CSS Classes and change the item labels to TB Label horizontal

Form controls

Cant check this
Add has-success to HTML Form Element CSS Classes
Add has-warning to HTML Form Element CSS Classes
Add has-error to HTML Form Element CSS Classes
The date-picker javascript library is included. You don't have to do anything for a bootstrap styled datepicker.
However the default dateformat for the library is different than the one apex uses.
You therefore must take this into account
  • Default: "mm/dd/yyyy"
  • The date format, combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy.
  • d, dd: Numeric date, no leading zero and leading zero, respectively. Eg, 5, 05.
  • D, DD: Abbreviated and full weekday names, respectively. Eg, Mon, Monday.
  • m, mm: Numeric month, no leading zero and leading zero, respectively. Eg, 7, 07.
  • M, MM: Abbreviated and full month names, respectively. Eg, Jan, January
  • yy, yyyy: 2- and 4-digit years, respectively. Eg, 12, 2012.
  • These format strings are case sensitive!
The format string must be added to the "HTML Form Element Attributes" as follows:
data-date-format="d-M-yyyy"
Keep the format for the datepicker library in line with the dateformat in the "Format Mask" under the "Settings" section of the page-item.
You must set both properties: "Format mask" and "HTML Form Element Attributes".
    for example
  • data-date-format="d-M-yyyy" corresponds with "D-Mon-YYYY" in the "Format Mask"
  • data-date-format="d-m-yyyy" corresponds with "D-M-YYYY" in the "Format Mask"
Additional settings can be found on the libraries documentation site.
You can for example add data-date-autoclose="true" to the "HTML Form Element Attributes" to automatically close the picker after choosing a date.

Reports

Classic report

EMP

MGR EMPNO ENAME SAL JOB HIREDATE COMM DEPTNO
- 7839 KING €5.000,00 PRESIDENT 17-NOV-81 - 10
7839 7698 BLAKE €2.850,00 MANAGER 01-MEI-81 - 30
7839 7782 CLARK €2.450,00 MANAGER 09-JUN-81 - 10
7839 7566 JONES €2.975,00 MANAGER 02-APR-81 - 20
7566 7788 SCOTT €3.000,00 ANALYST 19-APR-87 - 20

Pagination

EMP

MGR EMPNO ENAME SAL JOB HIREDATE COMM DEPTNO
- 7839 KING €5.000,00 PRESIDENT 17-NOV-81 - 10
7839 7698 BLAKE €2.850,00 MANAGER 01-MEI-81 - 30
7839 7782 CLARK €2.450,00 MANAGER 09-JUN-81 - 10
7839 7566 JONES €2.975,00 MANAGER 02-APR-81 - 20
7566 7788 SCOTT €3.000,00 ANALYST 19-APR-87 - 20

Buttons

Options

Use any of the available button templates to quickly create a styled button.
DefaultPrimarySuccessInfoWarningDangerLink

Sizes

Fancy larger or smaller buttons? Simply add one of the classes .btn-lg, .btn-sm, or .btn-xs to the Button CSS Classes for additional sizes.

Large Buttons

Default Buttons

Small Buttons

Extra small Buttons

Iconic buttons

Font awesome is built-in, so you can use icons in your buttons by using an iconic button template and add the icons name in the Button CSS Classes.

 Default  Primary  Success  Info  Warning  Danger  Link

Tabs

Selected tab, pill and accordion

The selected tab will be stored in a local storage, so after a page refresh the selected tab is automatically activated.

Tabs

To create Tabs:

  1. Create a container region to hold the different tabs and set the region template to "TB Tab container - Tabs"
  2. Create a subregion within the container for every tab and set the region template to "TB Tabbed region"

Tab container

Pills

To create Pills:

  1. Create a container region to hold the different tabs and set the region template to "TB Tab container - Pills"
  2. Create a subregion within the container for every tab and set the region template to "TB Tabbed region"

Pills container

Accordion

Basic accordion

To create an Accordion:

  1. Create a container region to hold the different accordion-panels and set the region template to "TB Accordion container"
  2. Create one a subregions within the container for every accordion-panel (no specific region template necessary)

Accordion container

First Accordion

Lorem ipsum is een tekst die vaak door drukkers, zetters, grafisch ontwerpers en dergelijken gebruikt wordt om te kijken hoe een tekst of lettertype eruit ziet, bijvoorbeeld in letterproeven, op een webpagina of op een kaft van een boek. De standaardversie van het Lorem ipsum stamt uit circa 1500 en begint als volgt:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Second Accordion

Op deze tekst bestaan echter talloze varianten, die alleen de eerste zinsnede (Lorem ipsum dolor sit amet, consectetur adipisicing elit) steeds gemeen hebben. Zo is bijvoorbeeld ook de volgende tekst in omloop:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero leo, pellentesque ornare, adipiscing vitae, rhoncus commodo, nulla. Fusce quis ipsum. Nulla neque massa, feugiat sed, commodo in, adipiscing ut, est. In fermentum mattis ligula. Nulla ipsum. Vestibulum condimentum condimentum augue. Nunc purus risus, volutpat sagittis, lobortis at, dignissim sed, sapien. Fusce porttitor iaculis ante. Curabitur eu arcu. Morbi quam purus, tempor eget, ullamcorper feugiat, commodo ullamcorper, neque.

Third Accordion

De teksten zijn een vorm van pseudo-Latijn: ze lijken op het eerste gezicht origineel Latijn te zijn, maar hebben in werkelijkheid volstrekt geen betekenis. De tekst staat vol met spelfouten en verbasteringen. Dat is ook de reden waarom de teksten gebruikt worden door drukkers en zetters: bij een leesbare tekst zou de lezer afgeleid worden door de inhoud, terwijl het alleen om de vormgeving gaat. Bovendien heeft het Lorem ipsum een redelijk normale afwisseling van de verschillende letters en korte en lange woorden, waardoor het beter bruikbaar is dan bijvoorbeeld:

Dit is een voorbeeldtekst. Dit is een voorbeeldtekst. Dit is een voorbeeldtekst, ...

Tooltips

Tooltip On LeftTooltip On TopTooltip On BottomTooltip On Right


Tooltips can be added to every element by adding data attributes to it in the "Element Attributes".
data-toggle="tooltip" enables the tooltip
data-placement="right" (optional) {top|right|bottom|left} placement of the tooltip
title="tooltip content" Contents of the tooltip