34 thoughts on “Getting started with SAPUI5”

1. Hi Luc, really enjoyed this blog, very informative and nicely paced.

   I don’t know the exact figures, my guestimate based on sites I have worked at in Australia, 80% of SAP ERP customers use Sharepoint for their horizontal Portal, given those numbers you can imagine Microsoft SAP Interoperability is a hot topic. Microsoft and SAP recognise this and they have jointly developed “Duet Enterprise for Microsoft Sharepoint and SAP”, this collection of tools and services provides the mechanisms for process and content collaboration between the 2 vendors product suites. For a lot of companies the technical pre-requisites and skills needed for DUET form a barrier too high. What you have shown is a nice simple affordable alternative. Nice one.

   Reply ↓

   • Thanks for your perspective! Indeed, I completely agree that client side integration can often provide a more cost-effective and easier-to-implement alternative!

     Reply ↓

2. Hello All,
   Could you please tell me if we can have charts feature in SAP UI 5?

   Thanks,
   Prachi

   Reply ↓

   • Hi Prachi,

     The current version of SAPUI5 doesn’t contain any charting controls, but it should be easy to integrate exisiting JS chart libraries like highcharts or fusioncharts.

     Kind regards,

     Luc

     Reply ↓

3. Thankyou for the great blog. Interesting info on sharepoint. And I agree with the previous comment – most SAP customers that I have worked for also use Sharepoint as their main portal and just use the SAP Portal for ESS/MSS Access only.

   Reply ↓

4. Hi Luc,
   Great blog and a good starting point to learn a lot of things.
   But when i try the same at my machine i am not successful.
   Sorry i am new to Java. And till now my focus has been only abap. hence the question.
   I have tomcat_eclispe installed and i am trying to copy your code into a j2ee project in eclipse.
   when i run it against the local server i am getting the following error

   XMLHttpRequest cannot load http://xyz:8010/sap/opu/sdata/sap/GURU/zguru_testCollection?$skip=0&$top=100&$inlinecount=allpages. Origin http://localhost:8083 is not allowed by Access-Control-Allow-Origin.
   Refused to get unsafe header “Content-Length”
   sap-ui-core.js:769113:04:33 2012-04-06 The following problem occurred: HTTP request failed0,, –

   could you please spare some time to help me with this ?

   Reply ↓

   • Hi Gururaj,

     Did you get the the first test described in the article working (i.e. using SAPUI5 without trying to access SAPGW) ?

     The error message seems to suggest an issue with Same Origin Policy. You must ensure that the initial HTML file and the SAPGW endpoint are on the exact same domain, port and protocol.

     If not, you can try using Chrome with –disabled-web-security command line option as described in the article.

     I hope this helps

     Reply ↓

5. Pingback: How to integrate UI Development toolkit for HTML5 (SAPUI5) with NWDS 7.3? | Ameya's Blog

6. Hi All,
   I am reading this with interest and certainly learning a lot – thank you. My questions is when would you use this interface for your mobile application vs some other platform like Sybase Unwired Platform.

   Mike

   Reply ↓

   • Hi Mike,

     SAPUI5 is (currently) not suitable for mobile. To create mobile apps on top of SAP Gateway, you can use any of the leading HTML5 mobile frameworks (Sencha Touch, jQuery Mobile, etc,) or go native.

     For example, this post describes how to build a mobile app with Sencha Touch and SAP GW. https://allthatjs.com/2012/02/19/building-a-sap-mobile-app-with-sencha-touch-2/

     EDIT: SAPUI5 now (Oct 2012) contains widgets for mobile device. See comment from Ruben below!

     Reply ↓

     • Thank you very much Istak – much appreciated

     • Hi Mike,

       the current version of SAPUI5 contains a “sap.m” package that contains special mobile controls (for mobile devices that are not tablets). The other packages are compatible with tablets as well – not only with desktop browsers.

       Regards,
       Ruben

