Custom states can be applied on form fields and it's displaying a custom css for each state.
If 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.
Custom states attributes:
| attribute | values |
|---|
| name | the name of the custom state |
| 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'); |
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 |
|---|
| title | Css for customStates |
|---|
|
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;
} |
| Info |
|---|
We are using Font Awesome 5 Pro. Using icons from another version of Font Awesome might not work. |
For CLAPI example, in sStammDetailOverviewForm EventAfterDisplay attribute we set "$ akioma.osiv.StammDetailOverviewFormAfterDisplay(self)";
| Code Block |
|---|
|
akioma.osiv.StammDetailOverviewFormAfterDisplay = function (Form) {
// Maske als Read-Only setzen.
const FormHelper = new akioma.osiv.FormHelper(Form);
FormHelper.ReadOnly = true;
//Set a customState on sstamm_nr_nachname field
const field = Form.getField('Stamm_Nr_nachname');
field.controller.setCustomState('alert');
// Combo-Boxen deaktivieren.
FormHelper.Field("sex").Enable = false;
FormHelper.Field("zivilstand").Enable = false;
FormHelper.Field("elt_gewalt").Enable = false;
return;
}; |
