MultivalueHover
MultivalueHover is a component that allows to view multiple values on mouse hover. All fields are readonly.
Basics
How does it look?
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);
}
}
Step 3 Add to .widget.json.
displayedKey - text field usually containing contcatenated values from linked rows
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
Constant color
How does it look?
How to add?
Example
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";
}
}
Step 2 Add "bgColorKey" : custom field for color to .widget.json.
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
}
]
}
]
}
}
}
Add "bgColor" : HEX color to .widget.json.
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
Filtering allows you to search data based on criteria. Search uses in operator which compares ids in this case.
How does it look?
not applicable
not applicable
How to add?
Example
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);
fields.enableSort(MyExampleDTO_.customField);
}
not applicable
not applicable
Drilldown
not applicable
Validation
not applicable
Sorting
not applicable
Required
`not applicable