Info
Info widget is a component only for data viewing.
Basics
How does it look?
How to add?
Example
Step1 Create file .widget.json. with type = "Info"
{
"name": "MyExampleInfo",
"title": "Info widget Default",
"type": "Info",
"bc": "myexample",
"fields": [
{
"label": "Custom Field Text",
"key": "customFieldText",
"type": "text"
},
{
"label": "Custom Field",
"key": "customField",
"type": "input"
}
],
"options": {
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "customField",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "customFieldText",
"span": 12
}
]
}
]
}
}
}
{
"name": "myexampleinfo",
"title": "MyExample Info",
"template": "DashboardView",
"url": "/screen/myexample/view/myexampleinfo",
"widgets": [
{
"widgetName": "SecondLevelMenu",
"position": 0,
"gridWidth": 12
},
{
"widgetName": "MyExampleInfoTextInfo",
"position": 2,
"gridWidth": 12
},
{
"widgetName": "MyExampleInfoLeft",
"position": 10,
"gridWidth": 8
},
{
"widgetName": "MyExampleInfoTop",
"position": 10,
"gridWidth": 8
},
{
"widgetName": "MyExampleInfo",
"position": 10,
"gridWidth": 8
}
],
"rolesAllowed": [
"CXBOX_USER"
]
}
Title
Title Basic
Title - (optional)
There are types of:
constant title: shows constant text.constant title empty: if you want to visually connect widgets by them to be placed one under anothercalculated title: shows value provided in hidden text field, e.g. it can be calculated based on business logic of application
How does it look?
How to add?
Example
Step1 Add name for title to .widget.json.
Step1 Delete parameter title to .widget.json.
Step1 Add ${customField} for title to .widget.json.
{
"name": "MyExampleCustomTitle",
"title": "Custom Title - value field 'Custom Field' : ${customField}",
"type": "Info",
"bc": "myExampleBc",
"fields": [
{
"label": "Custom Field",
"key": "customField",
"type": "input"
}
],
"options": {
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "customField",
"span": 12
}
]
}
]
}
}
}
Title Color
Title Color allows you to specify a color for a title. It can be constant or calculated.
Constant color
Constant color is a fixed color that doesn't change. It remains the same regardless of any factors in the application.
Calculated color
Calculated color can be used to change a title color dynamically. It changes depending on business logic or data in the application.
Info
Title colorization is applicable to the following fields: date, dateTime, dateTimeWithSeconds, number, money, percent, time, input, text, dictionary, radio, checkbox, multivalue, multivalueHover.
How does it look?
How to add?
Example
Step 1 Add custom field for color to corresponding DataResponseDTO. The field can contain a HEX color or be null.
public MyExampleDTO(MyEntity entity) {
this.id = entity.getId().toString();
this.customField = entity.getCustomField();
this.customFieldColor = "#edaa";
this.customFieldTextColor = "#aeda";
this.customFieldText = entity.getCustomFieldText();
Step 2 Add "bgColorKey" : custom field for color and to .widget.json.
Add in title field with ${customField}
{
"name": "MyExample",
"title": "customField: ${customField}, customFieldText: ${customFieldText}",
"type": "Info",
"bc": "myexample",
"fields": [
{
"label": "Custom Field Color",
"key": "customField",
"type": "input",
"bgColorKey": "customFieldColor"
},
{
"label": "Custom Field",
"key": "customFieldText",
"type": "input",
"bgColorKey": "customFieldTextColor"
}
],
"options": {
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "customField",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "customFieldText",
"span": 12
}
]
}
]
}
}
}
Add "bgColor" : HEX color to .widget.json.
Add in title field with ${customField}
{
"name": "MyExampleColorConst",
"title": "customField: ${customField}, customFieldText: ${customFieldText}",
"type": "Info",
"bc": "myexample",
"fields": [
{
"label": "Custom Field Color",
"key": "customField",
"type": "input",
"bgColor": "#edaa"
},
{
"label": "Custom Field",
"key": "customFieldText",
"type": "input",
"bgColor": "#aeda"
}
],
"options": {
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "customField",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "customFieldText",
"span": 12
}
]
}
]
}
}
}
Business component
This specifies the business component (BC) to which this form belongs. A business component represents a specific part of a system that handles a particular business logic or data.
see more Business component
Show condition
The showCondition is used to define the availability or visibility of the widget dynamically.
The showCondition in configuration represents the condition under which the widge will be made visible to the user. It controls whether the form appears on the user interface based on the value of a specific field in another or currentbusiness component.
no show condition - recommended: widget always visible
show condition by current entity: condition can include boolean expression depending on current entity fields. Field updates will trigger condition recalculation only on save or if field is force active
show condition by parent entity: condition can include boolean expression depending on parent entity. Parent field updates will trigger condition recalculation only on save or if field is force active shown on same view
Tips
It is recommended not to use Show condition when possible, because wide usage of this feature makes application hard to support.
How does it look?
How to add?
Example
see Basics
Step1 Add showCondition to .widget.json. see more showCondition
{
"name": "MyExample",
"title": "Show condition widget",
"type": "Info",
"bc": "myExampleBc",
"showCondition": {
"bcName": "myExampleBc",
"params": {
"fieldKey": "customFieldShowCond",
"value": "true"
}
},
"fields": [
{
"label": "Custom Field, bc - myExampleBc",
"key": "customField",
"type": "number"
},
{
"label": "customFieldShowCond, bc - myExampleBc",
"key": "customFieldShowCond",
"type": "input"
}
],
"options": {
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "customField",
"span": 24
}
]
},
{
"cols": [
{
"fieldKey": "customFieldShowCond",
"span": 24
}
]
}
]
}
}
}
Step1 Add showCondition to .widget.json. see more showCondition
{
"name": "MyExample",
"title": "Child Entity",
"type": "Info",
"bc": "myExampleBc",
"showCondition": {
"bcName": "myExampleBc",
"params": {
"fieldKey": "customFieldShowCondition",
"value": true
}
},
"fields": [
{
"label": "Custom Field",
"key": "customField",
"type": "input"
}
],
"options": {
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "customField",
"span": 24
}
]
}
]
}
}
}
Fields
Fields Configuration. The fields array defines the individual fields present within the form.
- "label"
Description: Field Title.
Type: String(optional).
- "key"
Description: Name field to corresponding DataResponseDTO.
Type: String(required).
- "type"
Description: Field types
Type: String(required).
How to add?
Example
Step 1 Download plugin download Intellij Plugin
Step 2 Add existing field to an existing form widget
Add field to .widget.json.
{
"name": "MyExampleInfo",
"title": "Info widget Default",
"type": "Info",
"bc": "myexample",
"fields": [
{
"label": "Custom Field Text",
"key": "customFieldText",
"type": "text"
},
{
"label": "Custom Field",
"key": "customField",
"type": "input"
}
],
"options": {
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "customField",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "customFieldText",
"span": 12
}
]
}
]
}
}
}
see more Fields
Options layout
-
single column layout - recommended: shows each field on new row. Each field can have width from 1 to 24.Tips
Use single column layout when fields are frequently hidden or rearranged. This avoids layout issues and ensures the best user experience.
-
multi column layout: shows fields in grid. Grid can contain any number of rows. Each row can contain any number of fields, until sum of fields widths in row is less than 24. Each field can have width from 1 to 24. empty: only title and actions are shown. Usually used when standard buttons position needs to be changed (for example we want to show buttons under widget). One can hide buttons on widget with data. Create separate widget only with buttons and place it anywhere on view
Tips
It is recommended to use single column layout when possible, because dynamic fields hiding (add link) always works correctly in this case.
Info
The line has a size of 24 span, if you define fields on one line with a field width sum exceeding 24 span in total,that field and any subsequent fields will be moved to a new line . This means that each line will accommodate fields until the total width reaches 24 span, and any excess width will continue on the next line.
For example, you have three fields with widths of 12, 8, and 10 characters, respectively. In this case, the first field and two field will fit completely on the first line as it is within the 24-character limit. However, the thirt field's width contributes to the totat.It has finally become more 24. As a result, the third field will be moved to the next line.
How does it look?
How to add?
Example
Step1 Create "options": {"layout": {}}.
Step2 Add fields to "options": {"layout": {}}
Forming rows:
- Open
cols: "cols": [ - Add All fields(customField,customField2,customField3) with span from 1 to 24.
- Close
cols: ]
{
"name": "MyExampleInfo",
"title": "Info title",
"type": "Info",
"bc": "myExampleBc",
"fields": [
{
"label": "Custom Field span 6",
"key": "customField",
"type": "input"
},
{
"label": "Custom Field span 12",
"key": "customField",
"type": "input"
},
{
"label": "Custom Field span 24",
"key": "customField",
"type": "input"
}
],
"options": {
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "customField",
"span": 6
}
]
},
{
"cols": [
{
"fieldKey": "customField",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "customField",
"span": 24
}
]
}
]
}
}
}
Step1 Create "options": {"layout": {}}.
Step2 Add fields to "options": {"layout": {}}.
Forming row1 :
- Open
cols: "cols": [ - Add all feild : customField,customField2,customField3
- Check sum span <= 24: customField (span = 12),customField2 = 6, customField3 = 6 : sum 24)
- Close
cols: ]
Forming a row2 :
- Open 'cols' : "cols": [
- Add All filed(customField4)
- Check sum span <= 24 (customField4 span = 12 : sum 12)
- Close 'cols' : ]
{
"name": "MyExampleMultiColumnDefault",
"title": "Multi column layout default",
"type": "Info",
"bc": "myExampleBc",
"fields": [
{
"label": "Field 5 span 12 row",
"key": "customField",
"type": "input"
},
{
"label": "Field span 12 row",
"key": "customField",
"type": "input"
},
{
"label": "Field span 12 row",
"key": "customField",
"type": "input"
},
{
"label": "Field span 6 row",
"key": "customField",
"type": "input"
},
{
"label": "Field span 6 row",
"key": "customField",
"type": "input"
}
],
"options": {
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "customField",
"span": 12
},
{
"fieldKey": "customField",
"span": 6
},
{
"fieldKey": "customField",
"span": 6
}
]
},
{
"cols": [
{
"fieldKey": "customField",
"span": 12
},
{
"fieldKey": "customField",
"span": 12
}
]
}
]
}
}
}
Step1 Create "options": {"layout": {}}.
Button "Create" - On default
{
"name": "MyExampleEmptyOnlyButtons",
"title": "Empty Only Buttons",
"type": "Info",
"bc": "myExampleBc",
"fields": [
{
"label": "",
"key": "ONLY_BUTTONS_TEXT",
"type": "hint",
"showLength": 100
}
],
"options": {
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "ONLY_BUTTONS_TEXT",
"span": 24
}
]
}
]
}
}
}
Actions
This widget type does not support buttons