The Quick Button Unified Interface allows you to fully customize the appearance of your buttons.
Note: instructions on how to configure a Quick Button can be found here. It is presumed you have a working Quick Button for this article.
To make the changes we change the CSSClass UI Property highlighted in the screenshot below:
The supported options are below. These are based on the Bootstrap 3 framework: https://getbootstrap.com/docs/3.3/css/#buttons
Vertical and Horizontal Buttons
By default, the buttons will be displayed horizontally. However, you can display them vertically:
To do this you will need to change the value in the buttongroupclass to btn-group-vertical in the FinalOutput cell in the Decision Table:
If you want your buttons to take up the full width of the container you can use btn-block as part of the buttongroupclass.
In the following example, the buttongroupclass is set to btn-group-vertical btn-block and the CCSStyle UI Property of each button has had the width:100px style removed:
Style: Colors
The options for the predefined colors are:
Primary (Blue)
CSSClass: 'btn btn-primary'
Success (Green)
CSSClass: 'btn btn-success'
Info (Light Blue)
CSSClass: 'btn btn-info'
Warning (Orange)
CSSClass: 'btn btn-warning'
Danger (Red)
CSSClass: 'btn btn-danger'
Style: Sizes
The options for the predefined sizes are:
Large
CSSClass: 'btn btn-lg'
Small
CSSClass: 'btn btn-sm'
XSmall
CSSClass: 'btn btn-xs'
Multiple CSS Class Parameters
You can create combinations of these parameters by simply combining them. A large red button would be 'btn btn-lg btn-danger'
Custom Styles
You can override the predefined classes by adding custom inline CSS to the CSSStyle UI Property. This provides you with full control over the appearance of your buttons.
For example 'width:100px; background-color: lightblue; padding-left: 8px;'
Field Listeners
It is possible to have a North52 Quick Button Unified Interface rebuild itself from its configuration formula based on the change of fields on the form.
To do this, add a comma separated list of field names into the fieldlisteners property of the Final Output
The Formula below is configured to listen to the jobtitle and north52_type fields:
