Page History

Custom states can be applied on form fields and it's displaying a custom css for each state.

If the EventOnCustomStateChange the EventOnCustomStateChange is set in designer, than 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.

...

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.

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

language	js
title	Examples from javascript

// get a field, like the selfdesc field from offerheaderdata form.
var field1 = akioma.root.dynObject.getObject('offerheaderdata').getField('selfdesc');
// add an "alert" custom state to that field
field1.controller.setCustomState('Alert');
// add a "bg" custom state
field1.controller.setCustomState('bg');
// remove the custom state from that field
field1.controller.clearCustomState('Alert');

...

Code Block

title	Css for customStates

div[akcustomstate*="Alertalert"] {
    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
We are using Font Awesome 5 ProMake 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, set for a Form, the EventAfterDisplay attribute to call a method "$ akioma.OrderDetailOverviewFormAfterDisplay(self)";function DetailBasisdatenFormAfterDisplay, set the following lines.

Code Block

title	Examples from CLAPI

akioma.OrderDetailOverviewFormAfterDisplay = function (Form) {
  //Set a customState on a field
  const field = Form.getField('FIELD_NAME');
  field.controller.setCustomState('Alert');

  return;
};Form.getField("todes_dat").setCustomState('bg', {bubbleUp: true});
Form.getField("taetigkeit").setCustomState('bg', {bubbleUp: true});

Code Block

language	js
title	Example of function called from EventOnCustomStateChange

// in the EventOnCustomStateChange attribute, in Layout Designer, you specify: $ akioma.myFunction(self);
myFunction = function(option) {
    console.log(option.actions, option.customState);
}

Page tree

Versions Compared

Old Version 18

New Version Current

Key