Custom states can be aplied to any akObject and it consist in a name and options. Itapplied on form fields and it's displaying a custom icon (set in options) and some specific style on the field.css for each state.
If the EventOnCustomStateChange is set in designer, than everytime the every time the custom state is changed, the event is triggered and you can see the action (set or clear) and the customState that had been added/removed.
Custom states attributes:
attribute | values |
---|---|
name | the name of the custom state (eg. 'alert') |
option |
a key-value object (eg. {bubbleUp: true}) |
For the moment, only the bubbleUp is available as option. The bubbleUp option will make the custom state
...
visible also
...
on panel header and window
...
header.
...
Examples:
Getting a field to test on:
var field1 =
Notes:
- the panel header and window header will not have an <i> tag for the icon. Setting an icon on panel/window will be done on the before/after pseudo-class from css.
- the bubbleUp option is available only starting with SWAT 20.11 release
Code Block | ||||
---|---|---|---|---|
| ||||
// get a field, like the selfdesc field from offerheaderdata form. var field1 = akioma.root.dynObject.getObject('offerheaderdata').getField('selfdesc') |
...
Code Block | ||
---|---|---|
| ||
; // add an "alert" custom state to that field field1.controller.setCustomState('Alert1', {icon: 'f071'}) | ||
Code Block | ||
| ||
Alert'); // add a "bg" custom state field1.controller.setCustomState('bg'); // remove the custom state from that field field1.controller.clearCustomState('Alert1Alert'); |
For styling we use the "akcustomstate" attribute and search if it contains the desired value. Note: the name of the custom state should match the CSS definition (case-sensitive)
Code Block | ||||
---|---|---|---|---|
| field1.controller.setCustomState('Alert1', {icon: 'f071', bubbleUp: true})
| |||
div[akcustomstate*="alert"] {
display: inline-flex;
.custom-icon {
display: inline-block;
margin-left: 10px;
padding-left: 20px;
position: relative;
i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&::before {
content: "\f071";
font-family: 'Font Awesome 5 Pro';
font-weight: 900;
font-style: normal;
}
}
}
}
div[akcustomstate*="bg"] {
background-color: gray !important;
}
//customState for window and panel header
div[akstyle="window"][akcustomstate*="bg"] div.dhxwin_hdr,
.dhx_cell_layout[akcustomstate*="bg"] div.dhx_cell_hdr {
background-color: gray !important;
} |
Info |
---|
Make sure you are using icons from the Font Awesome library version available in the framework. Using icons from another version of Font Awesome might not work. |
For CLAPI example, in DetailBasisdatenFormAfterDisplay.ts, function DetailBasisdatenFormAfterDisplay, set the following lines.
Code Block | ||
---|---|---|
| ||
Form.getField("todes_dat").setCustomState('bg', {bubbleUp: true});
Form.getField("taetigkeit").setCustomState('bg', {bubbleUp: true}); |
Code Block | ||||
---|---|---|---|---|
| ||||
// in the EventOnCustomStateChange attribute, in Layout Designer, you specify: $ akioma.myFunction(self);
myFunction = function(option) {
console.log(option.actions, option.customState);
} |