Make the widget configurable

Now that we know how to register our local widget pack at MoBro and use it in our dashboard, let's make our Text widget configurable to the user, since it only displays a h1 tag with a static text.

Change the static text

Let's start by giving the user the possibility to change the text which the widget shows. In the mobro-widget-config.json of the Text widget, we add a new config property. The config property is an array of configurable fields, that will then be rendered as a form in the dashboard builder sidebar of a widget.

To create a simple text field which the user can write something into, we can add a string field like this:

src/widgets/text/mobro-widget-config.json

{
  "name": "text",
  "displayName": "Text",
  "filename": "Text.tsx",
  "config": [
    {
      "name": "text",
      "label": "Text",
      "type": "string"
    }
  ]
}

If you have the json schema mapping setup as described at In depth: Widget Config you will get suggestions on what types are possible without having to look at the documentation.

If we reload the dashboard builder now and select one of our Text widgets on the dashboard, we can see a text input in the sidebar on the right side. Writing anything into that input field won't change anything yet, since we will need to implement this in the widget next.

caution

The name property of the field needs to be unique, since that is used to identify and store the data for that field.

Listen to the text changes

Listening and getting the values in the configuration sidebar is pretty easy. For every field type there is a corresponding hook which can retrieve the value based on the name of the field, for more details see Field Hooks.

src/widgets/text/Text.tsx

import React from 'react';
import {useStringField} from '@modbros/dashboard-sdk'

export default function Text() {
  const text = useStringField({field: 'text'});

  return <h1>{text}</h1>
}

And with that the Text widget should reflect any changes to the text field in the sidebar.

Make the text align

Next we will give the user the option to align the text horizontally and vertically via two selects. For that we add two new fields to the config.

src/widgets/text/mobro-widget-config.json

{
  "name": "text",
  "displayName": "Text",
  "filename": "Text.tsx",
  "config": [
    {
      "name": "text",
      "label": "Text",
      "type": "string"
    },
    {
      "name": "align_horizontal",
      "type": "select",
      "label": "Align Horizontal",
      "options": [
        {
          "label": "Left",
          "value": "flex-start"
        },
        {
          "label": "Center",
          "value": "center"
        },
        {
          "label": "Right",
          "value": "flex-end"
        }
      ]
    },
    {
      "name": "align_vertical",
      "type": "select",
      "label": "Align Vertical",
      "options": [
        {
          "label": "Top",
          "value": "flex-start"
        },
        {
          "label": "Center",
          "value": "center"
        },
        {
          "label": "Bottom",
          "value": "flex-end"
        }
      ]
    }
  ]
}

And implement the logic to align the text by leveraging styled-components or inline styles to style the Text widget.

src/widgets/text/Text.tsx

import React from 'react'
import {useStringField} from '@modbros/dashboard-sdk'

export default function Text() {
  const text = useStringField({field: 'text'})
  const alignHorizontal = useSelectField({field: 'align_horizontal', defaultValue: 'flex-start'};
  const alignVertical = useSelectField({field: 'align_vertical', defaultValue: 'flex-start');

  return (
    <div
      style={{
        display: 'flex',
        alignItems: alignVertical,
        justifyContent: alignHorizontal
      }}
    >
      {text}
    </div>
  );
}

Full example

Further we could give the possibility to change the font, font size and the font color. After that we basically have the Text widget from our Shape widget pack on github.