Custom states can be applied on form fields and it consist in a name and options. 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 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 | option | icon - font awesome class of an icon (ex: "fas fa-exclamation-triangle") |
| Code Block |
|---|
| language | js |
|---|
| title | ExampleExamples from javascript |
|---|
|
// get a field, like the selfdesc field from offerheaderdata form.
var field1 = akioma.root.dynObject.getObject('offerheaderdata').getField('selfdesc');
// add an a"alert" custom state to that field, with an alert icon
field1.controller.setCustomState('Alert');
// add a "bg" custom state
field1.controller.setCustomState('Alert1', {icon: 'fas fa-exclamation-triangle'}bg');
// remove the custom state from that field
field1.controller.clearCustomState('Alert1');Alert'); |
For styling we use the "akcustomstate" attribute and search if it contains the desired value.
| 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;
} |
