SAP - HR
SAP PPOCE: How to create an Organizational Unit
In this tutorial we will Learn Intoduction to Organization and Staffing Transaction How to Create...
SAPUI5 is the latest in the series of SAP UI development technologies. In order to provide web integration for the underlying SAP ERP system, SAP came up with multiple UI development technologies like BSP (Business server pages), PDK (Portal development kit), Web Dynpro Java, Web Dynpro ABAP. And the successor of Web Dynpro ABAP is SAPUI5.
SAPUI5 is a set of libraries which is used to build Responsive web applications. Responsive web applications are those which are built once and can be run on multiple devices like Desktop, Mobile and Tablet, etc. SAPUI5 works on the concept of MVC to create separation between Data, Business Logic and Representation of Data on View. So the development of View and Controller can take place independently to the development to model (data containers). Thus accelerating the development cycle.
In this training course, you will learn:
SAPUI Architecture Diagram
In the above Architecture, first box, i.e. 'Devices' indicate the devices on which UI5 applications run. UI5 applications can be accessed via a Mobile app or any browser on these devices. This layer of the architecture is called 'Presentation Layer.'
SAPUI5 applications and oData services reside on SAP NetWeaver Gateway Server. This layer of the architecture is called 'Application Layer.'
Actual business logic is implemented in SAP core systems like ECC, CRM, and BW, etc.… Business logic can be implemented using SAP programs and function modules. SAP transactional and Master Data reside on SAP systems. This layer of the architecture is called 'Database Layer' or 'Persistence Layer.'
A Component is a piece of working code that is reused wherever required. There are 2 types of components provided by SAPUI5
Essentially, a Component is a folder. When you create a new SAPUI5 application, you will be able to see a folder structure created in your project explorer like below.
In this UI5 application, PassNum is a Component. Component.js file is mandatory for UI5 application to behave like a Component. Component.js file is the component controller.
Before we start, you need to ensure that –
After the application is completely built, it should look like below:
In this guide, we will create 2 components namely Parent Component and Child Component. First, we will create Child Component and then consume it in Parent component.
Let's start getting our hands dirty.
Our goal is to create a Child Component that will accept a number from 1 to 12 and display the name of the month. For example, it receives 3; it should display 'March'.
Go to File->New->Other->SAPUI5 Application Development->Application project.
Create an application project for SAPUI5 by following the wizard that opens up. See screenshot below.
Enter Name of the project, let the other selections remain the same as suggested by the wizard.
In the above screenshot, there are 2 types of libraries displayed as radio buttons
When you select sap.m, you are telling the wizard to create a UI5 application project whose bootstrap section will automatically include sap.m library which is meant for creating a responsive web application.
Next, you will see below section of the wizard where you need to create initial View. An Initial view is a view which will be rendered first when the application is accessed.
Here you need to give the name of the view and select type of the view. SAPUI5 supports 4 types of view as evident on the above screen. So the UI of a SAPUI5 application can be built using Javascript or XML or JSON or HTML whichever language you are comfortable with.
At the end of the wizard, a new project will be created and displayed on Project Explorer window of Eclipse like below.
Next, let us create a Component.js file and write below code in it.
sap.ui.core.UIComponent.extend("DisplayMonth.Component", { metadata: { "name": "DisplayMonth", "dependencies": { "components": []} }, createContent: function() { var oViewData = { component: this }; var oView = sap.ui.view({ viewName: "DisplayMonth.displaymonth.DisplayMonthView", type: sap.ui.core.mvc.ViewType.XML, viewData: oViewData }); return(oView); }, init: function() { // call super init (will call function "create content") sap.ui.core.UIComponent.prototype.init.apply(this, arguments); // always use absolute paths relative to our own component // (relative paths will fail if running in the Fiori Launchpad) var sRootPath = jQuery.sap.getModulePath("DisplayMonth"); }, });
Next, let us tell out the index.html file to load Component.js when the application is accessed from the browser. So write below code in the index.html file.
<!DOCTYPE HTML> <html> <head> // adding meta tags to tell IE browser to render the page in IE-edge mode. <meta http-equiv="X-UA-Compatible" content="IE=edge"> // adding meta tag to tell eclipse to use UTF 8 as character encoding <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> // Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax <script src="/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-resourceroots='{"DisplayMonth": "./"}'> </script> <script> sap.ui.getCore().attachInit(function() { new sap.m.Shell({ app: new sap.ui.core.ComponentContainer({ height : "100%", name : "DisplayMonth" }) }).placeAt("content"); }); </script> </head> // start of body of SAPUI5 application. It contains a div element. <body class="sapUiBody" role="application"> <div id="content"></div> </body> </html>
Next, let us write code in our displaymonth view which will display the Month whose month number is received from the parent Component.
<html:style> #__xmlview1--id{ margin-left: 30rem; margin-top: 9rem; font-size: 6rem; font-style: italic; background-color: burlywood; } </html:style> <App id="fioricontent"> <Page title="Child Component"> <content> <Text id="id" xmlns="sap.m" text="{myModel>/monthname}"></Text> </content> </Page> </App>
After you've pasted above code, your view should look like below-
And finally, let us write code of DisplayMonthView's Controller file.
The code is written only in the onInit() hook method of this controller hence pasting here only the onInit() code. Rest of the file is as generated by the framework.
onInit : function() { sap.ui.getCore().getEventBus().subscribe("exchange", "data", function(channel, event, oEventData) { jsonModel = new sap.ui.model.json.JSONModel({ monthumber : oEventData, monthname : '' }); // derive month name from month number switch (jsonModel.oData.monthumber) { case "1": jsonModel.oData.monthname = 'January'; break; case "2": jsonModel.oData.monthname = 'February'; break; case "3": jsonModel.oData.monthname = 'March'; break; case "4": jsonModel.oData.monthname = 'April'; break; case "5": jsonModel.oData.monthname = 'May'; break; case "6": jsonModel.oData.monthname = 'June'; break; case "7": jsonModel.oData.monthname = 'July'; break; case "8": jsonModel.oData.monthname = 'August'; break; case "9": jsonModel.oData.monthname = 'September'; break; case "10": jsonModel.oData.monthname = 'October'; break; case "11": jsonModel.oData.monthname = 'November'; break; case "12": jsonModel.oData.monthname = 'December'; break; } this.getView().setModel(jsonModel, "myModel"); }, this); },
Deploy the project and give the technical name of the BSP application which will be generated on the ABAP frontend server. Let the name be zdisplaymonth. At this point, your application project should look like below.
Now it is the time to create a new Component (Parent Component) which will consume the Component we created so far in this tutorial.
Go to File->New->Other->SAPUI5 Application Development->Application project. Then follow wizard instructions to create new SAPUI5 application project. This has been described in detail in Step 1 of Part 1 in this tutorial above.
Name of the parent Component project is PassNum. And the technical name of the BSP application generated after deployment of SAPUI5 component to ABAP frontend server is zpassnum. The project structure will look like below
Let us now write code in index.html, Component.js and PassNum.view.xml and PassNum.controller.js files
<!DOCTYPE HTML> <html> <head> // adding meta tags to tell IE browser to render the page in IE-edge mode. <meta http-equiv="X-UA-Compatible" content="IE=edge"> // adding meta tag to tell eclipse to use UTF 8 as character encoding <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> // Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax <script src="/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-resourceroots='{"PassNum": "./"}'> </script> <script> sap.ui.getCore().attachInit(function() { new sap.m.Shell({ app: new sap.ui.core.ComponentContainer({ height : "100%", name : "PassNum" }) }).placeAt("content"); }); </script> </head> // start of Body of SAPUI5 application, Contains a div tag, <body class="sapUiBody" role="application"> <div id="content"></div> </body> </html>
sap.ui.core.UIComponent.extend("PassNum.Component", { metadata: { "name": "PassNum", "dependencies": { "components": []} }, createContent: function() { var oViewData = { component: this }; // Creating Reference of a PassNum XML view var myView = sap.ui.view({ viewName: "PassNum.passnum.PassNum", type: sap.ui.core.mvc.ViewType.XML, viewData: oViewData }); return(myView); }, init: function() { // call super init (this will call function "create content") sap.ui.core.UIComponent.prototype.init.apply(this, arguments); // ensure to use absolute paths relative to own component // (running in the Fiori Launchpad, relative paths will fail) var sRootPath = jQuery.sap.getModulePath("PassNum"); }, });
<Page title="Parent Component"> <content> <VBox xmlns="sap.m" id="vboxid"> <items> <Button xmlns="sap.m" id="1" text="First" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="2" text="Second" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="3" text="Third" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="4" text="Fourth" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="5" text="Fifth" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <core:ComponentContainer id="conpcontid" name="DisplayMonth" manifestFirst="true" component="zdisplaymonth"></core:ComponentContainer> </items> </VBox> </content> </Page>
After you use above code in your view, your view should look like below
Only the onInit() method has been changed. Everything else in this file remains the same
onInit: function() { jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth"); }, clickbutton:function(oEvent) { sap.ui.getCore().getEventBus().publish("exchange", "data", oEvent.oSource.sId.split("--")[1]); }
Deploy the application on ABAP frontend server and run it. You should be able to run it by right-clicking on the project and clicking 'Run on ABAP server' option.
Below URL will open up in eclipse browser.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Copy the URL and run it in the actual browser. In the above hostname marked in yellow is the hostname of your ABAP frontend server.
Output
Click on 'First' button, January should display in the Child Component.
Enjoy creating beautiful, responsive web applications using SAPUI5.
In this tutorial,
In this tutorial we will Learn Intoduction to Organization and Staffing Transaction How to Create...
What is Partner Function? Partner function is two-character identification key that describes the...
Get 9 must-read books that will put your SAP career in overdrive! FICO, HANA, PP, SD, MM, HR,...
Purchase requisition creation can be done in t-code ME51N (or the older version ME51 – not...
This tutorial demonstrates how to create Retained Earnings Account Enter Transaction code SPRO in...
There are two types of goods movement against production order which impacts the inventory of the...