Skip to main content

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",
  }
}