Skip to content

AdditionalInfo

AdditionalInfo widget is a component only for data viewing. Widget is always located on the left.

Basics

Live Sample · GitHub

How does it look?

additionalinfo.png

How to add?

Example

Step1 Create file .widget.json with type ****.

  • name - static (unique within the project)
  • title - (optional)
  • type = "AdditionalInfo" (required)
  • bc - (required)
  • fields- (required) see field types
  • options

{
  "name": "MyExampleAdditional",
  "title": "Additional information",
  "type": "AdditionalInfo",
  "bc": "myExampleBc",
  "fields": [
    {
      "label": "customField",
      "key": "customField",
      "type": "input"
    },
    {
      "label": "customField 2",
      "key": "customField",
      "type": "input"
    } ,
    {
      "label": "customField 3",
      "key": "customField",
      "type": "input"
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}
Step2 Add widget to corresponding *.view.json* .

{
  "name": "MyExampleList",
  "title": "List title",
  "type": "List",
  "bc": "myExampleBc",
  "fields": [
    {
      "title": "Custom Field",
      "key": "customField",
      "type": "input"
    },
    {
      "title": "Custom Field 2",
      "key": "customField",
      "type": "input"
    },
    {
      "title": "Custom Field 3",
      "key": "customField",
      "type": "input"
    }
  ]
}