Time

Time is a component for time editing. It can be used for editing and displaying time.

Basics

The time type supports various formats for representing and manipulating time values. These formats include:

24-hour clock format (hh:mm,hh: mm:ss): For example, 14:30, 14:30:00.
12-hour clock format with AM/PM (hh:mm AM/PM,hh: mm:ss AM/PM): For example, 02:30 PM,02:30:45 PM.
The time type also supports representing hours, minutes, and seconds separately. For example:

Hours(h): 13 (13 Hours or 1PM).

Minutes(mm): 55 (55 minutes).

Seconds(ss): 30 (30 seconds).

Minutes and seconds(mm:ss) : 55:30 (55 minutes and 30 seconds).

These formats ensure that the time type can be utilized effectively in various contexts and applications, from simple time displays to complex time computations and data interchange.

How does it look?

List widgetInfo widgetForm widget

How to add?

Example

Step1 Add field LocalDateTime to corresponding BaseEntity.

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

    @Column
    private LocalDateTime customField;
    @Column
    private LocalDateTime customFieldhmm;
    @Column
    private LocalDateTime customFieldh;
    @Column
    private LocalDateTime customFieldhmmA;
    @Column
    private LocalDateTime customFieldhmmssA;
    @Column
    private LocalDateTime customFieldmm;
    @Column
    private LocalDateTime customFieldmmss;
    @Column
    private LocalDateTime customFieldss;
}

Step2 Add field LocalDateTime to corresponding DataResponseDTO.

List widgetInfo widgetForm widget

Step3 Add to .widget.json.

To set the format, add "format". For example:

"format": "h:mm"

By default, there will be a standard format applied: "h: mm:ss"

href="#__codelineno-2-1">{ "name": "MyExampleList", "title": "List title", "type": "List", "bc": "myExampleBc", "fields": [ { "title": "Custom Field h:mm:ss", "key": "customField", "type": "time", "format": "h:mm:ss" }, { "title": "Custom Field h", "key": "customFieldh", "type": "time", "format": "h" }, { "title": "Custom Field h:mm", "key": "customFieldhmm", "type": "time", "format": "h:mm" }, { "title": "Custom Field h:mm A", "key": "customFieldhmmA", "type": "time", "format": "h:mm A" }, { "title": "Custom Field h:mm:ss A", "key": "customFieldhmmssA", "type": "time", "format": "h:mm:ss A" }, { "title": "Custom Field mm", "key": "customFieldmm", "type": "time", "format": "mm" }, { "title": "Custom Field mm:ss", "key": "customFieldmmss", "type": "time", "format": "mm:ss" }, { "title": "Custom Field ss", "key": "customFieldss", "type": "time", "format": "ss" } ] }

Step3 Add to .widget.json.

{
  "name": "MyExampleInfo",
  "title": "Info title",
  "type": "Info",
  "bc": "myExampleBc",
  "fields": [
    {
      "label": "Custom Field h:mm:ss",
      "key": "customField",
      "type": "time",
      "format": "h:mm:ss"
    },
    {
      "label": "Custom Field h:mm",
      "key": "customFieldhmm",
      "type": "time",
      "format": "h:mm"
    },
    {
      "label": "Custom Field h",
      "key": "customFieldh",
      "type": "time",
      "format": "h"
    },
    {
      "label": "Custom Field h:mm A",
      "key": "customFieldhmmA",
      "type": "time",
      "format": "h:mm A"
    },
    {
      "label": "Custom Field h:mm:ss A",
      "key": "customFieldhmmssA",
      "type": "time",
      "format": "h:mm:ss A"
    },
    {
      "label": "Custom Field mm",
      "key": "customFieldmm",
      "type": "time",
      "format": "mm"
    },
    {
      "label": "Custom Field mm:ss",
      "key": "customFieldmmss",
      "type": "time",
      "format": "mm:ss"
    },
    {
      "label": "Custom Field ss",
      "key": "customFieldss",
      "type": "time",
      "format": "ss"
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldh",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldhmm",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldhmmA",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldhmmssA",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldmm",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldmmss",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldss",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

Step3 Add to .widget.json.

{
  "name": "MyExampleForm",
  "title": "Form title",
  "type": "Form",
  "bc": "myExampleBc",
  "fields": [
    {
      "label": "Custom Field h:mm:ss",
      "key": "customField",
      "type": "time",
      "format": "h:mm:ss"
    },
    {
      "label": "Custom Field h:mm",
      "key": "customFieldhmm",
      "type": "time",
      "format": "h:mm"
    },
    {
      "label": "Custom Field h",
      "key": "customFieldh",
      "type": "time",
      "format": "h"
    },
    {
      "label": "Custom Field h:mm A",
      "key": "customFieldhmmA",
      "type": "time",
      "format": "h:mm A"
    },
    {
      "label": "Custom Field h:mm:ss A",
      "key": "customFieldhmmssA",
      "type": "time",
      "format": "h:mm:ss A"
    },
    {
      "label": "Custom Field mm",
      "key": "customFieldmm",
      "type": "time",
      "format": "mm"
    },
    {
      "label": "Custom Field mm:ss",
      "key": "customFieldmmss",
      "type": "time",
      "format": "mm:ss"
    },
    {
      "label": "Custom Field ss",
      "key": "customFieldss",
      "type": "time",
      "format": "ss"
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldh",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldhmm",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldhmmA",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldhmmssA",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldmm",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldmmss",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customFieldss",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

Live Sample · GitHub

Placeholder

Live Sample · GitHub

Placeholder allows you to provide a concise hint, guiding users on the expected value. This hint is displayed before any user input. It can be calculated based on business logic of application.

How does it look?

List widgetInfo widgetForm widget

not applicable

How to add?

Example

Add fields.setPlaceholder to corresponding FieldMetaBuilder.

    @Override
    public void buildRowDependentMeta(RowDependentFieldsMeta<MyExampleDTO> fields, InnerBcDescription bcDescription,
                                      Long id, Long parentId) {
        fields.setEnabled(MyExampleDTO_.customField);
        fields.setPlaceholder(MyExampleDTO_.customField, "11:25:58");
    }

List widgetInfo widgetForm widget

Works for List.

not applicable

Works for Form.

Live Sample · GitHub

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

not applicable

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 = "customField", provider = DateValueProvider.class)
    private LocalDateTime customField;

    private String customFieldColor;
    public MyExampleDTO(MyEntity entity) {
        this.id = entity.getId().toString();
        this.customField = entity.getCustomField();
        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": "time",
      "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": "time",
      "bgColorKey": "customFieldColor"
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

not applicable

Live Sample · GitHub

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": "time",
      "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": "time",
      "bgColor": "#edaa"
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

not applicable

Live Sample · GitHub

Drilldown

not applicable

Time

Basics

How does it look?

How to add?

Placeholder

How does it look?

How to add?

Color

How does it look?

How to add?

Drilldown

Validation