Skip to main content

Twitter bootstrap theme

Bring Bootstrap's components to life in Oracle Application Express, with over a dozen custom jQuery plugins. Easily include them all, or one by one.

Forms

Basic form

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

 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

Sign in

Horizontal form

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

Form controls

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.
Expected format: D-Mon-YYYY

Lists

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 09-DEC-82 - 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 09-DEC-82 - 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

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

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

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

Breadcrumbs

Just use the breadcrumbs in the page-wizard, or define a breadcrumb yourself in Apex's Shared Components

Modal

Basic Modal

 Open Modal


Steps:

  1. Specify the "TB Modal Region" template for modal regions. This will make the region hidden at start.
  2. Specify the Static ID for this region.
  3. Add any content (forms, html, lists etc) for the newly created region.
  4. Now you have a few options to call (open) the region.
    • Using data attributes on the calling element (The easy way)
      Add data-toggle="modal" data-target="#ModalRegionStaticID" to the Button Attributes. Where ModalRegionStaticID is the ID of the region you specified in step 2.
    • Using JavaScript:
      javascript: $('#ModalRegionStaticID').modal();
      The static ID you specified in step 2 should be inserted at ModalRegionStaticID.
      The JavaScript can be attached using:
      • Dynamic actions
      • The link directly on the button

Modal Region

iFrame Modal

Open Iframe Modal

Iframe modals simplify your page-logic because you can have all procedures (for CRUD for example) on a separate page. This page will then be loaded when opening the modal.


Steps:

  1. Create the page you want to open in the modal.
  2. Use "TB iFramed Form" as the region template.
  3. Use "TB Modal" as the page template.
  4. You must make a few adjustments to the generated page to make the modal act on saving, canceling and closing the modal.
    • Add a dynamic action type "javascript" to the Cancel-button you should execute closemodal();.
      This javascript function is provided in the page-template for your convenience.
    • Next to the cancel-button you may also want to close the modal after CRUD operations. To do this:
      • The branch that branches to the same page should give the request back to that page.
        Put &REQUEST. into the request-field of the branch
      • The rendering part of your page can now read the &REQUEST.
        Create a javascript dynamic-action for the "Page Load" event
        var requests = "SAVE,DELETE,CREATE";
        if (requests.indexOf("&REQUEST.")>-1)
            closemodal();
    • We're working on a way to have the save and error messages displayed correctly on the calling page.

iFrame Modal on Report

  1. Create a classical report
  2. add a link to a column
  3. add data-value="#COLUMN_NAME#" data-modal="iframeforreport" to the Link attributes
    • here #COLUMN_NAME# is the reference to the column-value that needs to be transferred to the iFramed form
    • "iframeforreport" is the reference to hook the Plugin on
  4. add a Dynamic Action to the page
    • give it a proper name
    • event = Click
    • selection type = jQuery selector
    • jQuery selector = [data-modal="iframeforreport"]
    • condition = no condition
    • Click "Next"
    • Action = S4A TB Iframed Modal [Plug-in]
    • fill width, height, page, and item appropriate for your situation
    • value-type = "link-attribute"
    • value = data-value (this is the attribute you used to refer to the column-value in step 3.
    • Click "Next"
    • Click "Create dynamic action"

EMP

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

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