Skip to content

PickListPopup

PickListPopup is a component that allows the user to select a value from a Popup list of entities.

Basics

Live Sample · GitHub

How does it look?

pickListPopupBasic.gif

Title

Live Sample · GitHub

Title Basic

pickListPopupTitleGuide.png

There are 3 types of titles for a Picklist Popup:

  • constant title: displays a fixed piece of text which cannot be changed.
  • constant title empty: shows no text.
  • calculated title: displays a dynamic piece of text, meaning it can change based on business logic or data in the application.

Tips

Use constant title empty if you want to visually connect widgets and place them one under another.

How does it look?

pickListPopupWithTitle.png

pickListPopupWithoutTitle.png

pickListPopupCalculatedTitle.png

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.

Title Color

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

Constant color

Live Sample · GitHub

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

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?

pickListPopupColor.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. 

    public MyEntityPickDTO(MyEntity entity) {
        this.id = entity.getId().toString();
        this.customField = entity.getCustomField();
        this.customFieldColor = "#edaa";
        this.customFieldColorFieldText = "#aeda";

Step 2 Add "bgColorKey" : custom field for color and to .widget.json.

Add in title field with ${customField} 

{
  "name": "myEntityPickListPopup",
  "title": "FieldInput:${customFieldColorInput}, FieldText: ${customFieldColorText}",
  "type": "PickListPopup",
  "bc": "myEntityPickListPopup",
  "fields": [
    {
      "title": "Color Input",
      "key": "customFieldColorInput",
      "type": "input",
      "bgColorKey": "customFieldColor"
    },
    {
      "title": "Color Text",
      "key": "customFieldColorText",
      "type": "text",
      "bgColorKey": "customFieldColorFieldText"
    }
  ]
}

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

Add in title field with ${customField} 

{
  "name": "myEntityPickListPopupColorConst",
  "title": "FieldInput:${customFieldColorInputConst}, FieldText: ${customFieldColorTextConst}",
  "type": "PickListPopup",
  "bc": "myEntityPickListPopupColorConst",
  "fields": [
    {
      "title": "Color Input",
      "key": "customFieldColorInputConst",
      "type": "input",
      "bgColor": "#edaa"
    },
    {
      "title": "Color Text",
      "key": "customFieldColorTextConst",
      "type": "text",
      "bgColor": "#aeda"
    }
  ]
}