Multifield

Multifield is a logical block containing any number of other field types. All fields in a logical block are readonly. The typical scenario involves using a common field type (e.g., input, date) for 'main' data and a hint field type for 'secondary' data

Basics

Live Sample · GitHub

How does it look?

Logical blocks can be shown in different styles

1) Style 'list' is displaying each entry on its own line

2) Style 'inline' is displaying all data on the same line

List widgetInfo widgetForm widget

Block containing with field type hint. see more hint

List widgetInfo widgetForm widget

How to add?

Example

List widgetInfo widgetForm widget

Add fields and style to .widget.json.

{
  "name": "MyExampleList",
  "title": "List title",
  "type": "List",
  "bc": "myExampleBc",
  "fields": [
    {
      "title": "Custom multifield Style 'List'",
      "key": "customFieldMulti",
      "type": "multifield",
      "style": "list",
      "fields": [
        {
          "title": "Custom Field Multi",
          "key": "customFieldMulti",
          "type": "input"
        },
        {
          "title": "New Custom Field Multi",
          "key": "customFieldAdditionalMulti",
          "type": "input"
        }
      ]
    },
    {
      "title": "Custom multifield Style 'Inline'",
      "key": "customFieldAdditionalMulti",
      "type": "multifield",
      "style": "inline",
      "fields": [
        {
          "title": "Custom Field Multi",
          "key": "customFieldMulti",
          "type": "input"
        },
        {
          "title": "New Custom Field Multi",
          "key": "customFieldAdditionalMulti",
          "type": "input"
        }
      ]
    },
    {
      "title": "Custom Field Additional",
      "key": "customFieldAdditional",
      "type": "input"
    },
    {
      "title": "Custom multifield hint",
      "key": "customFieldMultiHint",
      "type": "multifield",
      "style": "list",
      "fields": [
        {
          "key": "customField",
          "type": "input"
        },
        {
          "title": "Information Field",
          "key": "informationField",
          "type": "hint",
          "showLength": 100
        }
      ]
    }
  ]
}

Add fields and style to .widget.json.

Multifield key use for to determine the order in which fields are displayed in the interface("options.layout").

