SAP UI5 - Starters

Thursday, March 22, 2018

Display simple form SAPUI5

Display a simple form in SAPUI5

Create a new folder PersonalInfo in the main Sample folder.

Create a new view PInfo view which by default creates PInfo controller.

PInfo.view.xml

<mvc:View
height="100%"
controllerName="PersonalInfo.PInfo"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page
id="page"
showHeader="false" >
</Page>
</mvc:View>

PInfo.controller.js

sap.ui.define(['jquery.sap.global',
'sap/ui/core/Fragment',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, Fragment, Controller, JSONModel) {
"use strict";

var PageController = Controller.extend("PersonalInfo.PInfo", {

onInit: function (oEvent) {
var oModel = new JSONModel("PersonalInfo/Supplier.json");
this.getView().setModel(oModel);
this.getView().bindElement("/SupplierCollection/0");
this._showFormFragment("Display");
},

onExit : function () {
for (var sPropertyName in this._formFragments) {
if (!this._formFragments.hasOwnProperty(sPropertyName)) {
return;
}
this._formFragments[sPropertyName].destroy();
this._formFragments[sPropertyName] = null;
}
},
_formFragments: {},

_getFormFragment: function (sFragmentName) {
var oFormFragment = this._formFragments[sFragmentName];
if (oFormFragment) {
return oFormFragment;
}

oFormFragment = sap.ui.xmlfragment(this.getView().getId(), "PersonalInfo." + sFragmentName);

this._formFragments[sFragmentName] = oFormFragment;
return this._formFragments[sFragmentName];
},

_showFormFragment : function (sFragmentName) {
var oPage = this.getView().byId("page");
oPage.removeAllContent();
oPage.insertContent(this._getFormFragment(sFragmentName));
}

});

return PageController;

});

Here we are reading JSON data from Supplier.json file.The path of the file should be mentioned properly to avoid errors.(reading a json file)

this._showFormFragment("Display");

The form data is displayed on the view by another view called fragment. Fragments are the pieces of UI created to resuse all over the application.Fragments are defined as View only and calling Views controller is shared with Fragment as Fragments are not having their own controllers.

Fragment can be created as an xml file in the same folder.

FolderStructure:

Display.fragment.xml

<core:FragmentDefinition
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<VBox class="sapUiSmallMargin">
<f:SimpleForm id=""
editable="false"
layout="ResponsiveGridLayout"
title="Address"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="4"
emptySpanL="4"
emptySpanM="4"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Name" />
<Text id="nameText" text="{SupplierName}" />
<Label text="City" />
<Text id="City" text="{City}" />
<Label text="Country" />
<Text id="countryText" text="{Country}" />
<Label text="Tel" />
<Text text="{Tel}" />
<Label text="Email" />
<Text id="Email" text="{Email}" />
<Label text="Twitter" />
<Text id="twitText" text="{Twitter}" />
</f:content>
</f:SimpleForm>
</VBox>

</core:FragmentDefinition>

Output:

Source: https://sapui5.hana.ondemand.com/

Wednesday, March 21, 2018

Simple ComboBox in SAPUI5

Develop a simple ComboBox(SAPUI5)

Create new SAP UI5 Application Project.

Please check create initial view while creating the new project.

Select development paradigm as XML and then Finish.

A folder is created in the Project Explorer with the following hierarchy.

When the files are created itself they are generated with the required code format and we have to continue working on it based on our requirements.

index.html

<!DOCTYPE HTML>

<html>

<head>

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.m"

data-sap-ui-theme="sap_bluecrystal"

data-sap-ui-xx-bindingSyntax="complex">

</script>

sap.ui.localResources("combobox");

var app = new sap.m.App({initialPage:"idCombobox1"});

var page = sap.ui.view({id:"idCombobox1", viewName:"combobox.Combobox", type:sap.ui.core.mvc.ViewType.XML});

app.addPage(page);

app.placeAt("content");

</script>

</head>

</body>

</html>

data-sap-ui-xx-bindingSyntax="complex"

Should be added when you want to bind your json data to the controls.

Combobox.view.xml

<mvc:View

height="100%"

controllerName="combobox.Combobox"

xmlns:core="sap.ui.core"

xmlns:mvc="sap.ui.core.mvc"

xmlns="sap.m">

<ComboBox

items="{

path: '/CountriesCollection',

sorter: { path: 'text' }

}" placeholder="Select one">

<core:Item key="{key}" text="{text}" />

</ComboBox>

</content>

</Page>

</mvc:View>

Combobox.controller.js

sap.ui.define([

'jquery.sap.global',

'sap/ui/core/mvc/Controller',

'sap/ui/model/json/JSONModel'

], function(jQuery, Controller, JSONModel) {

"use strict";

var PageController = Controller.extend("combobox.Combobox", {

onInit: function () {

var oModel = new JSONModel(jQuery.sap.getModulePath( "combobox","/countriesCollection.json"));

this.getView().setModel(oModel);

this.getView().bindElement("/CountriesCollection/0");

}

});

return PageController;

});

Here we are pointing to a json file countriesCollection.json with details of Countries.Place the required json file in the mentioned path.

Now the coding part is done and we have to run the application to view the output.

Right click on the project folder and Run as-> Web App Preview

Output:

On modifying these two lines, countries with their keys are displayed.

<ComboBox

showSecondaryValues= "true"

items="{

path: '/CountriesCollection',

sorter: { path: 'text' }

}" placeholder="Select one">

<core:ListItem key="{key}" text="{text}" additionalText = "{key}"/>

</ComboBox>

Source: https://sapui5.hana.ondemand.com/

SAPUI5 - Installation

SAPUI5 Installation

First check if the JDK is installed and the environment variables are set.

Else download JDK and install.
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Set the Environment Variables
https://docs.oracle.com/javase/8/docs/technotes/guides/install/windows_jdk_install.html

Download Eclipse IDE for J2EE Devlopers
http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/neon3

Install Eclipse and create a work space.

Go to Help -> Install New Software

Get the link for SAP Development Kit from the below path

https://tools.hana.ondemand.com/

Note : Get the link based on the eclipse you have installed.

Click on Add ,Give a name and copy the link in the location option and click OK

You can select all or UI Developement Tools based on the requirement and click next and then finish.

SAPUI5 Installation is done.Now go to project explorer and create new project there you can see SAPUI5 Application Development.

Create Application project and enjoy coding :-)

Source: https://sapui5.hana.ondemand.com/