Skip to main content

UI Builder

With the UI Builder it is possible to build a UI for Widgets or Configs. To build your custom UI you can define tabs and for each tab a list of input elements.

In the playground

Structure​

The UI can be structured with tabs and a list of input elements.

In this example we define a ui config with the two tabs General and Template. The tab General contains an input foo and Template an input bar.

  • name: the name of the tab
  • inputs: a list of input elements
  • label: the label of the input element
  • path: json path to the json config
  • type: the input type
    • input
    • textarea
    • number - a double or integer number
    • json - ace json editor
    • boolean - a toggle
    • select - a select box with options
    • qsc-select - see qsc-select section for details
    • edit-table - see edit-table section for details
{
  "uiConfig": {
    "tabs": [
      {
        "name": "General",
        "inputs": [
          {
            "label": "foo",
            "path": "foo",
            "type": "input"
          }
        ]
      },
      {
        "name": "Template",
        "inputs": [
          {
            "label": "bar",
            "path": "bar",
            "type": "input"
          }
        ]
      }
    ]
  }

}

Select​

{
    "label": "Brand",
    "path": "brand",
    "type": "select",
    "options": [
        "VW",
        "BMW",
        "Mercedes"
    ]
}

QSC Select​

{
    "label": "qsc-select single",
    "path": "qscSelectExampleSingle",
    "type": "qsc-select",
    "componentProperties": {
        "type": "single",
        "options": [
            "opt1",
            "opt2",
            "opt3"
        ],
        "shouldSelectObject": false,
        "search": true
    }
}

QSC Select Tag​

{
    "label": "qsc-select tag",
    "path": "qscSelectExampleTag",
    "type": "qsc-select",
    "componentProperties": {
        "type": "tag",
        "options": [
            "opt1",
            "opt2",
            "opt3"
        ],
        "shouldSelectObject": false,
        "search": true
    }
}

QSC Select Taggable​

{
    "label": "qsc-select Objects Options (tggable)",
    "path": "qscSelectExampleObjectsOptionsTag",
    "type": "qsc-select",
    "componentProperties": {
        "type": "tag",
        "options": [
            {
                "label": "opt1",
                "code": "opt1Val"
            },
            {
                "label": "opt2",
                "code": "opt2Val"
            },
            {
                "label": "opt3",
                "code": "opt3tVal"
            },
            {
                "label": "opt4",
                "code": "opt4Val"
            }
        ],
        "propertyForValue": "code",
        "propertyForLabel": "label",
        "shouldSelectObject": true,
        "search": true
    }
}

QSC Select with suggest​

{
    "label": "suggest example",
    "path": "qscSelectExampleObjectsOptionsSuggest",
    "type": "qsc-select",
    "componentProperties": {
        "type": "tag",
        "suggestUrl": "https://qsc-dev.quasiris.de/api/v1/search/suggest/ab/products?q=",
        "options": [],
        "shouldSelectObject": false,
        "search": true
    }
}

QSC Multi Select​

{
    "label": "qsc-select Objects Options multi select",
    "path": "qscSelectExampleObjectsOptionsMulti",
    "type": "qsc-select",
    "componentProperties": {
        "type": "multi",
        "options": [
            {
                "label": "opt1",
                "code": "opt1Val"
            },
            {
                "label": "opt2",
                "code": "opt2Val"
            },
            {
                "label": "opt3",
                "code": "opt3tVal"
            },
            {
                "label": "opt4",
                "code": "opt4Val"
            }
        ],
        "propertyForValue": "code",
        "propertyForLabel": "label",
        "shouldSelectObject": true,
        "search": true
    }
}

Json Editor​

{
    "label": "Json",
    "path": "jsonExample",
    "type": "json"
}

Markdown Editor​

{
    "label": "Documentation",
    "path": "markdownDocumentation",
    "type": "markdown-editor"
}

ACE Editor​

  • yaml
  • json
  • html
  • javascript
{
    "label": "My Yaml Config",
    "type": "ace-editor",
    "path": "yamlConfig",
    "componentProperties": {
        "lang": "yaml"
    }
}

Edit Table​

{
    "type": "edit-table",
    "label": "EDIT TABLE EXAMPLE",
    "path": "editTableExample",
    "componentProperties": {
        "editRowAsJson" : true,
        "search": true,
        "searchableColumns": [
            "name"
        ],
        "columns": [
            {
                "name": "name",
                "label": "Name",
                "inputType": "input"
            },
            {
                "name": "dataType",
                "label": "Data Type",
                "inputType": "select",
                "formOptions": [
                    "string",
                    "number"
                ]
            },
            {
                "name": "sort",
                "label": "Sort",
                "inputType": "boolean",
                "alwaysEditTable": true,
                "defaultValue": false
            },
            {
                "name": "description",
                "label": "Description",
                "inputType": "input"
            },
            {
                "name": "myNuber",
                "label": "MyNumber",
                "inputType": "input-number"
            },
            {
                "name": "config",
                "label": "Configuration",
                "alwaysEditTable": true,
                "inputType": "modal",
                "lang": "json"
            },
            {
                "name": "yamlConfig",
                "label": "Yaml",
                "alwaysEditTable": true,
                "inputType": "modal",
                "lang": "yaml"
            },
            {
                "name": "tags",
                "label": "Tags",
                "inputType": "qsc-select",
                "alwaysEditTable": true,
                "qscSelect": {
                    "type": "tag",
                    "sortable": true,
                    "shouldSelectObject": false
                }
            }
        ]
    }
}

  • search: default false

    • show a searchbox that searches all searchableColumns
    • searchableColumns - the columns that are searched

  • editRowAsJson: default false

    • show a button for each row, that allow to edit the row in a json modal

  • Columns

    • name: the name of the property in the data
    • label: the label in the column header
    • alwaysEditTable: the modal is also clickable in non edit mode
    • inputType:
      • input: text input
      • input-number: number input
      • select: a dropdown to select defined values, the values are defined in formOptions
      • boolean: boolean
      • qsc-select
      • modal: open a modal with an editor
    • lang: the language for the modal - yaml | json
    • defaultValue: the default value

Data:

{
    "editTableExample": [
        {
            "name": "foo",
            "dataType": "string",
            "sort": false,
            "description": "this is the description for foo",
            "config": "{\n    \"some\": \"config\"\n}",
            "tags": [
                "tag2",
                "tag1"
            ]
        },
        {
            "name": "bar",
            "dataType": "string",
            "sort": true,
            "description": "description for bar",
            "config": "{\n    \"someOther\": \"config\"\n}",
            "tags": []
        },
        {
            "name": "alice",
            "sort": true,
            "dataType": "string",
            "tags": []
        }
    ]
}