Skip to Content
SAP Visual Business

UI5 Development: The JSON format

Tags:

Overview

The Visual Business control use a JSON format to exchange data. 

The JSON contains different sections to define an application:


"Data“                        contains the business data, e.g. a list of objects

"DataTypes“              describes the different data attributes, types and defines aliases.

"Scenes“                   defines scene attributes and the symbols inside the scene.

"Actions“                   used for interactions, see here for a description:UI5 Development: Events

"Windows“                defines the type windows (geographical or 3D) and dialog windows

"MapProviders“         defines the map access

"MapLayerStacks“    map layers combine different maps, a map layer stack bundles different layers


"Resources“              additional resources like images can be inserted in the json

The surrounding JSON has the following format:

{

     "SAPVB": {

      "version": "2.0",

       "xmlns:VB": "VB",

...

}

MapProviders


In this example MAPQUEST is configured as a map provider. Check the result of the following URL:

http://otile2.mqcdn.com/tiles/1.0.0/map/2/1/1.png


See here for an explanaition of the different properties and how to config different map providers:

Configuring or changing a map provider in SAP Visual Business

  

"MapProviders": {

      "Set": {

          "MapProvider": {

            "name": "MAPQUEST",

            "tileX": "256",

            "tileY": "256",

            "maxLOD": "19",

            "copyright": "Tiles Courtesy of MapQuest © OpenStreetMap under ODbL v1.0 ",

            "Source": [

              {

                "id": "s1",

                "url": "http://otile1.mqcdn.com/tiles/1.0.0/map/{LOD}/{X}/{Y}.png"

              }

            ]

          }

        }

    }

This map provider has multiple servers, add some more URLs to the block "Source":

                {

              "id": "s2",

                "url": "http://otile2.mqcdn.com/tiles/1.0.0/map/{LOD}/{X}/{Y}.png"

              },

            {

              "id": "s3",

                "url": "http://otile3.mqcdn.com/tiles/1.0.0/map/{LOD}/{X}/{Y}.png"

              },

              {

              "id": "s4",

                "url": "http://otile4.mqcdn.com/tiles/1.0.0/osm/{LOD}/{X}/{Y}.png"

              }

MapLayerStacks


We configure a map layer stack that uses the map provider configured earlier.

"MapLayerStacks": {

           "Set": {

              "MapLayerStack": {

                 "name": "MAPQUESTLAYER",

                 "MapLayer": {
                    "name": "L1",

                    "refMapProvider": "MAPQUEST",

                    "opacity": "1.0",
                    "colBkgnd": "RGB(255,255,255)"

               }

            }

           }

        }

Windows

The root object in Visual Business is a list of windows.

A window contains e.g. a geographical scene, we give it an id and add a reference to a not yet existing scene

Later to add details windows the windows list contains more windows. Here we start with one window.

"Windows": { 
     "Set": {       
          "Window": {
        
               "id": "Window1",
     
               "type": "geo",
        
               "refScene": "Scene1"
     
               }

          }

            }

Scenes


We set a geographical scene, but keep it for a moment empty.

That means that the scene has no symbols (visual objects) and visual objects array is empty at the moment.

    
"Scenes": {

     "Set": {      
          "SceneGeo": {
        
               "id": "Scene1",
        
               "refMapLayerStack": "MAPQUESTLAYER",
        
               "initialStartPosition": "0;0;0",
        
               "initialZoom": "3",
        
               "VO":
        
                    [
        
                    ]
      
               }

          }    
     }

Remark: geo coordinates are specified in "latitude;longitude;height"


Here you can find additional settings: Setting Visual Business Navigation & Visual Frame Parameters

Visual Object (VO)

Visual Object is the technical name for an interactive symbol shown on top of a map.
Adding a visual object, say “Flag” to the scene with some explicit properties is done via this JSON fragment:

"VO":      
     [
        
        
{

          "id": " Flag",

          "type": "{00100000-2012-0004-B001-64592B8DB964}",

          "fxdir": "true",

          "fxsize": "true",

          "scale": "1;1;1"

...

          }

     ]

Remarks:
Adding the above fragment is an intermediate step that stops Visual Business to render correctly. A position is missing and is added below under "Data Binding".

DataTypes

To get back a valid JSON file we need some data that a VO can use.

This fragment will define a table named "Flags" with 2 columns. The column names are "Key" and "GeoPosition". The column with the name
"Key" is specified as the key column. "key" and "pos" are the shortnames that can be used later in the table definition.

  
"DataTypes": {

     "Set": {

    
          "N": [
       
               {

                 "name": "Flags",

                 "key":"Key",

                 "A": [

                    {

                      "name": "Key",

                      "alias": "key",

                      "type": "string"

                    },

                    {

                      "name": "GeoPosition",

                      "alias": "pos",

                      "type": "vector"

                     }

                  ]

               }

               ]

     }

}


Here we have defined a data structure but not the data itself.

Data

Now we fill the data section with some data. Use the below fragment and copy it into the "Data" section of your current file.

"Data": {

     "Set": {

          "N": [   
               {

               "name": "Flags",  
               "E": [

                    {

                    "key": "1",

                    "pos": "0;0;0"

                    },

                             {

                    "key": "2",

                          "pos": "30;0;0"

                     },

                             {

                     "key": "3",

                           "pos": "180;0;0"

                             }

                     ]

               }

               ]

          }

     }

Still the document is not valid for displaying some data as stated above.

Data Binding

Add the properties “datasource”, “pos.bind”  to the Visual Object “Flag” created above.

This fragment will tell the VO to use the table "Flags" as the datasource. The position of the VO “Flag” should be read from the column “GeoPositon” of table “Flags”.

"VO":      
     [
        
        
{

          "id": " Flag",

          "type": "{00100000-2012-0004-B001-64592B8DB964}",

          "fxdir": "true",

          "fxsize": "true",

          "scale": "1;1;1"       
          "datasource": "Flags",
        
          "pos.bind": "Flags.GeoPosition"

          }

     ]

Remark

Till now, the flags are rendered as small triangles. Continue with the next step to get user defined images shown at the locations.

The VO “Flag” located in the VO array needs an additional property to show the user defined image.

Add the property “image” to the VO “Flag” as highlighted below:

Resources

In this section you can add an encoded image. You can play around and use different images.
You can encode your image using a b64converter.


Resources: {

     "Set": {      
          "Resource": [

                          {

              "name":
             "default.png",

              "value": "<enter here your encoded image as a string>"

                          }

            ]

      }

}

The VO “Flag” located in the VO array needs an additional property to show the user defined image. Add the property “image” to the VO “Flag” as highlighted below:

"VO":      
     [
        
        
{

          "id": " Flag",

          "type": "{00100000-2012-0004-B001-64592B8DB964}",

          "fxdir": "true",

          "fxsize": "true",

          "scale": "1;1;1"       
          "datasource": "Flags",
        
          "pos.bind": "Flags.GeoPosition"

          "image": "default.png"

          }

     ]

With this json now 3 spots are displayed on a map.