CoT Modal

Include the library

In package.json, turn includeModal:'true'

Launch the modal

Using modal dialogs is a common design pattern with core apps. This helper does most of the work for you, including AODA compliance.

The method below is a static method of the cot_app (if your app is standalone) or CotApp (if your app is embedded) class.

Use it like this:

CotApp.showModal(options); //embedded apps cot_app.showModal(options); //standalone apps

Options reference

Property

Description

Example

Property

Description

Example

preset

string Optional.

Loads template.

Default is false.

Possible values are 'confirm' or 'alert'

If no value is provided for the preset then default template is used which requires using the default implementation of 
footerButtonsHtml
or writing a custom implementation for
footerButtonsHtml









title

String 

Title of the modal. Accepts HTML



title: <h2>This is my modal</h2>,



body

String 

Body of the modal. Accepts HTML

zoom

modalSize

String 

Set the default bootstrap size of the modal. 
Possible values : 'modal-sm', 'modal-lg'



modalSize:'modal-lg'



originatingElement

String  Required 

An element (DOM or $-selected) to set focus to after the modal is closed, use for accessibility





className

String Optional,

CSS class to put on the root div.modal element





bootstrapType

string Optional.

When preset='alert', sets a bootstrap alert class to the modal.

Default is 'default'.

Possible values are 'primary' 'success''info' 'warning' 'danger'

callback

Function Required

if preset='confirm'. Callback function when user confirms the message



buttons

Object Optional.

When preset='confirm' will change the buttons content and class





onShow

Function 

Hook into boostrap modal events



onShown

Function 

Hook into boostrap modal events



onHide

Function 

Hook into boostrap modal events



onHidden

Function 

Hook into boostrap modal events



footerButtonsHtml

Function
Let's the user define the footer for the modal

Example / Usage Details
If the value of footerButtonsHtml is defined
Here is where it falls in to the template of the Modal HTML:

Using options.footerButtonsHtml



Default behaviour for 'confirm' preset is to call the built in:
footerButtonsHtml: returnButton()
returnButton method

returnButton function

There are two functions calls made when the 'confirm' preset is being used

confirm preset returnButton calls

Then the final footer is being built:

confirm preset final footer

To customize the footer you will want to do the last code section expect for the <div class="modal-footer"> </div> in your 
footerButtonsHtml
function



Code sample

Options for a large default window





Options for an Alert window



Options for a Confirm window

Options for a Confirm window with custom buttons