7. FIrst of all thanks for the wonderful blog. Gave a lot of insight into the SAPUI5 world.

   I have made a similar scenario as the example provided by you, but whenever I try to addColumn with a TextView template to a DataTable, the error “Error: ‘type’ is null or not an object”.

   Here is the code for the addColumn:
   oTable.addColumn(new sap.ui.table.Column({
   label: new sap.ui.commons.Label({ text: “First Name”}),
   template: new sap.ui.commons.TextView().bindProperty(“value”, “fName”),
   width: “33%” })
   );

   Also could you plase tell me if specifying the binding property of the OData (in this case fName) should be specified in curly brackets or just using quotes?

   Any help would be greatly appreciated. 🙂

   Reply ↓

   • Assuming fName is the name of the attribute in your model, try:

     template: new sap.ui.commons.TextView({text:”{fName}”})

     Reply ↓

     • Wowww that really fixed with the error. Now I dont get the type error anymore. Thank you so much.

       Now the table is rendered on the page but without any data. And yes fName is the name of an attribute in the model. but Somehow the binding is not being done.

       Here is the complete code.
       var oTable = new sap.ui.table.DataTable({
       title: “tblStudent”,
       width: “100%”,
       visibleRowCount: 5,
       selectionMode: sap.ui.table.SelectionMode.Single
       });

       var oModel = new sap.ui.model.odata.ODataModel(
       “[ServiceURL]”,
       false, [USERNAME]”, “[PASSWORD]”);

       oTable.addColumn(new sap.ui.table.Column({
       label: new sap.ui.commons.Label({ text: “First Name”}),
       template: new sap.ui.commons.TextView({text:”{fName}”}),
       width: “33%” })
       );

       oTable.addColumn(new sap.ui.table.Column({
       label: new sap.ui.commons.Label({ text: “Last Name”}),
       template: new sap.ui.commons.TextView({text:”{lName}”}),
       width: “33%” })
       );

       oTable.setModel(oModel);
       oTable.bindRows(“StudentCollection”);
       oTable.placeAt(“content”);

     • Hi, I suggest to have a look under the hood with Fiddler if the request is sent to the server and if you receive an XML response.

       Could be several issues: cross-domain request, authentication failure, ….

