Skip to main content

Displays

Theses components are used to display data on the screen.

Summary​

  • Description: Summary.

Example:

{
  "type": "summary",
  "name": "my-summary"
}

Status displayer​

  • Description: Status display.

Example:

{
  "type": "status_display",
  "name": "my-status-display"
}

Text​

  • Description: Display text returned by a Lua function.
  • Options
    • display: object
      • overflow: enum(ellipsis, clip, fade, visible) (doesn't works with style)
      • style: enum(text-area, text)
      • title: string (only usefull if style is setted)
      • font-size: number (doesn't works with style)

Example:

{
  "type": "text",
  "data": "getProductByUuid(_R.product).name",
  "name": "my-text",
  "options": {
	"display": {
	  "style": "text",
	  "title": "Product name"
	}
  }
}

Image​

  • Description: Image.

Example:

{
  "type": "image",
  "data": "getProductByUuid(_R.product).images",
  "name": "my-image"
}

Svg​

  • Description: SVG.
  • Data: enum(trash, check, close) (in Lua string)
  • Options
    • display: object
      • size: number
      • color: enum(red, green, white, orange, primary, surface) || hex color || int color

Example:

{
  "type": "svg",
  "data": "\"trash\"",
  "name": "my-svg",
  "options": {
    "display": {
      "size": 20,
      "color": "white"
    }
  }
}

Template​

  • Description: A HTML template displayer using jinja.
  • Data:
    • value: LUA expression returning a jinja html string
    • additional_values: LUA expression
  • Options
    • enable-zoom: boolean
    • display: object
      • height: number
info

The values given to lua_values property are available in the template with the same name.

<p>{{ lua_values.key == "value" }}</p>

Example:

{
	"data": {
		"value": "'<html><head /><body><h1>Hello world !</h1></body></html>'",
		"lua_values": "{ ['key'] = 'value' }"
	},
	"name": "my-template-displayer",
	"type": "template"
}