MultivalueHover

MultivalueHover is a component that allows to view multiple values on mouse hover. All fields are readonly.

Basics

Live Sample · GitHub

How does it look?

List widgetInfo widgetForm widget

How to add?

Example

Step1 Add field List to corresponding BaseEntity.

@Entity
@Getter
@Setter
@NoArgsConstructor
public class MyEntity extends BaseEntity {

    @JoinTable(name = "MyEntity_MyEntity",
            joinColumns = @JoinColumn(name = "MyEntity_id"),
            inverseJoinColumns = @JoinColumn(name = "MyEntity_id")
    )
    @ManyToMany(cascade = {CascadeType.PERSIST, CascadeType.MERGE})
    private List<MyEntity> customFieldList = new ArrayList<>();

}

Step 2 Add field MultivalueField to corresponding DataResponseDTO.

@Getter
@Setter
@NoArgsConstructor
public class MyExampleDTO extends DataResponseDTO {

    @SearchParameter(name = "customFieldList.id", provider = LongValueProvider.class)
    private MultivalueField customField;

    private String customFieldCalc;

    public MyExampleDTO(MyEntity entity) {
        this.id = entity.getId().toString();
        this.customField = entity.getCustomFieldList().stream().collect(MultivalueField.toMultivalueField(
                e -> String.valueOf(e.getId()),
                MyEntity::getCustomField
        ));
        this.customFieldCalc = StringUtils.abbreviate(entity.getCustomFieldList().stream().map(MyEntity::getCustomField
        ).collect(Collectors.joining(",")), 12);
    }

}

List widgetInfo widgetForm widget

Step 3 Add to .widget.json.

displayedKey - text field usually containing contcatenated values from linked rows

{
  "name": "MyExampleList",
  "title": "List title",
  "type": "List",
  "bc": "myExampleBc",
  "fields": [
    {
      "title": "Custom Field",
      "key": "customField",
      "type": "multivalueHover",
      "displayedKey": "customFieldCalc"
    }
  ]
}

Step 3 Add to .widget.json.

{
  "name": "MyExampleInfo",
  "title": "Info title",
  "type": "Info",
  "bc": "myExampleBc",
  "fields": [
    {
      "label": "Custom Field",
      "key": "customField",
      "type": "multivalueHover",
      "displayedKey": "customFieldCalc"
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

Step 3 Add to .widget.json.

displayedKey - text field usually containing contcatenated values from linked rows

{
  "name": "MyExampleForm",
  "title": "Form title",
  "type": "Form",
  "bc": "myExampleBc",
  "fields": [
    {
      "label": "Custom Field",
      "key": "customField",
      "type": "multivalueHover",
      "displayedKey": "customFieldCalc"
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

Placeholder

not applicable

Color

Color allows you to specify a field color. It can be calculated based on business logic of application

Calculated color: Live Sample · GitHub

Constant color: Live Sample · GitHub

How does it look?

List widgetInfo widgetForm widget

How to add?

Example

Calculated colorConstant color

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

@Getter
@Setter
@NoArgsConstructor
public class MyExampleDTO extends DataResponseDTO {

    @SearchParameter(name = "customFieldList.id", provider = LongValueProvider.class)
    private MultivalueField customField;

    private String customFieldCalc;

    private String customFieldColor;

    public MyExampleDTO(MyEntity entity) {
        this.id = entity.getId().toString();
        this.customField = entity.getCustomFieldList().stream().collect(MultivalueField.toMultivalueField(
                e -> String.valueOf(e.getId()),
                MyEntity::getCustomField
        ));
        this.customFieldCalc = StringUtils.abbreviate(entity.getCustomFieldList().stream().map(MyEntity::getCustomField
        ).collect(Collectors.joining(",")), 12);
        this.customFieldColor = "#edaa";
    }

}

List widgetInfo widgetForm widget

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

{
  "name": "MyExampleList",
  "title": "List title",
  "type": "List",
  "bc": "myExampleBc",
  "fields": [
    {
      "title": "Custom Field",
      "key": "customField",
      "type": "multivalueHover",
      "displayedKey": "customFieldCalc",
      "bgColorKey": "customFieldColor"
    }
  ]
}

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

{
  "name": "MyExampleInfo",
  "title": "Info title",
  "type": "Info",
  "bc": "myExampleBc",
  "fields": [
    {
      "label": "Custom Field",
      "key": "customField",
      "type": "multivalueHover",
      "displayedKey": "customFieldCalc",
      "bgColorKey": "customFieldColor"
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

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

{
  "name": "MyExampleForm",
  "title": "Form title",
  "type": "Form",
  "bc": "myExampleBc",
  "fields": [
    {
      "label": "Custom Field",
      "key": "customField",
      "type": "multivalueHover",
      "displayedKey": "customFieldCalc",
      "bgColorKey": "customFieldColor"
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

List widgetInfo widgetForm widget

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

{
  "name": "MyExampleList",
  "title": "List title",
  "type": "List",
  "bc": "myExampleBc",
  "fields": [
    {
      "title": "Custom Field",
      "key": "customField",
      "type": "multivalueHover",
      "displayedKey": "customFieldCalc",
      "bgColor": "#edaa"
    }
  ]
}

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

{
  "name": "MyExampleInfo",
  "title": "Info title",
  "type": "Info",
  "bc": "myExampleBc",
  "fields": [
    {
      "label": "Custom Field",
      "key": "customField",
      "type": "multivalueHover",
      "displayedKey": "customFieldCalc",
      "bgColor": "#edaa"
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

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

{
  "name": "MyExampleForm",
  "title": "Form title",
  "type": "Form",
  "bc": "myExampleBc",
  "fields": [
    {
      "label": "Custom Field",
      "key": "customField",
      "type": "multivalueHover",
      "displayedKey": "customFieldCalc",
      "bgColor": "#edaa"
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

Readonly/Editable

All fields are readonly.

Filtering

Live Sample · GitHub

Filtering allows you to search data based on criteria. Search uses in operator which compares ids in this case.

How does it look?

List widgetInfo widgetForm widget

not applicable

not applicable

How to add?

Example

List widgetInfo widgetForm widget

Step 1 Add @SearchParameter to corresponding DataResponseDTO. (Advanced customization SearchParameter)

@Getter
@Setter
@NoArgsConstructor
public class MyEntityDTO extends DataResponseDTO {

    private String customField;

    public MyEntityDTO(MyEntity entity) {
        this.id = entity.getId().toString();
        this.customField = entity.getCustomField();
    }

}

Step 2 Add fields.enableFilter to corresponding FieldMetaBuilder.

    @Override
    public void buildIndependentMeta(FieldsMeta<MyExampleDTO> fields, InnerBcDescription bcDescription,
            Long parentId) {
        if (configuration.getForceActiveEnabled()) {
            fields.setForceActive(MyExampleDTO_.customField);
        }
        fields.enableFilter(MyExampleDTO_.customField);
    }

not applicable

not applicable

Drilldown

not applicable

Validation

not applicable

Sorting

not applicable

Required

`not applicable