Skip to Content
Author's profile photo Daniel K

Application Development using SAPUI5, XSODATA on HANA DB

Purpose


The tutorial will demonstrate how to develop the application on HANA DB using SAPUI5, XSODATA.

This blog gives step-by-step process starting from creation of modeling objects in HANA modeler, data loading thru .csv files and then exposing the same as oData service (XSODATA) and finally consume in SAPUI5 application.


Objective


To display the Automobiles data in web application thru SAPUI5 as frontend and HANA as database thru XSODATA. Display the bar chart as report; display the Automobiles detailed data in table. In the upcoming document, will see about various operations.


There are two projects to create.

1. For Modeling and creating the XSODATA.

2. For UI purpose

Depends on the artifacts, the project folders can be created as below.

A. data : To create database artifacts like below

  1. .csv : To load the data into tables
  2. .hdbsequence : A design-time definition of a database sequence, which is set of unique numbers, for example, for use as primary keys for a specific table.
  3. .hdbtable : A design-time definition of a database table.
  4. .hdbti : A table-import configuration that specifies which .csv file is imported into which table in the SAP HANA system.
  5. .hdbview : A design-time definition of a database view, which is a virtual table based on an SQL query.(optional)

B. model: To create the HANA database views like Attribute , Analytical and Calculation views . [.calculationview]

C. service: To create the XSODATA service [.xsodata]

D. procedures: To create the procedures

E. ui: To create the UI related stuff like javascript & html files.

Application Development in HANA Studio IDE (Integrated Development Environment)

Let’s create the project and related artifacts.

SalesAutoDemo Project — For Modeling and creating the XSODATA.

Open the SAP HANA studio and click on File -> New -> Other ->  XS Project (in SAP HANA -> Application Development)

/wp-content/uploads/2016/01/5_865480.png

/wp-content/uploads/2016/01/6_865487.png

/wp-content/uploads/2016/01/7_865488.png

Enter the project name as SalesAutoDemo in the above screen and then click next to share the project in the repository.

Note: Create Repository Workspace if not created.

/wp-content/uploads/2016/01/8_865489.png

.xsaccess and .xsapp will be created by HANA Studio.

/wp-content/uploads/2016/01/9_865490.png

/wp-content/uploads/2016/01/10_865491.png

Now the project is created and shared to the repository.

Create the folders as mentioned  above like data, model, services.

/wp-content/uploads/2016/01/11_865492.png

* data : To create database artifacts like below

* model: To create the HANA database views like Attribute , Analytical and Calculation views . [.calculationview]

* services: To create the XSODATA service [.xsodata]

* procedures: To create the procedures (optional)

/wp-content/uploads/2016/01/12_865493.png

Once the folders are created, right click on Project -> Team -> Activate All.

/wp-content/uploads/2016/01/13_865494.png

Let’s create the database modeling artifacts.

There are THREE different files to create the table and load the data to the database table.

.hdbtable : To create the table

.csv : To insert the data

.hdbti : To import the data from .csv to repository table.

Select data and Right click -> New -> Other ->

/wp-content/uploads/2016/01/14_865495.png


Search for table and will find the “Database Table”.

/wp-content/uploads/2016/01/15_865496.png


Create the tables auto, sales and region as below.


/wp-content/uploads/2016/01/16_865497.png


Note : We can create the database table as DDL Source File like below. Pros and Cons are mentioned in this thread http://scn.sap.com/thread/3525747 . But Thomas Jung says like this in thread https://scn.sap.com/thread/3599393

“HDBDD is the replacement for HDBTABLE. Both are still supported, but new enhancements will really only come to HDBDD. If you are starting something new, I would really recommend HDBDD. However what you describe – using a calculated column with a formula – isn’t yet available for either artifact. It is planned to be added in the future with HDBDD.”


/wp-content/uploads/2016/01/17_865498.png

/wp-content/uploads/2016/01/18_865499.png


/wp-content/uploads/2016/01/19_865500.png


