- SAP Managed Tags
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
- .csv : To load the data into tables
- .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.
- .hdbtable : A design-time definition of a database table.
- .hdbti : A table-import configuration that specifies which .csv file is imported into which table in the SAP HANA system.
- .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)
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.
.xsaccess and .xsapp will be created by HANA Studio.
Now the project is created and shared to the repository.
Create the folders as mentioned above like data, model, services.
* 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)
Once the folders are created, right click on Project -> Team -> Activate All.
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 ->
Search for table and will find the “Database Table”.
Create the tables auto, sales and region as below.
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.”
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
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
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
Let us create a graphical calculation view. Goto HANA Developer perspective, to models folder and Right click , New -> Others and search for Calculation View.
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.
After creation the view looks like below.
Click on Projection and drag the Projection to Scenario pane and add the tables, region and sales.
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.
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.
Join the JOIN_REGION_SALES with another Join with auto table added and connect the same to Aggregation.
In Details Pane, Select the column nodes as “Add to Output” (right click) and map the AutoMobileId of like below.
Select the measure as “Add as Aggregated Column” like below.
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.
Finally the calculation view looks like below.
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.
Exposing Calculation View as ODATA Service
Search for odata in the wizard provided. Create the XSODATA file in services folder.
Enter the salesOData and .xsodata is appended.
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.
Enter the schema username and password to view the XSODATA.
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
Enter the project name as “SalesDemoUI” and share the project to repository like below.
Enter the view name as toHome
And click on finish. Index.html and corresponding js files are created like below.
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
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
Bluesky| User | Count |
|---|---|
| 27 | |
| 24 | |
| 20 | |
| 19 | |
| 13 | |
| 13 | |
| 12 | |
| 12 | |
| 11 | |
| 10 |
