CPS Examples

Usage

When templates are loaded onto the terminal, screens can be accessed using PSP or CPS through UI request calls. The screen type should be set to 'template,' and the template layout name must be specified as a property.

The below examples all use this template code.

templateName: "my-first-screen"
elements {
  name: "my-label"
  value: "text"
  colorRef: "title"
  label {
    font: "OpenSans"
    fontSize: 24
    fontStyle: BOLD
    textAlignment: CENTER
  }
}

Change Element Value

To change the value, call the element with comp. prefix and value .value suffix in the properties with the new value as a String.

{
  "id": "Screen-1",
  "type": "template",
  "properties": {
    "template": "my-first-screen",
    "comp.my-label.value":"Hello this is a new message",
  }
}

Change Element Position

To change the text call the element with comp. prefix and value .x and/or .y` suffix in the properties with the new coordinates.

{
  "id": "Screen-1",
  "type": "template",
  "properties": {
    "template": "my-first-screen",
    "comp.my-label.x":"100",
     "comp.my-label.y":"300",
  }
}

Change Element Opacity

To change the opacity, call the element with comp. prefix and value .opacity suffix in the properties with the new opacity.

{
  "id": "Screen-1",
  "type": "template",
  "properties": {
    "template": "my-first-screen",
    "comp.my-label.opacity":"50",
  }
}

Hide Element

To hide an element, call the element with comp. prefix and value .hide suffix in the properties with the value set to true.

{
  "id": "Screen-1",
  "type": "template",
  "properties": {
    "template": "my-first-screen",
    "comp.my-label.hide":"true",
  }
}

Disable Element

To set an element to disable state, call the element with comp. prefix and value .disable suffix in the properties with the value set to true.

{
  "id": "Screen-1",
  "type": "template",
  "properties": {
    "template": "my-first-screen",
    "comp.my-label.disable":"true",
  }
}

Change Element Color

To change an element's color, use the comp. prefix followed by the element name and the .color suffix. Set the property value to the desired color. On label type elements this will change the text color. On all the other elements it will apply the color on the background.

{
  "id": "Screen-1",
  "type": "template",
  "properties": {
    "template": "my-first-screen",
    "comp.my-label.color":"0x00ff00",
  }
}