{
  "name": "MyExampleInfo",
  "title": "Info title",
  "type": "Info",
  "bc": "myExampleBc",
  "fields": [
    {
      "label": "Custom multifield style 'List'",
      "key": "customFieldMultiField",
      "type": "multifield",
      "style": "list",
      "fields": [
        {
          "label": "New Custom Field Multi",
          "key": "customFieldAdditionalMulti",
          "type": "input"
        },
        {
          "label": "Custom Field Multi",
          "key": "customFieldMulti",
          "type": "input"
        }
      ]
    },
    {
      "label": "Custom multifield style 'Inline'",
      "key": "customFieldAdditionalMulti",
      "type": "multifield",
      "style": "inline",
      "fields": [
        {
          "label": "New Custom Field Multi",
          "key": "customFieldAdditionalMulti",
          "type": "input"
        },
        {
          "label": "Custom Field Multi",
          "key": "customFieldMulti",
          "type": "input"
        }
      ]
    },
    {
      "label": "Custom Field Additional",
      "key": "customFieldAdditional",
      "type": "input"
    },
    {
      "label": "Custom multifield hint",
      "key": "customFieldMultifieldHint",
      "type": "multifield",
      "style": "list",
      "fields": [
        {
          "key": "customField",
          "type": "input"
        },
        {
          "key": "informationField",
          "type": "hint",
          "showLength": 100
        }
      ]
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customFieldAdditionalMulti",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldMultiField",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldAdditional",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldMultifieldHint",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

Add fields and style to .widget.json.

Multifield key use for to determine the order in which fields are displayed in the interface("options.layout").

{
  "name": "MyExampleForm",
  "title": "Form title",
  "type": "Form",
  "bc": "myExampleBc",
  "fields": [
    {
      "label": "Custom multifield",
      "key": "customFieldMulti",
      "type": "multifield",
      "style": "list",
      "fields": [
        {
          "label": "New Custom Field Multi",
          "key": "customFieldAdditionalMulti",
          "type": "input"
        },
        {
          "label": "Custom Field Multi",
          "key": "customFieldMulti",
          "type": "input"
        }
      ]
    },
    {
      "label": "Custom multifield style 'Inline'",
      "key": "customFieldAdditionalMulti",
      "type": "multifield",
      "style": "inline",
      "fields": [
        {
          "label": "New Custom Field Multi",
          "key": "customFieldAdditionalMulti",
          "type": "input"
        },
        {
          "label": "Custom Field Multi",
          "key": "customFieldMulti",
          "type": "input"
        }
      ]
    },
    {
      "label": "Custom Field Additional",
      "key": "customFieldAdditional",
      "type": "input"
    },
    {
      "label": "Custom multifield hint",
      "key": "customFieldMultiHint",
      "type": "multifield",
      "style": "list",
      "fields": [
        {
          "key": "customField",
          "type": "input"
        },
        {
          "key": "informationField",
          "type": "hint",
          "showLength": 100
        }
      ]
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customFieldAdditionalMulti",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldMulti",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldAdditional",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldMultiHint",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

Placeholder

not applicable

Color

not applicable

Readonly/Editable

All fields in a logical block are readonly.

Filtering

Live Sample · GitHub

Filtering allows you to search data based on criteria. Search by =

How does it look?

List widgetInfo widgetForm widget

not applicable

not applicable

Filter not working with field type hint. see more hint

How to add?

Example

List widgetInfo widgetForm widget

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

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

    @SearchParameter(name = "customFieldAdditional")
    private String customFieldAdditional;
    private String informationField;
    @SearchParameter(name = "customField")
    private String customField;
    @SearchParameter(name = "customFieldAdditionalMulti")
    private String customFieldAdditionalMulti;
    @SearchParameter(name = "customFieldMulti")
    private String customFieldMulti;

    public MyExampleDTO(MyEntity entity) {
        this.id = entity.getId().toString();
        this.customFieldAdditional = entity.getCustomFieldAdditional();
        this.informationField = entity.getInformationField();
        this.customField = entity.getCustomField();
        this.customFieldAdditionalMulti = entity.getCustomFieldAdditionalMulti();
        this.customFieldMulti = entity.getCustomFieldMulti();
    }
}

Step 2 Add fields.enableFilter to corresponding FieldMetaBuilder.

@Service
public class MyExampleMeta extends FieldMetaBuilder<MyExampleDTO> {

    @Override
    public void buildRowDependentMeta(RowDependentFieldsMeta<MyExampleDTO> fields, InnerBcDescription bcDescription,
                                      Long id, Long parentId) {
        fields.setEnabled(MyExampleDTO_.customFieldMulti);
        fields.setEnabled(MyExampleDTO_.customFieldAdditionalMulti);
        fields.setEnabled(MyExampleDTO_.customField);
        fields.setEnabled(MyExampleDTO_.informationField);
        fields.setEnabled(MyExampleDTO_.customFieldAdditional);
    }

    @Override
    public void buildIndependentMeta(FieldsMeta<MyExampleDTO> fields, InnerBcDescription bcDescription, Long parentId) {
        fields.enableFilter(MyExampleDTO_.customFieldMulti);
        fields.enableFilter(MyExampleDTO_.customFieldAdditionalMulti);
        fields.enableFilter(MyExampleDTO_.customField);
        fields.enableFilter(MyExampleDTO_.informationField);
        fields.enableFilter(MyExampleDTO_.customFieldAdditional);
    }

}

Step 3 Add field for block filter in parameter key.

For example, for filtering on field "customFieldAdditionalMulti" - "key" = "customFieldAdditionalMulti"

{
  "title": "Custom multifield",
  "key": "customFieldAdditionalMulti",
  "type": "multifield",
  "style": "list",
  "fields": [
    {
      "title": "Custom Field Multi",
      "key": "customFieldMulti",
      "type": "input"
    },
    {
      "title": "New Custom Field Multi",
      "key": "customFieldAdditionalMulti",
      "type": "input"
    }
  ]
}

not applicable

not applicable

Drilldown

not applicable

Validation

not applicable

Sorting

not applicable

Required

not applicable