Skip to Content

Embedding the library

To embed VB in a html page the sap.ui.vbm
library needs to be loaded. This is usually done in the following way:


<script
src=”/sapui5-dist/resources/sap-ui-core.js”

              id=”Sample1″

                data-sap-ui-libs=”sap.ui.commons,sap.ui.vbm”

                data-sap-ui-theme=”sap_bluecrystal >

</script>

Create a Placeholder

The HTML document should somewhere have a placeholder, where the VB control should be placed. This is usually a <div> element. The <div> element must have a unique id.

<div id=”content”></div>

Create the control.

Some script is needed to create the control and place it at a specific location.

var oVBI = new sap.ui.vbm.VBI(‘someId’,

   {

   width : 600,

    height: 620,

    plugin: false,

    config: null

  });

  oVBI.placeAt(“content”);

The controls constructor has 2 parameters, the controls ID and a properties object. The properties object must contain the width and height of the control. Optionally a config and a plugin property can be set. The config property is a json object that describes the application that should be loaded into the control. The plugin flag tells the control to use the native implementation instead of the html implementation.

The following json code is a sample for the smallest object that is required as a config attribute to show just the map.

{

     “SAPVB”: {

      “version”: “2.0”,

       “xmlns:VB”: “VB”,

      “Windows”: {

         “Set”: {

              “Window”: { “id”: “W1”, “type”: “geo”, “refScene”: “S1” }

           }

      },

      “Scenes”: {

           “Set”: {

          “SceneGeo”: { “id”: “S1”, “refMapLayerStack”: “MAPQUESTLAYER”,
                        “initialStartPosition”: “6;30;0”, “initialZoom”:
                        “3” }

         }

      },

        “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”

                     }

                ]

             }

         }

      },

        “MapLayerStacks”: {

           “Set”: {

              “MapLayerStack”: {

                 “name”: “MAPQUESTLAYER”,

                 “MapLayer”: {
                    “name”: “L1”,

                    “refMapProvider”: “MAPQUEST”,

                    “opacity”: “1.0”,
                    “colBkgnd”: “RGB(255,255,255)”

               }

            }

           }

        }

     }

  }

Instead of applying the configuration immediately, the configuration can be loaded after the control is placed. In this case the code would look like this:

var oVBI = new sap.ui.vbm.VBI(‘someId’,

   {

     width : 600,

     height: 500,

     plugin: false

   });

oVBI.placeAt(‘content’);

// load the json config from some resource

   var dat = $.getJSON(“media/config.json”, function( dat )

     {

     oVBI.load( dat );

   });

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Rajiv Lund

    Hello Ralf,

    great post. One major question. Ist Visual Business Library part of OpenUI5 or is it only available in SAPUI5?

    I have download OpenUI5 SDK and cannot find the library sap.ui.vmb.

    Thanks for help!!!

    BR

    Rajiv

    (0) 
      1. Rajiv Lund

        Hi Uwe,

        thanks a lot for fast reply, even if the answer is disappointing. I hope one day it will become a part of it 🙂

        BR

        Rajiv

        PS: I always heard that SAPUI5 and OpenUI5 are almost same, except to some exotic libraries. No I understand that Visual Business is exotic 😛

        (0) 
  2. Disha N Rao

    Hello Ralf,

    Great post. Thanks so much for the information. I am just beginning to develop features using Visual Business and I have a few ambiguties.
    Apologies if my question might sound very basic to you, but, I needed some clarity.

    Under the MapQuest mapProvider, the URL for the source is “http://otile1.mqcdn.com/tiles/1.0.0/map/{LOD}/{X}/{Y}.png“
    What exactly do X , Y and LOD denote here? Is it the zoom level, the latitude and the longitude?

    Thanks in advance.

    Regards,
    Disha

    (0) 

Leave a Reply