auto.hdbtable


table.schemaName = “SCHEMA_NAME”;

table.tableType = COLUMNSTORE;

table.description = “AutoMobile Details”;

table.columns = [

{name = “AutoMobileId”; sqlType = NVARCHAR; nullable = false; length = 10; comment = “AutoMobile ID”; },

{name = “AutoMobileName”; sqlType = NVARCHAR; nullable = false; length = 40; comment = “AutoMobile Name”; },

{name = “AutoMobileCC”; sqlType = NVARCHAR; nullable = false; length = 10; comment = “AutoMobile CC”; },

{name = “AutoMobileType”; sqlType = NVARCHAR; nullable = false; length = 60; comment = “AutoMobile Type”; },

{name = “AutoMobileFuel”; sqlType = NVARCHAR; nullable = false; length = 10; comment = “AutoMobile Fuel”; },

{name = “AutoMobileMileage”; sqlType = DECIMAL; nullable = false; precision = 15; scale = 2; comment = “AutoMobile Mileage”; },

{name = “AutoMobileColor”; sqlType = NVARCHAR; nullable = false; length = 20; comment = “AutoMobile Color”; }

];

table.primaryKey.pkcolumns = [“AutoMobileId”];


region.hdbtable

table.schemaName = ” SCHEMA_NAME “;

table.tableType = COLUMNSTORE;

table.description = “Region Details”;

table.columns = [

{name = “RegionId”; sqlType = NVARCHAR; nullable = false; length = 10; comment = “Region ID”; },

{name = “RegionName”; sqlType = NVARCHAR; nullable = false; length = 40; comment = “Region Name”; },

{name = “RegionsubName”; sqlType = NVARCHAR; nullable = false; length = 10; comment = “Region Sub Name”; },

{name = “RegionState”; sqlType = NVARCHAR; nullable = false; length = 60; comment = “Region State”; }

];

table.primaryKey.pkcolumns = [“RegionId”];

sales.hdbtable


table.schemaName = ” SCHEMA_NAME “;

table.tableType = COLUMNSTORE;

table.description = “Sales Details”;

table.columns = [

{name = “RegionId”; sqlType = NVARCHAR; nullable = false; length = 10; comment = “Region ID”; },

{name = “AutoMobileId”; sqlType = NVARCHAR; nullable = false; length = 40; comment = “AutoMobile ID”; },

{name = “SalesAmountPercentage”; sqlType = DECIMAL; nullable = false; precision = 15; scale = 2; comment = “Sales Amount”; }

];

table.primaryKey.pkcolumns = [“RegionId”,”AutoMobileId”];

NOTE : We can create the Schema thru .hdbschema  if the schema is not yet created like schema_name=”SCHEMA_NAME ”;

Create the CSV file to load the data in to database table. Right Click on data folder -> New -> File


/wp-content/uploads/2016/01/20_865501.png/wp-content/uploads/2016/01/21_865502.png

auto.csv

1001,MARUTI SWIFT,1248 CC,HATCHBACK,DIESEL,25.2,WHITE

1002,MARUTI SWIFT DZIRE,1248 CC,SEDAN,PETROL,18.2,BLACK

1003,VOLSWAGEN POLO,1250 CC,HATCHBACK,DIESEL,25.2,RED

1004,VOLSWAGEN VENTO,1600 CC,SEDAN,PETROL,17.5,GREY

1005,HYUNDAI I20,1500 CC,HATCHBACK,PETROL,17.5,SILVER

1006,HYUNDAI VERNA,1800 CC,SEDAN,DIESEL,23.5,GREY

1007,FORD FIGO,1100 CC,HATCHBACK,PETROL,18.5,SILVER

1008,FORD FIESTA,1500 CC,SEDAN,DIESEL,22.5,GREY

1009,MARUTI CIAZ,1600 CC,SEDAN,DIESEL,25.2,SILVER

