Skip to content

EmptyWidget

EmptyWidget widget is a component for displaying text.

  • does not support control elements (e.g., action buttons or menus) and fields.

Basics

Live Sample · GitHub

How does it look?

onlyemptywidget.png

emptywidget.png

emptyheaderwidget.png

How to add?

Example

Step1 Create file .widget.json. with type = "EmptyWidget"

   {
     "name": "myexampleEmptyWidget",
     "title": "Empty Widget",
     "type": "EmptyWidget",
     "bc": "myexample",
     "fields": [
     ]
   }

Step2 Add widget to corresponding *.view.json* .

    {
      "name": "myexampleempty",
      "title": "MyExample Form",
      "template": "DashboardView",
      "url": "/screen/myexample/view/myexampleempty",
      "widgets": [
        {
          "widgetName": "SecondLevelMenu",
          "position": 0,
          "gridWidth": 24
        },
        {
          "widgetName": "myexampleEmptyWidget",
          "position": 1,
          "gridWidth": 12
        }
      ],
      "rolesAllowed": [
        "CXBOX_USER"
      ]
    }

Live Sample · GitHub

Title

Live Sample · GitHub

Title Basic

Title for widget.

There are types of:

  • constant title: shows constant text.
  • calculated title: shows value provided in hidden text field, e.g. it can be calculated based on business logic of application

How does it look?

consttitle.png

calctitle.png

How to add?

Example

Step1 Add name for title to .widget.json. 

{
  "name": "myExampleconst",
  "title": "Empty Widget Custom Title",
  "type": "EmptyWidget",
  "bc": "myexample",
  "fields": [
  ]
}
Live Sample · GitHub

Step1 Add ${customField} for title to .widget.json.

Dynamic data output in the title only works if these fields are displayed on or passed as the Field hidden type from other widget List widget, Form widget,Info widget.

{
  "name": "myExample",
  "title": "Empty Widget Custom Title - value field 'Custom Field' : ${customField}",
  "type": "EmptyWidget",
  "bc": "myexample",
  "fields": [
  ]
}
Live Sample · GitHub

Title Color

Title Color allows you to specify a color for a title. It can be constant or calculated.

Live Sample · GitHub

  • Constant color* is a fixed color that doesn't change. It remains the same regardless of any factors in the application.

Live Sample · GitHub

  • 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?

colorwidget.png

How to add?
Example

Step 1 Add custom field for color to corresponding DataResponseDTO. The field can contain a HEX color or be null. 

    private String customFieldColor;
    private String customFieldTextColor;

    @SearchParameter(name = "customFieldText", provider = StringValueProvider.class)
    private String customFieldText;

    public MyExampleDTO(MyEntity entity) {
        this.id = entity.getId().toString();
        this.customField = entity.getCustomField();
        this.customFieldText = entity.getCustomFieldText();

        this.customFieldColor = "#edaa";
        this.customFieldTextColor = "#aeda";
    }

Step 2 Dynamic data output in the header only works if these fields are displayed on or passedas the Field hidden type from other widget List widget, Form widget,Info widget with the bgColorKey property.

Add "bgColorKey" : custom field for color and to .widget.json .(List widget, Form widget,Info widget)

{
"label": "Custom Field",
"key": "customFieldText",
"type": "input",
"bgColorKey": "customFieldTextColor"
}

{
  "name": "myexampleForm",
  "title": "Form",
  "type": "Form",
  "bc": "myexample",
  "fields": [
    {
      "label": "Custom Field Color",
      "key": "customField",
      "type": "input",
      "bgColorKey": "customFieldColor"
    },
    {
      "label": "Custom Field",
      "key": "customFieldText",
      "type": "input",
      "bgColorKey": "customFieldTextColor"
    }
  ],
  "options": {
    "actionGroups": {
      "include": [
        "save"
      ]
    },
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customFieldText",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

Step 3 Add in title field with `${customField} . 

{
  "name": "myExampleEmptyWidget",
  "title": "Empty Widget customField: ${customField},  customFieldText: ${customFieldText}",
  "type": "EmptyWidget",
  "bc": "myexample",
  "fields": [
    {
      "label": "Custom Field Color",
      "key": "customField",
      "type": "hidden",
      "bgColorKey": "customFieldColor"
    },
    {
      "label": "Custom Field",
      "key": "customFieldText",
      "type": "hidden",
      "bgColorKey": "customFieldTextColor"
    }
  ]
}

Live Sample · GitHub

Constant color in the title only works if these fields are displayed on or passedas the Field hidden type from other widget List widget, Form widget,Info widget.

Add "bgColor" : HEX color to .widget.json.(List widget, Form widget,Info widget.

Add in title field with ${customField} 

{
  "name": "myExampleEmptyWidgetConstColor",
  "title": "Empty Widget customField: ${customField},  customFieldText: ${customFieldText}",
  "type": "EmptyWidget",
  "bc": "myexample",
  "fields": [
    {
      "label": "Custom Field Color",
      "key": "customField",
      "type": "hidden",
      "bgColor": "#edaa"
    },
    {
      "label": "Custom Field",
      "key": "customFieldText",
      "type": "hidden",
      "bgColor": "#aeda"
    }
  ]
}

Live Sample · GitHub

Show condition

see more showCondition

Live Sample · GitHub

  • no show condition - recommended: widget always visible

Live Sample · GitHub

  • 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

Live Sample · GitHub

  • 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?

emptywidget.png

show_cond_current.gif

show_cond.gif

How to add?

Example

see Basic Live Sample · GitHub

showCondition only works if these fields for showCondition are displayed on or passed as the Field hidden type from other widget List widget, Form widget,Info widget.

Step1 Add showCondition to .widget.json. see more showCondition 

{
  "name": "myExample",
  "title": "Empty Widget",
  "type": "EmptyWidget",
  "bc": "myexample",
  "showCondition": {
    "bcName": "myexample",
    "params": {
      "fieldKey": "customFieldShowCondition",
      "value": true
    }
  },
  "fields": [
  ]
}

Live Sample · GitHub

showCondition only works if these fields for showCondition are displayed on or passed as the Field hidden type from other widget List widget, Form widget,Info widget.

Step1 Add showCondition to .widget.json. see more showCondition 

{
  "name": "myexampleEmpty",
  "title": "Empty Widget",
  "type": "EmptyWidget",
  "bc": "myexample",
  "showCondition": {
    "bcName": "myexample",
    "params": {
      "fieldKey": "customFieldShowCondition",
      "value": true
    }
  },
  "fields": [

  ]
}
Live Sample · GitHub

Business component

This specifies the business component (BC) to which this emptywidget belongs. A business component represents a specific part of a system that handles a particular business logic or data.

see more Business component

Fields

This widget type does not support fields

Options

This widget type does not support options

Standard Actions

This widget type does not support buttons