Mapping values to text or images

Introduction

In many places in a User Interface it is nice to map numerical values to text or an image file. For instance error numbers that are mapped to error descriptions or state numbers to state names. This mapping is defined in a JSON file and then loaded into the Widget’s Map property.

Creating a mapping

Inside you GRID package, create a new file and give it a name with the extension .json. You may want to put all you mapping files into a folder inside your GRID package. Then select it, this opens your empty JSON file in the JSON editor.

In the JSON file the ‘keys’ are the numerical value and must be unique, the ‘value’ is the text that is going to render in stead of the numerical value or (in case of the Image Widget) the image file that is going to be loaded in stead.

The following example is for replacing a numerical value by text.

{
  "0": "INIT",
  "1": "OFF",
  "2": "ON",
}

The following example is a mapping file for an Image Widget that maps the numerical value to an image.

{
  "0": "images/image01.png",
  "1": "images/image02.png",
  "2": "images/image03.png",
}

Save the JSON file and open your .grid file. Then select the JSON file you just created in your widgets “map” property.

This mapping works for:

• Output widget
• Dropdown widget
• Image widget
• Screen Error Codes
• Screen State Codes