1010,MARUTI KIZASHI,2048 CC,SEDAN,PETROL,18.2,BLACK

1011,VOLSWAGEN POLO,1250 CC,HATCHBACK,DIESEL,25.2,SILVER

1012,VOLSWAGEN VENTO,1600 CC,SEDAN,PETROL,17.5,BLACK

1013,HYUNDAI I20,1500 CC,HATCHBACK,PETROL,17.5,WHITE

1014,HYUNDAI VERNA,1800 CC,SEDAN,DIESEL,23.5,BLACK

1015,FORD FIGO,1100 CC,HATCHBACK,PETROL,18.5,SILVER

1016,FORD FIESTA,1500 CC,SEDAN,DIESEL,22.5,GREY

1017,MARUTI SWIFT,1248 CC,HATCHBACK,DIESEL,25.2,WHITE

1018,MARUTI SWIFT DZIRE,1248 CC,SEDAN,PETROL,18.2,GREY

1019,VOLSWAGEN POLO,1250 CC,HATCHBACK,DIESEL,25.2,RED

1020,VOLSWAGEN VENTO,1600 CC,SEDAN,PETROL,17.5,GREY

1021,HYUNDAI I20,1500 CC,HATCHBACK,PETROL,17.5,BLACK

1022,HYUNDAI VERNA,1800 CC,SEDAN,DIESEL,23.5,GREY

1023,FORD FIGO,1100 CC,HATCHBACK,PETROL,18.5,SILVER

1024,FORD FIESTA,1500 CC,SEDAN,DIESEL,22.5,GREY

1025,MARUTI SWIFT,1248 CC,HATCHBACK,DIESEL,25.2,WHITE

1026,MARUTI SWIFT DZIRE,1248 CC,SEDAN,PETROL,18.2,BLACK

1027,VOLSWAGEN POLO,1250 CC,HATCHBACK,DIESEL,25.2,RED

1028,VOLSWAGEN VENTO,1600 CC,SEDAN,PETROL,17.5,GREY

1029,HYUNDAI I20,1500 CC,HATCHBACK,PETROL,17.5,SILVER

1030,HYUNDAI VERNA,1800 CC,SEDAN,DIESEL,23.5,GREY

1031,FORD FIGO,1100 CC,HATCHBACK,PETROL,18.5,SILVER

1032,FORD FIESTA,1500 CC,SEDAN,DIESEL,22.5,GREY

1033,HYUNDAI VERNA,1800 CC,SEDAN,DIESEL,23.5,GREY

1034,FORD FIGO,1100 CC,HATCHBACK,PETROL,18.5,SILVER

1035,FORD FIESTA,1500 CC,SEDAN,DIESEL,22.5,GREY

1036,HYUNDAI I20,1500 CC,HATCHBACK,PETROL,17.5,SILVER

Similarly the other CSV files like below.

region.csv

100,SOUTH INDIA,BANGALORE,KARNATAKA

200,NORTH INDIA,HARYANA,DELHI

300,EAST INDIA,KOLKATA,WESTBENGAL

400,WEST INDIA,MUMBAI,MAHARASHTRA

sales.csv

400,1001,25.25

400,1003,52.25

400,1005,32.20

400,1007,20.25

400,1002,45.25

200,1004,22.25

300,1006,42.20

400,1008,50.25

100,1009,45.25

200,1010,22.25

300,1011,42.20

400,1012,50.25

100,1013,45.25

200,1014,22.25

300,1015,42.20

400,1016,50.25

100,1017,45.25

200,1018,22.25

300,1019,42.20

400,1020,50.25

400,1021,50.25

300,1022,42.20

200,1023,22.25

100,1024,45.25

100,1025,45.25

200,1026,22.25

300,1027,42.20

400,1028,50.25

400,1029,50.25

300,1030,42.20

200,1031,22.25

200,1032,22.25

100,1033,45.25

200,1034,22.25

100,1035,45.25

100,1036,45.25

