Skip to Content

I would like to introduce in this post how simple it is to create a widget for SAP HANA Cloud Portal (NWCP) using UI5 controls.

This post will guide you step by step in the following sections:

  1. What is a widget?
  2. How to create a widget?
  3. How to interact with SAP UI5 libraries?
  4. How to add the SAP UI5 shell to the widget?
  5. How do I see the widget in my site?
  6. How to check SAP UI5 version on runtime?

What’s In a Widget?

The widget API consists of a few simple building blocks: XML, HTML, and JavaScript. To get started, all you need is a basic understanding of HTML.

The XML widget specification consists of 3 major parts:

  • Content Section. The <Content> section is where the real work of your widget happens. It is where you specify the type of widget, your programming logic, and often the HTML elements that determine the appearance of your widget.
  • User Preferences. The <UserPrefs> section defines controls that allow users to specify settings for the widget. For example, a personalized greeting widget might provide a text field for users to specify their names.
  • Widget Preferences. The <ModulePrefs> section in the XML file specifies characteristics of the widget, such as title, author, preferred sizing, and so on.

How to create a widget?

The simplest widget is just a few lines of code. (this widget does not do anything yet… )

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="UI5 Example" />
  <Content type="html">
     <![CDATA[
       ]]>
  </Content>
</Module>

How to interact with SAP UI5 libraries?

In order to use SAP UI5 librariesin our widget, it must include <Require feature=”sap-ui5″/> under <ModulePrefs>

<ModulePrefs title="UI5 Example">
     <Require feature="sap-ui5" />
          <Param name="sap-ui-params"></Param>
     </Require>
   </ModulePrefs>

How to add the SAP UI5 shell to the widget?

Defining Content

The <Content> section represents the “brains” of a widget. The <Content> section defines the type of content, and either holds the content itself or has a link to external content. The <Content> section is where the widget attributes and user preferences are combined with programming logic and formatting information to become a running widget.

First we will add the <body> & <div> tags that will hold the shell code.

<Content type="html">
  <![CDATA[
     <body class="sapUiBody" role="application">
          <div id="shellArea"></div>
     </body>
  ]]>
</Content>

Next we will add the <script> tags that will contain all of the SAP UI5 objects which renders the chart.

<Content type="html">
  <![CDATA[
     <body class="sapUiBody" role="application">
          <div id="shellArea"></div>
     </body>
     <script type="text/javascript">
     </script>
  ]]>
</Content>

Inside the <script> tags we will add the following UI5 shell creation code:

  1. window.onload = function () {

    // Create the ux3 Shell

    // …fill several properties and aggregations in JSON syntax; alternatively they could also be set one by one

    var oShell = new sap.ui.ux3.Shell(“myShell”, {

appIcon: http://www.sap.com/global/images/SAPLogo.gif, // put the SAP logo into the header

appTitle: “My First GoldReflection App”, // give a title

worksetItems: [ // add some items to the top navigation

new sap.ui.ux3.NavigationItem({

            key: “wi_home”,

text: “Home”,

subItems: [ // the “Home” workcenter also gets three sub-items

new sap.ui.ux3.NavigationItem({

                key: “wi_home_overview”,

                text: “Overview”

}),

new sap.ui.ux3.NavigationItem({

                key: “wi_home_inbox”,

                text: “Inbox”

}),

new sap.ui.ux3.NavigationItem({

                key: “wi_home_news”,

                text: “News”

})]

}),

new sap.ui.ux3.NavigationItem({

key: “wi_so”,

text: “Sales Orders”

}),

new sap.ui.ux3.NavigationItem({

key: “wi_analyze”,

text: “Analyze”

}), ],

paneBarItems: [ // add also one item to the right-side PaneBar

new sap.ui.core.Item({

key: “pb_people”,

text: “People”

})],

logout: function () { // create a handler function and attach it to the “logout” event

alert(“User wants to log out…”);

}

    });

    // also set some content for the side pane

oShell.setPaneContent(new sap.ui.commons.Button({

text: “This Button is in the Pane”

}));

    // Page content creation – for each workset the content is defined here

    // For demo purposes there is just one button on each page

    var mContent = {}; // a map to remember page content once it is created

    function getContent(key) {

if (mContent[key]) return mContent[key]; // if content is already created, return it directly

if (key == “wi_home_overview”) {

var btn = new sap.ui.commons.Button({

                text: “This Button is the content of the Overview”

});

btn.setTooltip(btn.getText().toString());

mContent[key] = btn;

} else if (key == “wi_home_inbox”) {

mContent[key] = new sap.ui.commons.Button({

                text: “This Button is the content of the Inbox”

});

} else if (key == “wi_home_news”) {

mContent[key] = new sap.ui.commons.Button({

                text: “This Button is the content of the News”

});

        } else if (key == “wi_so”) {

mContent[key] = new sap.ui.commons.Button({

                text: “This Button is the content of the Sales Orders Workset”

});

} else if (key == “wi_analyze”) {

mContent[key] = new sap.ui.commons.Button({

                text: “This Button is the content of the Analyze Workset”

});

}

return mContent[key];

    }

    // when the user selects a workset, put the respective content into the shell’s main area

oShell.attachWorksetItemSelected(function (oEvent) {

var key = oEvent.getParameter(“key”);

oShell.setContent(getContent(key));

    });

    // set the initial content of the Shell – the Home Overview is selected initially

    oShell.setContent(getContent(“wi_home_overview”));

    // place the Shell into the <div> element defined below

oShell.placeAt(“shellArea”);

}

