Grids

Grids are used to dispatch values in the same screen.

danger

Dispatchers and Grids disable the default scrolling, for a better experience, use the component and only few other layouts around.

info

Grids are used to fill metadata in current screen.

All fields in the grid with metadata with key equal to the data.name of the grid will be filled with the value of the grid.

Table

• Description: Table.
• Options:
  • display: object
    • font-size: number
    • column-width: number
    • header-height: number
    • row-height: number

Example:

{
  "type": "table",
  "data": {
    "name": "product",
    "value": "getProductsByCatalogId(catalogue)",
    "columns": [...],
    "filters": "products",
    "read_only": false
  },
  "name": "my-table",
  "filters": [...],
  "options": {
  	"display": {...}
  }
}

info

Grids can also be used to dispatch values the exact same way as dispatchers using the screen value.

Grids can dispatch multiple values if you give a List<Map<String, dynamic>> in data.value property instead of List<dynamic>.

eq:

{
  "type": "table",
  "data": {
    "value": "getProductsAndOperatorName()",
    ...
  },
  "name": "my-table",
  "screen": {
  	"condition": "true",
   	"screen_name": "Details"
  }
  ...
}

function getProductsAndOperatorName()
	return {
		{['product'] = 'p1', ['operator'] = 'Michelle'},
		{['product'] = 'p1', ['operator'] = 'Oprah'},
		{['product'] = 'p2', ['operator'] = 'Michelle'},
		{['product'] = 'p2', ['operator'] = 'Jean-Mi'},
		{['product'] = 'p3', ['operator'] = 'Jean-Mi'},
	}
end

Card list

• Description: Card list.

Example:

{
  "type": "card_list",
  "data": {
    "name": "product",
    "value": "getProductsByCatalogId(catalogue)"
  },
  "name": "my-card-list"
}