Skip to content

List

List widget is list the general information for many records and present it in a way that is easily interpretable for users.

Basics

Live Sample · GitHub

How does it look?

list.png

How to add?

Example

Step1 Create file .widget.json.

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

{
  "name": "MyExampleList",
  "title": "List title",
  "type": "List",
  "bc": "myExampleBc",
  "fields": [
    {
      "title": "Custom Field",
      "key": "customField",
      "type": "input"
    }
  ]
}
Step2 Add widget to corresponding *.view.json* .

{
  "name": "myexamplelist",
  "title": "My example List",
  "url": "/screen/myexample/view/myexamplelist",
  "template": "DashboardView",
  "widgets": [
    {
      "widgetName": "MyExampleListInfoText",
      "position": 20,
      "gridWidth": 12
    },
    {
      "widgetName": "MyExampleList",
      "position": 20,
      "gridWidth": 12,
      "pageLimit": 2
    }
  ],
  "rolesAllowed": [
    "CXBOX_USER"
  ]
}

Main visual parts

Title, actions block

Title

Live Sample · GitHub

Title - (optional)

listwidgetinf.png

There are types of:

  • constant title: shows constant text.
  • constant title empty: if you want to visually connect widgets by them to be placed one under another

How does it look?

consttitle.png

empytitle.png

How to add?

Example

Step1 Add name for title to .widget.json. 

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

Step1 Delete parameter title to .widget.json. 

{
  "name": "MyExampleEmptyTitle",
  "type": "List",
  "bc": "myExampleBc",
  "fields": [
    {
      "title": "Custom Field widget: Empty Title",
      "key": "customField",
      "type": "input"
    }
  ]
}

Actions

Actions show available actions as separate buttons see Actions