8. Hi Ishtak
   Thanks for a great blog..it really helped in getting started with Ui5…was able to create the first app succesfully, however getting some issues with the Sales Order Example.

   At this moment, I am just trying to display all the sales order from the SAP Demo Gateway server
   The Odata service I am using – http://GW.ESWORKPLACE.SAP.COM:80/sap/opu/odata/sap/SALESORDERS/SOHeaders

   I am using the same JS code you have given above, however while running the application in IE8, it gives an error saying — START —
   Webpage error details
   Message: Object doesn’t support this property or method
   Line: 43
   Char: 1
   Code: 0
   URI: http://localhost:8080/sample_apps/scripts/fetchsalesorder.js
   –END —
   At line 43 of the JS file, here is the code I have written
   salesOrderColumns.forEach(function (column) {

   do you know what could be wrong here?

   Appreciate if you could guide.

   Best regards
   Sandip

   Reply ↓

   • Hi Sandip,

     IE doesn’t know about forEach. Try a regular for loop instead. I expect you will run into SOP issue, because IE will not allow you to do a xhr request to another domain. That’s why I use chrome with web security disabled.

     BR,
     Luc

     Reply ↓

     • Hi Luc
       Thanks a lot for your prompt reply. How do I use a for loop, what would be the syntax…could you pls help with the code snippet.

       I tried it on CHrome as well by disabling the security, but still it does not show any data..only the image is displayed..I tried debugging it using chrome developer tools, it shows some syntax error

       Regards
       Sandip

9. Hi, when I use visual studio 2012, my table doesn’t get filled using a gateway service; When I use the same code in SAP GUI or Eclipse, the table gets filled. I tried also with google chrome (security disabled). Do you have any idea what could be wrong?

   Here is my code:

   SAP UI5 BEHRINGER PRODUCT WEBSHOP

   var oModel = new sap.ui.model.odata.ODataModel(“http://scvwis0046.dcsc.be:8010/sap/opu/odata/sap/Z_RFM_BEHRINGER_CM_WR”, false, “wuytsr”, “password”);
   sap.ui.getCore().setModel(oModel);

   var ploegenTabel = new sap.ui.table.DataTable({
   title: “Products”,
   width: “75%”
   });
   ploegenTabel.addColumn(new sap.ui.table.Column({
   label: new sap.ui.commons.Label({ text: “Model” }),
   template: new sap.ui.commons.TextField().bindProperty(“value”, “model”),
   sortProperty: “model”
   }));
   ploegenTabel.addColumn(new sap.ui.table.Column({
   label: new sap.ui.commons.Label({ text: “Description” }),
   template: new sap.ui.commons.TextField().bindProperty(“value”, “description”),
   sortProperty: “description”
   }));
   ploegenTabel.addColumn(new sap.ui.table.Column({
   label: new sap.ui.commons.Label({ text: “price” }),
   template: new sap.ui.commons.TextField().bindProperty(“value”, “price”),
   sortProperty: “price”
   }));
   ploegenTabel.bindRows(“z_rfm_behringer_wrCollection”);
   ploegenTabel.placeAt(“appBody”);

   Test app Wuyts Robbe

   Reply ↓

   • Hi Robbe,

     I don’t understand what you mean by ‘when I use visual studio 2012, my table doesn’t get filled”? This is browser side code. You should use chrome with –disable-web-security flag or deploy the initial HTML on the same address and port as the gateway. If Chrome doesn’t work like expected, I suggest to use Chrome developer tools to further diagnose the error (e.g. authentication, cross site, …).

     Reply ↓

10. Hello! Could you help me please. I’m trying to do your example, but I have not retrieved any data 😦 I’m running google chrome with –disable-web-security.

    Here is my code:
    
var ODataModel = sap.ui.model.odata.ODataModel,
TextField = sap.ui.commons.TextField,
TextView = sap.ui.commons.TextView,
Label = sap.ui.commons.Label,
DataTable = sap.ui.table.DataTable,
Column = sap.ui.table.Column,
SelectionMode = sap.ui.table.SelectionMode;

    // SAP Gateway SalesOrderService as an Odata model

    var salesOrderService =
    "https://gw.esworkplace.sap.com/sap/opu/sdata/IWFND/SALESORDER",
    // username and passwd for SDN
    username = "GW@ESW",
    password = "ESW4GW",
    asJson = false,
    salesOrderModel = new ODataModel(salesOrderService, asJson, username, password),
    salesOrderCollection = "SalesOrderCollection";

    var salesOrders = new DataTable({
    title: "Sales Orders",
    width: "50%",
    visibleRowCount: 5,
    selectionMode: SelectionMode.Single,
    editable: false
    });

    var salesOrderColumns = [
    { header: "Sales Order ID", value: "{SalesOrderID}", width: '100px' },
    { header: "Customer Name", value: "{CustomerName}", width: '50%' },
    { header: "Amount", value: "{TotalSum}", width: '50%' }
    ];
    // create the columns
    salesOrderColumns.forEach(function (column) {
    var label = new Label({text: column.header }),
    template = new TextView({ text: column.value }),
    column = new Column({
    label: label,
    template: template,
    width: column.width
    });
    salesOrders.addColumn(column);
    });

    // connect the data table to the Sales Order service
    salesOrders.setModel(salesOrderModel);

    // An OData request will return sales orders
    salesOrders.bindRows(salesOrderCollection);

    //Put table in the DOM
    salesOrders.placeAt("salesorders");

    //Create the line items datatable
    var lineItems = new DataTable({
    title: "Line items",
    width: "50%",
    visibleRowCount: 10,
    selectionMode: SelectionMode.Single,
    editable: false
    });

    lineItemCoumns = [
{ header: "Line item #", value: "{SalesOrderItem}", width: '100px' },
{ header: "Product Name", value: "{ProductName}", width: '50%' },
{ header: "Amount", value: "{NetSum}", width: '50%' }
]
lineItemCoumns.forEach(function (column) {
var label = new Label({ text: column.header }),
template = new TextView({ text: column.value }),
column = new Column({
label: label,
template: template,
width: column.width
});
lineItems.addColumn(column);
});
lineItems.setModel(salesOrderModel);
lineItems.placeAt("lineitems");

    Please, help me!
    With regards, Elias.

    Reply ↓

    • P.S. There are no errors in console.

      And an index.html code:

      SAPUI demo

      Reply ↓

      • Try using Chrome developer tools and see if/what requests are sent to server.

      • Same issue here. $metadata is read but there is no request going out to the gateway to fetch any data. Since I don’t have access to a sharepoint list I commented this part out. The Gateway Part should run, though.

        Oh, and the service has been changed on SAP side, so I’m now connecting against https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV

        My JS code:

        // Let’s define some shortcuts to increase
        // readability of the code
        var ODataModel = sap.ui.model.odata.ODataModel,
        TextField = sap.ui.commons.TextField,
        TextView = sap.ui.commons.TextView,
        Label = sap.ui.commons.Label,
        DataTable = sap.ui.table.DataTable,
        Column = sap.ui.table.Column,
        SelectionMode = sap.ui.table.SelectionMode;
        // Specify the SAP Gateway SalesOrder service as an OData model
        var salesOrderService =
        “https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV”,
        // The SalesOrder service requires authentication
        // get the username/password from the SDN page.
        username = “xxxxx”,
        password = “xxxxxx”,
        // SAP Gateway only supports XML, so don’t use JSON
        asJson = true,
        salesOrderModel = new ODataModel(salesOrderService, asJson, username, password)
        salesOrderCollection = “SalesOrderCollection”;
        // specify the SharePoint site containing the Sales Order Issues as an OData model
        // we will assume there a SharePoint site called ‘demo’
        // which has an issues list called ‘SalesOrderIssues’

        // Create a master table with sales orders
        var salesOrders = new DataTable({
        title: “Sales Orders”,
        width: “100%”,
        visibleRowCount: 5,
        selectionMode: SelectionMode.Single,
        editable: false
        });
        // define the relevant column properties
        var salesOrderColumns = [
        { header: “Sales Order ID”, value: “{SalesOrderID}”, width: ‘100px’ },
        { header: “Customer Name”, value: “{CustomerName}”, width: ‘50%’ },
        { header: “Amount”, value: “{TotalSum}”, width: ‘50%’ }
        ];
        // create the columns
        salesOrderColumns.forEach(function (column) {
        var label = new Label({ text: column.header }),
        template = new TextView({ text: column.value }),
        column = new Column({
        label: label,
        template: template,
        width: column.width
        });
        salesOrders.addColumn(column);
        });
        // connect the data table to the SalesOrder service
        salesOrders.setModel(salesOrderModel);
        // An OData request for the SalesOrderCollection
        // will return the sales orders.
        // Each sales order should result in a table row.
        salesOrders.bindRows(salesOrderCollection);
        // Put table in the DOM.
        // placeAt will automatically defer if
        // DOM is not ready yet (like in this demo).
        salesOrders.placeAt(“salesorders”);
        // At this point the Sales Order master table is done
        // Creating the lineItems and issues table is very similar
        // Creating the line items datatable
        var lineItems = new DataTable({
        title: “Line items”,
        width: “100%”,
        visibleRowCount: 10,
        selectionMode: SelectionMode.Single,
        editable: false
        });
        lineItemColumns = [
        { header: “Line item #”, value: “{SalesOrderItem}”, width: ‘100px’ },
        { header: “Product Name”, value: “{ProductName}”, width: ‘50%’ },
        { header: “Amount”, value: “{NetSum}”, width: ‘50%’ }
        ]
        lineItemColumns.forEach(function (column) {
        var label = new Label({ text: column.header }),
        template = new TextView({ text: column.value }),
        column = new Column({
        label: label,
        template: template,
        width: column.width
        });
        lineItems.addColumn(column);
        })
        lineItems.setModel(salesOrderModel);
        lineItems.placeAt(“lineitems”);

        // The three data tables are ready!
        // Now we need to define what should happen when
        // the user selects a row in the sales order (master) table
        salesOrders.attachRowSelect(function (event) {
        var Filter = sap.ui.model.Filter,
        FilterOperator = sap.ui.model.FilterOperator,
        selectedRowContext = event.getParameter(“rowContext”),
        selectedSalesOrderID = salesOrderModel.getProperty(“SalesOrderID”, selectedRowContext),
        selectedSalesOrderLineItems = selectedRowContext + “/salesorderlineitems”;
        // load the line items for the selected sales order
        lineItems.bindRows(selectedSalesOrderLineItems);
        // create a filter based on sales order ID
        });

      • I tried with the below code but it shows no da.
        Using Chrome developer tools i got the below errors

        event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
        2
        Failed to load resource: the server responded with a status of 401 (Unauthorized) https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/$metadata
        Failed to load resource: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:64086’ is therefore not allowed access. https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/$metadata
        XMLHttpRequest cannot load https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/$metadata. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:64086’ is therefore not allowed access. dataBinding.html:1
        2013-12-30 17:02:15 The following problem occurred: A network error occurred. –

11. Dear Luc,

    Awesome blog it is, very helpful. I am working on an app for SAP itself. I was able to successfully integrate SAP UI5 with Visual Studio 2010 with the help of this blog only.
    I wanted to know if there is possibility to get the intellisense/code completion in visual studio also for SAP UI5 controls?

    It would be very helpful if we can get that.
    Can you please help me out on this?

    Thanks,
    Sukhwinder

    Reply ↓

    • Thanks.

      I am afraid no intellisense/code completion for VS yet. SAP seems to focus on tooling for Eclipse IDE

      Reply ↓

      • I tried to achieve this by including “jquery-sap.js” and “library-all.js”, doing so it reaches till sap.ui.commons but after that not showing intellisense for UI controls i.e. buttons, listbox, labels etc, instead showing some Renderers for each control. May be I am missing some required js file which should be included in the page to get the intellisense for UI controls too.

12. Pingback: Nested Views in SAPUI5 MVC | Experiences with SAP Gateway

13. shall you guide me how to do the same….without any gatewat and get a jason data to retrieve sales order ?

    Reply ↓

14. hai Luc, can you tell me to do the same sales order without using Gateway….and rather by getting the JASON data from a webservice …..That might me helpful for my project 🙂 :O

    Reply ↓

15. Very well detailed post, and I thank you for it. I am working on a PoC where we want to develop UI5 applications, and call them in / from share-point. It should also inherit the sharepoint theming / branding.

    Any idea how to do this? I know I can assign a custom theme to UI5 applications. I have achieved that at generic as well as control level.

    I don’t know anything about sharepoint and whether simply hosting/porting or UI5 application in sharepoint will provide the same branding as sharepoint.

    Regards
    Abhi

    Reply ↓

16. Very nice article you shared this will helps to beginners thank you. Know more about SAPUI5 Training

    Reply ↓