Create the .hdbti to import the csv file to load the data. Right Click on data folder -> New -> Other -> SAP HANA -> Database Development


/wp-content/uploads/2016/01/22_865503.png

We can load the data to the tables with below options.

Target CDS table – cdstable = “sample.test::MY_DDL.MY_TABLE”;

Target repository table hdbtable = “sample.test::MY_TABLE1”;

Target catalog table – table = “MY_TABLE2”; schema = “<MY_SAMPLE_SCHEMA>”;


We can load the tables individually or all at a time.


Here we have chosen the hdbtable.

auto.hdbti


import =

[

{

hdbtable = “SalesAutoDemo.data::auto”; // Target repository table

file = “SalesAutoDemo.data:auto.csv”;

header = false;

delimField = “,”;

}

];


region.hdbti

import =

[

{

hdbtable = “SalesAutoDemo.data::region”; // Target repository table

file = “SalesAutoDemo.data:region.csv”;

header = false;

delimField = “,”;

}

];

sales.hdbti


import =

[

{

hdbtable = “SalesAutoDemo.data::sales”; // Target repository table

file = “SalesAutoDemo.data:sales.csv”;

header = false;

delimField = “,”;

}

];

The activation process should be like below

The .hdbtables -> auto, region, sales. The sales table has both the primary keys of other tables.

The .csv and the .hdbti files could be activated in the same way like auto, region, sales.

After activation the auto table is created in the location “SalesAutoDemo.data::auto”.

Note : The tables can be found at the location -> Systems Explorer -> your HOST -> Catalog -> Your Schema -> Tables. These tables are named with fully qualified name like SalesAutoDemo.data::auto

/wp-content/uploads/2016/01/23_865504.png


Let us create a graphical calculation view. Goto HANA Developer perspective, to models folder and Right click , New -> Others and search for  Calculation View.


/wp-content/uploads/2016/01/24_865372.png

Enter the view name as CA_SALESREPORT and .calculationview is appended after the creation. CA prefix is used for Calculation View. Similarly for Attribute view, it’s AT and for Analytical View it’s AN.

/wp-content/uploads/2016/01/25_865373.png

After creation the view looks like below.

/wp-content/uploads/2016/01/26_865374.png


Click on Projection and drag the Projection to Scenario pane and add the tables, region and sales.


/wp-content/uploads/2016/01/27_865375.png

Once added the tables, rename the projection node as PROJ_REGION & PROJ_SALES . Drag the join and connect the nodes to Projections PROJ_REGION & PROJ_SALES.


/wp-content/uploads/2016/01/28_865376.png

In Details Pane, Select the column nodes as “Add to Output” (right click) and map the RegionId of PROJ_REGION to RegionId of PROJ_SALES like below.

/wp-content/uploads/2016/01/29_865377.png

Join the JOIN_REGION_SALES with another Join with auto table added and connect the same to Aggregation.

/wp-content/uploads/2016/01/30_865378.png


In Details Pane, Select the column nodes as “Add to Output” (right click) and map the AutoMobileId of like below.

/wp-content/uploads/2016/01/31_865379.png


Select the measure as “Add as Aggregated Column”  like below.

/wp-content/uploads/2016/01/32_865380.png


At least one measure should be selected for Calculation view When you select CUBE as data category while creation. Sales Amount should be a measure and select the same as “Add to Aggregated Column”.

In Semantics, mark the attributes and measure. Auto assign will also work for the measures and attributes.


/wp-content/uploads/2016/01/33_865381.png


Finally the calculation view looks like below.

/wp-content/uploads/2016/01/34_865382.png


After saving the validating the changes, Activate the view(Right click on view -> Team -> Activate).


Thru analysis view , drop the measures in values axis and attributes to labels axis.

/wp-content/uploads/2016/01/35_865383.png

Exposing Calculation View as ODATA Service

Search for odata in the wizard provided. Create the XSODATA file in services folder.

/wp-content/uploads/2016/01/36_865384.png

