Skip to content

HeaderWidget

HeaderWidget widget is a component for displaying a header.

  • does not support control elements (e.g., action buttons or menus).
  • used to highlight or emphasize a specific context on the current screen.

Basics

Live Sample · GitHub

How does it look?

onlyheaderwidget.png

headerwidget.png

How to add?

Example

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

   {
     "name": "myExampleHeaderWidget",
     "title": "Header Widget",
     "type": "HeaderWidget",
     "bc": "myexample",
     "fields": []
   }

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

    {
      "name": "myexample",
      "title": "MyExample Form",
      "template": "DashboardView",
      "url": "/screen/myexample/view/myexample",
      "widgets": [
        {
          "widgetName": "SecondLevelMenu",
          "position": 1,
          "gridWidth": 24
        },
        {
          "widgetName": "myExampleHeaderWidget",
          "position": 2,
          "gridWidth": 24
        },
        {
          "widgetName": "myExampleForm",
          "position": 3,
          "gridWidth": 24
        }
      ],
      "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": "Header Widget Custom Title",
  "type": "HeaderWidget",
  "bc": "myexample",
  "fields": [
  ]
}
Live Sample · GitHub

Step1 Add ${customField} for title to .widget.json. Add customField with type hidden to corresponding *.widget.json* .

Info

To ensure a field value is received by the frontend and displayed in the header, it must be specified within the fields array.

{
  "name": "myExample",
  "title": "Header Widget Custom Title - value field 'Custom Field' : ${customField}",
  "type": "HeaderWidget",
  "bc": "myexample",
  "fields": [
    {
      "label": "customField",
      "key": "customField",
      "type": "hidden"
    }
  ]
}
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;

    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)

Add in title field with ${customField} 

{
"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": "customField",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldText",
              "span": 12
            }
          ]
        }
      ]}}
}

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

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

Live Sample · GitHub

Add "bgColor" : HEX color to .widget.json.

Add in title field with ${customField}

Info

To ensure a field value is received by the frontend and displayed in the header, it must be specified within the fields array.

{
  "name": "myExampleHeaderWidgetConstColor",
  "title": "Header Widget customField: ${customField},  customFieldText: ${customFieldText}",
  "type": "HeaderWidget",
  "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?

headerwidget.png

show_cond_current.gif

show_cond.gif

How to add?

Example

see Basic Live Sample · GitHub

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

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

Live Sample · GitHub

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

{
  "name": "myExample",
  "title": "Header Widget",
  "type": "HeaderWidget",
  "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 headerwidget 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 array is usually empty.

However, if you need to use field values for displaying data (for example, to dynamically generate a header based on a field value see Title Color ), you should add the required field with the Field hidden type — this way the frontend will be able to retrieve its value.

{
    "label": "Custom Field",
    "key": "customField",
    "type": "hidden"
}
  • "label"

Description: Field Title.

Type: String(optional).

  • "key"

Description: Name field to corresponding DataResponseDTO.

Type: String(required).

  • "type"

Description: Field hidden

Type: hidden.

How to add?

Example

Step 1 Download plugin download Intellij Plugin

Step 2 Add existing field to an existing headerwidget widget addfield.gif

Add field to .widget.json.

"name": "myexampleHeader",
"title": "Header Widget",
"type": "HeaderWidget",
"bc": "myexample",
{
    "label": "Custom Field",
    "key": "customField",
    "type": "hidden"
}

see more Fields

Options

This widget type does not support options

Standard Actions

This widget type does not support buttons