Here is the complete widget:

<?xml version="1.0" encoding="UTF-8"?>
<Module>
          <ModulePrefs title="SAPUI5">
                    <Require feature="sap-ui5">
                              <Param name="sap-ui-params"/>
                    </Require>
          </ModulePrefs>
          <Content type="html"><![CDATA[
          <body class="sapUiBody" role="application">
                              <div id="shellArea"></div>
          </body>
          <script>
          window.onload = function(){
    // Create the ux3 Shell
    // ...fill several properties and aggregations in JSON syntax; alternatively they could also be set one by one
    var oShell = new sap.ui.ux3.Shell("myShell", {
        appIcon:"http://www.sap.com/global/images/SAPLogo.gif", // put the SAP logo into the header
        appTitle:"My First GoldReflection App",                 // give a title
        worksetItems:[                                          // add some items to the top navigation
            new sap.ui.ux3.NavigationItem({key:"wi_home",text:"Home",subItems:[  // the "Home" workcenter also gets three sub-items
                new sap.ui.ux3.NavigationItem({key:"wi_home_overview",text:"Overview"}),
                new sap.ui.ux3.NavigationItem({key:"wi_home_inbox",text:"Inbox"}),
                new sap.ui.ux3.NavigationItem({key:"wi_home_news",text:"News"})
            ]}),
            new sap.ui.ux3.NavigationItem({key:"wi_so",text:"Sales Orders"}),
            new sap.ui.ux3.NavigationItem({key:"wi_analyze",text:"Analyze"}),
        ],
        paneBarItems:[  // add also one item to the right-side PaneBar
            new sap.ui.core.Item({key:"pb_people",text:"People"})
        ],
        logout:function() { // create a handler function and attach it to the "logout" event
            alert("User wants to log out...");
        }
    });
    // also set some content for the side pane
    oShell.setPaneContent(new sap.ui.commons.Button({text:"This Button is in the Pane"}));
    // Page content creation - for each workset the content is defined here
    // For demo purposes there is just one button on each page
    var mContent = {}; // a map to remember page content once it is created
    function getContent(key) {
        if (mContent[key]) return mContent[key]; // if content is already created, return it directly
        if (key == "wi_home_overview") {
                              var btn = new sap.ui.commons.Button({text:"This Button is the content of the Overview"});
                              btn.setTooltip(btn.getText().toString());
            mContent[key] = btn;
        } else if (key == "wi_home_inbox") {
            mContent[key] = new sap.ui.commons.Button({text:"This Button is the content of the Inbox"});
        } else if (key == "wi_home_news") {
            mContent[key] = new sap.ui.commons.Button({text:"This Button is the content of the News"});
        } else if (key == "wi_so") {
            mContent[key] = new sap.ui.commons.Button({text:"This Button is the content of the Sales Orders Workset"});
        } else if (key == "wi_analyze") {
            mContent[key] = new sap.ui.commons.Button({text:"This Button is the content of the Analyze Workset"});
        }
        return mContent[key];      
    }
    // when the user selects a workset, put the respective content into the shell's main area
    oShell.attachWorksetItemSelected(function(oEvent) {
        var key = oEvent.getParameter("key");   
        oShell.setContent(getContent(key));
    });
    // set the initial content of the Shell - the Home Overview is selected initially
    oShell.setContent(getContent("wi_home_overview"));
    // place the Shell into the <div> element defined below
    oShell.placeAt("shellArea");
          }
          </script>
    ]]></Content>
</Module>

How do I see the widget in my site?

Now we just need to:

  • Save the widget as an xml file.
  • Host it on the server.
  • And add the widget to the site. (after defining it in Authoring Content tab on the NWCP)

contentWidget.PNG

The final widget should look like this:

Shell.PNG

How to check SAP UI5 version on runtime?

In the browser’s console (Tools –> Developer tools)

Just write: sap.ui.version

Zohar Yehezkely & Nati Gavriel

To report this post you need to login first.

1 Comment

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

  1. Steffen Schmidt

    Hi Zohar,

    I was trying this example on the Cloud Portal and it worked. But then I wanted to extend it with some more UI5 content and added a MVC View. There I got the problem that when I deployed it to the cloud portal, the js-file containing my view implementation could not be loaded by the UI5 lib. I guess this is caused by way the cloud-portal handels the loading of resources like js and css-files.

    Have you noticed something similar?

    Kind regards,

    Steffen

    (0) 

Leave a Reply