MultivalueHover

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

Basics

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

Step 3 Add to .widget.json.

displayedKey - text field usually containing contcatenated values from linked rows

Live Sample · GitHub

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.

Live Sample · GitHub

List widgetInfo widgetForm widget

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

Live Sample · GitHub

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

How to add?

Example

With plugin(recommended)Example of writing code

Step 1 Download plugin download Intellij Plugin

Step 2 Add existing field to an existing form widget

List widgetInfo widgetForm widget

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

@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);
    }

}

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);
        fields.enableSort(MyExampleDTO_.customField);
    }

Step 3 Add popupBcName on current BC to corresponding widget,json.

Step 4 Add popup to corresponding view.json.

{
  "name": "myexamplelist",
  "title": "My example List",
  "url": "/screen/myexample/view/myexamplelist",
  "template": "DashboardView",
  "widgets": [
    {
      "widgetName": "secondlevelmenu",
      "position": 0,
      "gridWidth": 24
    },
    {
      "widgetName": "myexamplelist",
      "position": 20,
      "gridWidth": 12
    },
    {
      "widgetName": "myentitypicklistpopup",
      "position": 20,
      "gridWidth": 12
    }
  ],
  "rolesAllowed": [
    "CXBOX_USER"
  ]
}

not applicable

Live Sample · GitHub

Drilldown

not applicable

Validation

not applicable

Sorting

not applicable

Required

not applicable