Enter the salesOData and .xsodata is appended.


/wp-content/uploads/2016/01/37_865388.png


service {
"SalesAutoDemo.models::CA_SALESREPORT" as "SALES_DISPLAYLIST"
keys ("AutoMobileId");
}



Note : Remove the .atrributeview or .calculationview and “/” before the view name if any.

Activate the OData file and run as “XS Service” to test the data.

/wp-content/uploads/2016/01/38_865389.png

Enter the schema username and password to view the XSODATA.

/wp-content/uploads/2016/01/39_865390.png


http://hostname:8000/SalesAutoDemo/services/salesOData.xsodata/$metadata

we can view the whole data thru the URL like below.

http://hostname:8000/SalesAutoDemo/services/salesOData.xsodata/SALES_DISPLAYLIST

NOTE :  SALES_DISPLAYLIST is defined in the service definition of .XSODATA file.

We are done with the first project related to the database modeling and XSODATA creation.

SalesUIDemo Project — Second Project to develop the UI related elements.


Create the SAPUI5 Application development thru HANA Studio -> File -> New -> Other -> Application Project in SAPUI5 Application Development

/wp-content/uploads/2016/01/40_865391.png

Enter the project name as “SalesDemoUI” and share the project to repository like below.

/wp-content/uploads/2016/01/41_865394.png

Enter the view name as toHome

/wp-content/uploads/2016/01/42_865395.png


And click on finish. Index.html and corresponding js files are created like below.

/wp-content/uploads/2016/01/43_865396.png

index.html


<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
  <script src="resources/sap-ui-core.js"
  id="sap-ui-bootstrap"
  data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3,sap.viz"
  data-sap-ui-theme="sap_bluecrystal">
  </script>
  <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
  <script>
  sap.ui.localResources("salesuidemo");
  var view = sap.ui.view({id:"idtoHome", viewName:"salesuidemo.toHome", type:sap.ui.core.mvc.ViewType.JS});
  view.placeAt("content");
  </script>
  </head>
  <body class="sapUiBody" role="application">
  <div id="content"><h3><i>Welcome to ABC AutoMobiles</i></h3></div>
  </body>
</html>

toHome.view.js



