Getting started with SAPUI5

There are some great HTML5 UI frameworks available in the marketplace: Sencha Touch, KendoUI and Twitter Bootstrap to name just a few. And now SAP has unveiled the Beta version of SAPUI5, officially known as “UI development toolkit for HTML5”.

As a follow up on my post on Building a SAP mobile app with Sencha Touch 2, I was keen on having a hands-on with SAPUI5. These helpful posts helped me to get started.

In this post we’ll set up the Beta version of SAPUI5 for use in Visual Studio and create a demo SAPUI5 app that fetches SAP ERP Sales Orders from SAP Gateway and combines them with issues tracked in a SharePoint list.

Installing the SAPUI5 SDK on Visual Studio 2010

  1. Visit the homepage for SAPUI5 on SDN and download the trial version (SAPUI5 beta)
  2. Unzip the downloaded file HTML5Beta_complete.zip
  3. Open the folder with extracted content. Unzip ‘sapui5-static.zip’. You will need the ‘resources’ folder for development
  4. Rename demokit.war to demokit.zip and unzip. This archive contains the documentation which you can install locally.
  5. In Visual Studio, create a solution and within the solution ‘Add a new web site’
  6. Copy the contents of the demokit into the web site
  7. Copy the resource folder of sapui5-static.zip to the web site
  8. Rename index.html to default.html (the VS dev server opens default.html instead of index.html when browsing a directory).
  9. Your file/folder structure should now look like this:image
  10. Now select the web site and ‘View in Browser’

You now have access to the documentation of SAPUI5:

SNAGHTML379228f

A first test

Now we have the documentation up and running, we create our first test to see if we have all the required files.

To run this test, setup a new project or website in VS. Copy the ‘resources’ folder from sapui5-static into the site and create the following test.html file:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>SAPUI5 test</title>
        <script id="sap-ui-bootstrap"
           src="resources/sap-ui-core.js"
           data-sap-ui-theme="sap_platinum"
           data-sap-ui-libs="sap.ui.commons"&gt;&lt;/script&gt;
        <script>
            $(function () {
                // show an SAPUI5 alert box
                sap.ui.commons.MessageBox.alert("SAPUI5 ready for action.");
            })
        </script>
    </head>
    <body>
    </body>
</html>

The test.html file instructs the browser to load the sap-ui-core.js file which contains jQuery and also a dynamic loader which will load further required js and css files. To show that everything loads correctly, we simply create an alert box (one of the SAPUI5 controls) when the DOM is ready.

View the test.html file in the browser and you see:

SNAGHTML7a1fad9

OK, we’re all set to do something a little more exciting!

Building a demo app

Consider the following business scenario: a company is managing Sales Orders in SAP ERP. To improve order fulfillment, they use a issue tracking workflow system in SharePoint. Their requirement is to see the info from SAP and SharePoint in a single screen. Let’s build that with SAPUI5!

We will connect to the online SAP Gateway demo system to fetch Sales Orders from SAP ERP. Using the demo SAP Gateway system, you can try out SAPUI5 without having to install/configure any server side components.

Our issue tracking list is part of a SharePoint Online site (SharePoint Online is part of Microsoft’s Office365 offering). Each Issue contains a field Sales Order ID which we will use to filter. Here’s how the Issues look inside the SharePoint site:

image

Both SAP Gateway and SharePoint are OData providers, so we will use SAPUI5’s OData model to connect to the backend systems and parse the responses. Our application page will present three tables:

  • Sales Orders: the master table showing the available Sales Orders
  • Line items: a details table showing the line items belonging to the selected Sales Order
  • Issues: a details table showing the issues tracked in SharePoint related to the selected Sales Order.

This structure is already pre-defined in the body of the index.html file:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>SAPUI5 demo</title>
        <script id="sap-ui-bootstrap"
           src="/resources/sap-ui-core.js"
           data-sap-ui-theme="sap_platinum"
           data-sap-ui-libs="sap.ui.commons, sap.ui.table"></script>
        <script src="app/app.js"></script>
    </head>
    <body class="sapUiBody">
         <img src="images/sap_logo.png" >
         <div id="salesorders"></div>
         <div id="lineitems"></div>
         <img src="images/o365_logo.jpg" style="margin:30px 0 10px 0" />
         <div id="issues"></div>
    </body>
</html>

The JavaScript of our application is contained in app/app.js.

// 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://gw.esworkplace.sap.com/sap/opu/sdata/IWFND/SALESORDER",
    // The SalesOrder service requires authentication
    // get the username/password from the SDN page.
    username = "[username]",
    password = "[password]",
    // SAP Gateway only supports XML, so don't use JSON
    asJson = false,
    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'
var issueService =
        "http://[SharePoint_server]/demo/_vti_bin/ListData.svc",
    issueCollection = "SalesOrderIssues"  // name of SP List
    issueModel = new ODataModel(issueService);
// 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");
// Create the issues datatable
var issues = new DataTable({
    title: "Issues",
    width: "100%",
    visibleRowCount: 5,
    selectionMode: SelectionMode.Single,
    editable: false
});
issuesColumns = [
    { header: "Id", value: "{Id}", width: '30px' },
    { header: "Title", value: "{Title}", width: '40%' },
    { header: "Status", value: "{IssueStatusValue}", width: '10%' },
    { header: "Comments", value: "{Comments}", width: '50%' }
]
issuesColumns.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
        });
    issues.addColumn(column);
});
issues.setModel(issueModel);
issues.placeAt("issues");
// 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
    var filter = new Filter("SalesOrderID", FilterOperator.EQ, 'SO:' + selectedSalesOrderID);
    // load the issues table using the filter
    issues.bindRows(issueCollection, null, [filter]);
});

Now, fire up your Chrome browser with the “disable-web-security” command line. This will suppress the Same Origin Policy which normally doesn’t allow you to do XHR request across domains:

SNAGHTML253f39d

Now you can view index.html in Chrome:

SNAGHTML24dc1e3

We have just build our first mash-up of SAP ERP and SharePoint data using SAPUI5!

Themes

SAPUI5 provides a number of themes. The theme used in this example is called ‘sap_platinum’. You can find other themes in the /resource/sap/ui/*/themes folders. Here are screenshots of the same page using the other themes (click the images to enlarge):

imageTheme: sap_goldreflection imageTheme: sap_ux
imageTheme: sap_hcb imageTheme: base

My first impressions on SAPUI5:

  • Offers a comprehensive set of UI widgets and layouts
  • Huge code base. Definitely not a micro-framework Smile.
  • Amazingly little code is required to get a demo app with OData sources described above up and running.
  • Includes jQuery (version 1.4.4. included in sap-core-ui.js)
  • Includes datajs.js(OData library by Microsoft)
  • Style and idiom is a bit verbose and seems to be influenced by Java. This may be a pro or a con, depending on where you are coming from.

Overall SAPUI5 is a very interesting entrant in the marketplace and sure to further boost the position as HTML5 as UI platform.

I hope this post is helpful in starting to explore the SAPUI5 Beta yourself.

Thanks for reading!

UPDATE (Oct 2012): SAPUI5 now includes mobile controls. See comment below from Ruben.

About these ads

32 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.

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

    • 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

  2. 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.

  3. 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 ?

    • 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

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

  5. 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

    • 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. http://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!

      • 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

  6. 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. :)

      • 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, ….

  7. 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

    • 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

      • 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

  8. 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

    • 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, …).

  9. 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.

      • 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. -

  10. 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

      • 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.

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s