Skip to main content

Configuring the Widget

Data Source​

To properly display information in the widget, you need to connect a data source.
The widget supports two types of data structures:

  • An object containing nested objects: This format allows for a structured dataset where each item is stored as a key-value pair inside an object.

    {
      "test": {
        "id": "test",
        "name": "John Doe"
      }
    }

  • An array of objects: This format is commonly used when handling lists of items.

    [
      {
        "id": "test",
        "name": "John Doe"
      }
    ]

To use the data in the widget, link the selected data source to the Data property via the widget's data source picker.

Font Settings​

This section allows you to define global text styles that will be applied to all fields by default.
These settings include:

  • Font Family: Choose a typeface for the displayed text.
  • Font Size: Set the base font size, which will be used as a reference for other text adjustments.
  • Font Color: Define a default text color that will be applied to all fields unless overridden.

These settings provide a consistent typography style across the widget.

Input Field Settings​

Here, you specify which object properties should be displayed in different fields of the widget.
The available fields are First, Second, Third, and Fourth.

  • Each property key should be entered on a separate line.
  • If multiple properties should be combined into a single field, list them on different lines within the same field input.

For example, if you have an object with properties firstName and lastName, and you want them displayed together in the First field, enter:

firstName
lastName

This configuration ensures that multiple values can be combined inside a single field.

Unique Field Settings​

Each of the four fields (First, Second, Third, Fourth) has individual styling options that override the global font settings.
These include:

  • Font Size Multiplier: Adjusts the font size relative to the global font size.
  • Font Style: Choose from normal, italic, bold, or other styles.
  • Letter Spacing: Customize spacing between characters.
  • Text Shadow: Apply a shadow effect to the text.
  • Vertical & Horizontal Alignment: Position text within its allocated space.

This allows for more refined styling adjustments on a per-field basis.

Sorting and Filtering Settings​

Sorting and filtering help organize and refine the displayed data:

  • Sorting: Select a field to use as a sorting key and define the sort order (ascending or descending). Sorting can be dynamically changed at runtime.
  • Filtering: Choose which fields should be included or excluded in filtering (this cannot be changed during runtime).
  • Exclude Entries Without Images: Automatically hide any entry that lacks an image field.
  • Remove Specific Words or Characters: Define a list of words, letters, or text patterns to be stripped from all entries before display.

This section allows you to control data presentation and enhance readability by filtering out irrelevant details.

Table Settings​

Configure the overall structure and appearance of the table displaying the data:

  • Row & Column Count: Define how many rows and columns the table should contain.
  • Character Limits Per Field: Set a maximum character length for each field. If a field exceeds this limit, the text will be split into multiple lines.
  • Table Layout: Choose from different predefined layouts for how fields are displayed.
  • Cell Height & Spacing: Adjust the height of each cell and the spacing between horizontal and vertical entries.

These settings help ensure that the table is well-organized and visually appealing.

Image Settings​

If any field contains image URLs, you can configure how they are displayed:

  • Assign Image Fields: Select which fields contain image URLs and should be treated as images.
  • Multiple Image Fields: If your data contains multiple image fields, you can assign more than one.
  • Set Image Dimensions: Define the width and height of images in pixels.
  • Image Fitting & Rounding: Adjust how images are scaled to fit within their container and whether they have rounded corners.

These settings allow for flexible image display within the widget.

This section allows you to control pagination and navigation within the widget using three toggle options:

  • Enable Navigation: When enabled, entries will be split into multiple pages. When disabled, all entries will be displayed on a single page.
  • Enable Navbar Buttons: If enabled, navigation buttons (such as previous/next) will be displayed within the widget.
  • Enable Page Info Buttons: When activated, additional page information (such as current page number) will be displayed.

These settings allow you to manage how users navigate through large datasets in the widget.

Info

If you want a custom solution for the navigation and page info buttons, you can enable Navigation while disabling the other two options. This allows you to connect an external Form widget to the Directory app. The Form widget can communicate with the Directory app through sensor events and its own value options, providing more flexibility in handling navigation.

Developer Settings​

For additional customization and styling:

  • Table Border Width & Cell Border Color: Modify the thickness and color of table borders.
  • Scrollbar Color: Customize the scrollbar to match your design.
Last updated on