sap.ui
    .jsview(
        "salesuidemo.toHome", {
            /**
             * Specifies the Controller belonging to this View. In the case that it is
             * not implemented, or that "null" is returned, this View does not have a
             * Controller.
             *
             * @memberOf salesuidemo.toHome
             */
            getControllerName: function() {
                return "salesuidemo.toHome";
            },
            /**
             * Is initially called once after the Controller has been instantiated. It
             * is the place where the UI is constructed. Since the Controller is given
             * to this method, its event handlers can be attached right away.
             *
             * @memberOf salesuidemo.toHome
             */
            createContent: function(oController) {
                // Create a TabStrip instance
                var oAutoMTabStrip = new sap.ui.commons.TabStrip(
                    "TabStrip1");
                oAutoMTabStrip.setWidth("900px");
                oAutoMTabStrip.setHeight("500px");
                oAutoMTabStrip.setEnableTabReordering(true);
                oAutoMTabStrip.attachClose(function(oEvent) {
                    var oTabStrip = oEvent.oSource;
                    oTabStrip.closeTab(oEvent.getParameter("index"));
                });
                // 1. tab: general data (use createTab)
                var oAutoMLayout = new sap.ui.commons.layout.MatrixLayout(
                    "Matrix1", {
                        columns: 2,
                        width: "100%"
                    });
                oAutoMLayout.setWidths(['150px']);
                var sURI = 'http://hostname:8000/SalesAutoDemo/services/salesOData.xsodata/';
                var oModel = new sap.ui.model.odata.ODataModel(sURI,
                    true, "USERNAME", "PASSWORD");
                var colorBar = "#728C00";
                // A Dataset defines how the model data is mapped to the chart
                var oDataset = new sap.viz.ui5.data.FlattenedDataset({
                    // it can show multiple measures, each results in a new set of bars
                    // in a new color
                    measures: [
                        // measure 1
                        {
                            axis: 2,
                            name: 'Sales', // 'name ' is used as label in the Legend
                            value: '{Sales}' // 'value' defines the binding for the
                            // displayed value
                        }
                    ],
                    // a Bar Chart requires exactly one dimension (x-axis)
                    dimensions: [{
                        axis: 1, // must be one for the x-axis, 2 for y-axis
                        name: 'Auto Mobile Name',
                        value: "{AutoMobileName}"
                    }],
                    // 'data' is used to bind the whole data collection that is to be
                    // displayed in the chart
                    data: {
                        path: "/SALES_DISPLAYLIST"
                    }
                });
                // create a Bar chart
                var oBarChart = new sap.viz.ui5.Bar({
                    width: "100%",
                    height: "400px",
                    plotArea: {
                        drawingEffect: sap.viz.ui5.types.Bar_drawingEffect.glossy,
                        isRoundCorner: true,
                        colorPalette: [colorBar]
                    },
                    title: {
                        visible: true,
                        text: 'AutoMobile Sales Report '
                    },
                    dataset: oDataset
                });
                // attach the model to the chart and display it
                oBarChart.setModel(oModel);
                oAutoMTabStrip.createTab("AutoMobiles Report",
                    oBarChart);
                // 2. tab: AutoMobiles Details Display (use separate tab element)
                oAutoMobilesTab = new sap.ui.commons.Tab("tab3");
                oAutoMobilesTab
                    .setTooltip("AutoMobiles Details Display");
                oAutoMobilesTab.setTitle(new sap.ui.core.Title(
                    "Title3", {
                        text: "AutoMobiles Details Display"
                    }));
                // Create an instance of the table control
                var oAutoMListTable = new sap.ui.table.Table({
                    title: "AutoMobiles Details Display",
                    visibleRowCount: 7,
                    firstVisibleRow: 3,
                    selectionMode: sap.ui.table.SelectionMode.Single,
                    navigationMode: sap.ui.table.NavigationMode.Paginator,
                    fixedColumnCount: 2
                });
                // Define the columns and the control templates to be used
                oAutoMListTable.addColumn(new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({
                        text: "AutoM ID"
                    }),
                    template: new sap.ui.commons.TextView()
                        .bindProperty("text", "AutoMobileId"),
                    sortProperty: "AutoMobileId",
                    filterProperty: "AutoMobileId",
                    width: "100px",
                    hAlign: "Center"
                }));
                oAutoMListTable.addColumn(new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({
                        text: "AutoMobile Name"
                    }),
                    template: new sap.ui.commons.TextField()
                        .bindProperty("value", "AutoMobileName"),
                    sortProperty: "AutoMobileName",
                    filterProperty: "AutoMobileName",
                    width: "200px",
                    hAlign: "Center"
                }));
                oAutoMListTable.addColumn(new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({
                        text: "CC"
                    }),
                    template: new sap.ui.commons.TextField()
                        .bindProperty("value", "AutoMobileCC"),
                    sortProperty: "AutoMobileCC",
                    filterProperty: "AutoMobileCC",
                    width: "75px",
                    hAlign: "Center"
                }));
                oAutoMListTable.addColumn(new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({
                        text: "Body Type"
                    }),
                    template: new sap.ui.commons.TextField()
                        .bindProperty("value", "AutoMobileType"),
                    sortProperty: "AutoMobileType",
                    filterProperty: "AutoMobileType",
                    width: "75px",
                    hAlign: "Center"
                }));
                oAutoMListTable.addColumn(new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({
                        text: "Fuel Type"
                    }),
                    template: new sap.ui.commons.TextField()
                        .bindProperty("value", "AutoMobileFuel"),
                    sortProperty: "AutoMobileFuel",
                    filterProperty: "AutoMobileFuel",
                    width: "75px",
                    hAlign: "Center"
                }));
                oAutoMListTable.addColumn(new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({
                        text: "Mileage"
                    }),
                    template: new sap.ui.commons.TextField()
                        .bindProperty("value",
                            "AutoMobileMileage"),
                    sortProperty: "AutoMobileMileage",
                    filterProperty: "AutoMobileMileage",
                    width: "75px",
                    hAlign: "Center"
                }));
                oAutoMListTable.addColumn(new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({
                        text: "Color"
                    }),
                    template: new sap.ui.commons.TextField()
                        .bindProperty("value", "AutoMobileColor"),
                    sortProperty: "AutoMobileColor",
                    filterProperty: "AutoMobileColor",
                    width: "100px",
                    hAlign: "Center"
                }));
                var sURI = 'http://hostname:8000/SalesAutoDemo/services/salesOData.xsodata/';
                var oModel = new sap.ui.model.odata.ODataModel(sURI,
                    true, "USERNAME", "PASSWORD");
                oAutoMListTable.setModel(oModel);
                oAutoMListTable.bindRows("/SALES_DISPLAYLIST");
                oAutoMobilesTab.addContent(oAutoMListTable);
                oAutoMTabStrip.addTab(oAutoMobilesTab)
                // 3. tab: address data (use separate tab element)
                oAddNewAutoMTab = new sap.ui.commons.Tab("tab2");
                oAddNewAutoMTab.setTooltip("Add New AutoMobile");
                oAddNewAutoMTab.setTitle(new sap.ui.core.Title(
                    "Title2", {
                        text: "Add New AutoMobile"
                    }));
                var oLayout2 = new sap.ui.layout.form.GridLayout("L2");
                var oForm2 = new sap.ui.layout.form.Form(
                    "F2", {
                        title: new sap.ui.core.Title({
                            text: "AutoMobile Details",
                            tooltip: "AutoMobile Details"
                        }),
                        editable: true,
                        layout: oLayout2,
                        formContainers: [
                            new sap.ui.layout.form.FormContainer(
                                "C7", {
                                    title: "Add AutoMobile Details",
                                    formElements: [
                                        new sap.ui.layout.form.FormElement({
                                            label: "AutoMobile ID",
                                            fields: [new sap.ui.commons.TextField({
                                                value: "DISABLED",
                                                enabled: false,
                                                layoutData: new sap.ui.layout.form.GridElementData({
                                                    hCells: "2"
                                                })
                                            })]
                                        }),
                                        new sap.ui.layout.form.FormElement({
                                            label: "AutoMobile Name",
                                            fields: [new sap.ui.commons.TextField({
                                                id: 'autoMobileName',
                                                value: '',
                                                layoutData: new sap.ui.layout.form.GridElementData({
                                                    hCells: "2"
                                                })
                                            })]
                                        }),
                                        new sap.ui.layout.form.FormElement({
                                            label: "AutoMobile CC",
                                            fields: [new sap.ui.commons.TextField({
                                                id: 'autoMobileCC',
                                                value: '',
                                                layoutData: new sap.ui.layout.form.GridElementData({
                                                    hCells: "2"
                                                })
                                            })]
                                        }),
                                        new sap.ui.layout.form.FormElement({
                                            label: "AutoMobile Type",
                                            fields: [new sap.ui.commons.TextField({
                                                id: 'autoMobileType',
                                                value: '',
                                                layoutData: new sap.ui.layout.form.GridElementData({
                                                    hCells: "2"
                                                })
                                            })]
                                        }),
                                        new sap.ui.layout.form.FormElement({
                                            label: "AutoMobile Fuel",
                                            fields: [new sap.ui.commons.TextField({
                                                id: 'autoMobileFuel',
                                                value: '',
                                                layoutData: new sap.ui.layout.form.GridElementData({
                                                    hCells: "2"
                                                })
                                            })]
                                        }),
                                        new sap.ui.layout.form.FormElement({
                                            label: "AutoMobile Mileage",
                                            fields: [new sap.ui.commons.TextField({
                                                id: 'autoMobileMileage',
                                                value: '',
                                                layoutData: new sap.ui.layout.form.GridElementData({
                                                    hCells: "2"
                                                })
                                            })]
                                        }),
                                        new sap.ui.layout.form.FormElement({
                                            label: "AutoMobile Color",
                                            fields: [new sap.ui.commons.TextField({
                                                id: 'autoMobileColor',
                                                value: '',
                                                layoutData: new sap.ui.layout.form.GridElementData({
                                                    hCells: "2"
                                                })
                                            })]
                                        }),
                                    ]
                                }),
                            new sap.ui.layout.form.FormContainer(
                                "C11", {
                                    formElements: [
                                        new sap.ui.layout.form.FormElement({
                                            label: ""
                                        }),
                                        new sap.ui.layout.form.FormElement({
                                            fields: [
                                                new sap.ui.commons.Button({
                                                    text: "Add AutoMobile",
                                                    tooltip: "Add AutoMobile",
                                                    /*
                                                     * press : function() {
                                                     * alert("AddAutoMobile"); },
                                                     */
                                                    layoutData: new sap.ui.layout.form.GridElementData({
                                                        hCells: "3"
                                                    })
                                                }),
                                                new sap.ui.commons.Button({
                                                    text: "Cancel AutoMobile",
                                                    tooltip: "Cancel AutoMobile",
                                                    /*
                                                     * press : function() { alert("Cancel"); },
                                                     */
                                                    layoutData: new sap.ui.layout.form.GridElementData({
                                                        hCells: "3"
                                                    })
                                                })
                                            ]
                                        }),
                                    ]
                                })
                        ]
                    })
                oAddNewAutoMTab.addContent(oForm2);
                oAutoMTabStrip.addTab(oAddNewAutoMTab);
                // Attach the TabStrip to the page
                oAutoMTabStrip.placeAt("content");
            }
        });



Please note that the SAPUI5 controls has been used in the application like bar chart, table etc.

toHome.controller.js – No change in code.


Activate the UI files and run the index.html file as “Run as WebApp Preview” or get the url and run on the chrome browser.


http://localhost:portno/SalesUIDemo/index.html


/wp-content/uploads/2016/01/44_865473.png

/wp-content/uploads/2016/01/45_865474.png/wp-content/uploads/2016/01/46_865478.png

In the upcoming document, will see about various operations in database level and UI level as well.


I shared the source code in GIT as well in the below links


danielxsdev/SalesAutoDemo · GitHub 

danielxsdev/SalesUIDemo · GitHub

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Benedict Venmani Felix
      Benedict Venmani Felix

      Nice document Daniel. Will definitely help people like me who are trying to get a grasp on UI5 and XSODATA.

      Please do share the the project on GIT.

      Thank You,

      Benedict

      Author's profile photo Daniel K
      Daniel K
      Blog Post Author

      🙂 .. Thanks Benedict .. Yes, need to explore more.

      Author's profile photo Daniel K
      Daniel K
      Blog Post Author

      Hi Benedict

      Shared the project on GIT.

      Thanks

      Daniel

      Author's profile photo Matthew Wong
      Matthew Wong

      Daniel,

      I am having trouble getting the UI5 app to work. I have a few questions.

      1. Do you activate the UI5 Project? If so, where? The HANA ABAP or the UI5 ABAP?
      2. when i activate to my HANA ABAP repository, I'm unable to use a URL to access the file. I try to view as Web Application, which works but the data doesnt show.
      3. When i try to view in browser, it doesnt find the webApp
      4. the "USERNAME" and "PASSWORD" in inHome.view should be changed to my own credentials or left as is?

      Thanks,

      Matt

      Author's profile photo Matthew Wong
      Matthew Wong

      when i view the index.html as web application, i get everything but the data, it says "No Data" where the data should be. anyone else have this problem?