Technical Articles
How To Build A Custom UI5 Application Using MM Data
Before we begin to create a custom UI5 application based on the materials management information, we need first to set up the OData service. To do this, we will:
Ø Initialize the OData Model
Ø Start the OData Service
Ø Publish and test the service
Once we’ve managed to perform these tasks, we’ll move on to creating the gateway service.
Gateway Service Development
We need to login to the SAP backend to start developing our gateway service. To do so, we’ll run transaction SEGW and then select the New Project button. The resulting popup allows us to create our project and assign it a name. The name of our project will be “z_material_list” and we’re going to use this application to retrieve information about materials stores in the materials manager and display it on screen as well as be able to search through that data. Since we’re trying to keep things simple, we’re going to leave the object as a local object, so we hit the Local Object button. The project structure window then allows us to create a new Entity type by finding the Entity Type folder and right clicking on it, then selecting create. We’re going to change the Entity Type Name to “Material”, and the Entity Set Name to “Material”. When we hit the green checkbox, we’ll be able to adjust the properties of the entity we created.
In the project structure window, we’ll navigate down the folder view to the Properties folder, then double click it to open the Entity Properties window. We’re going to add the following properties to the Entity type:
Expose (SAPUI5) name ABAP field name Field type maximum length
MaterialNumber MATNR 18
MaterialDescription MAKTX 40
MaterialType MTBEZ 25
MaterialGroup WGBEZ 20
MaterialUnit MSEHT 10
Once we’ve updated the properties, we have to ensure that each one of our entries has the Edm Core Type of “Edm.String”. Once we’ve updated each of those properties, we’ll select the Save button. Once the system saves, we’ll click the “Generate Runtime Objects” button. The window that pops up allows us to change the Model and Service Definition if we so desire, but we’re going to leave these as default. Select the green checkbox to accept the window’s settings, and another window pops up to prompt us to Create Object Directory Entry. We’re going to save our current data location by hitting the Local Object button. There will then be a readout of generated system messages informing us that everything is as expected.
Our next task is to set up the GetEntitySet functionality. To do this we click Service Implementation > Materials > GetEntitySet (Query) and right click on the GetEntitySet (Query) selection then select “ABAP Workbench”. An information popup window will inform us that we haven’t implemented the MATERIALS_GET_ENTITYSET operation just yet. We’ll close that information window by hitting the green checkbox, and we’ll be presented with the Inherited Methods folder structure. We’re going to look for MATERIALS_GET_ENTITYSET, right click on it and hit “Redefine”. The methods generated are then saved automatically using in-memory computing.
Registering our Gateway Service
We’re going to rerun SEGW and select the Service Maintenance folder and choose Register along the top of the window. A popup screen informs us that we will be redirected to our currently selected system. We will accept, and the software will prompt us to Select the System Alias. We’ll choose the LOCAL system alias and hit the green checkbox. The Add Service popup will then appear, and we can update the pertinent information. We will select the “Local Object” button and hit the green checkbox to complete the registration procedure.
Testing our Gateway
Once we’ve registered the service, the Registration Status value will show a green light. To verify the service is running, we’ll first select it and hit the Gateway Client button along the top toolbar. The warning popup warns us that it will be redirecting us and we will accept it. The resulting screen shows an HTTP response in XML format. We can change the output by editing the URI to the different locations of information we want based on our project structure for the orthodontist in question. All the data we receive is in XML format, but we can easily change this to display in JSON format by clicking the Manage HTTP Request Header button and entering “accept” in the Header Name and “application/json” in the Header Value.
Creating the SAPUI5 App
We’ll first open the Eclipse Development Environment and create a new file by going to File > New > Other… and then selecting SAPUI5 Application Development and Application Project. In the New Application Wizard, we’ll set the name to MaterialList, and change the library to sap.m. We’ll ensure that “Create Initial View” is unselected and then hit Finish. The folder structure that we get has a main folder called WebContent, containing META-INF and WEB-INF folders as well as an index.html file. We’re going to add two new subfolders to the Web Content folder, called “View” and “i18n”. We will then start editing the index.html file to suit our needs.
We’re going to create a new meta tag if it doesn’t exist right below the opening of the head tag:
<meta http-equiv=”X-UA-Compatible” content=”IE = edge”>
Additionally, our script tag should look like this:
<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 = ‘{
“com.[namespace].materiallist”:”./”
}’>
</script>
where we replace namespace by whatever namespace we are using for our project.
We’re also going to create a new script tag where this one terminates:
<script>
sap.ui.getCore().attachInit(function(){
new sap.m.Shell({
appWidthLimited: false,
app: new sap.ui.core.ComponentContainer({
height: “100%”,
name: “[location of package]”
})
}) placeAt(“content”);
});
</script>
Next, we’ll build a Component.js file, inside the WebContent folder. We’re going to edit it to look something like this:
init:function(){
sap.ui.core.UIComponent.prototype.init.apply(this,arguments);
var rootPath = jQuery.sap.getModulePath(“[insert location path here]”);
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleUrl: (rootPath, “i18n/i18n.properties”).join(“/”)
});
this.setModel(i18Model, “i18n”);
var oModel = new sap.ui..model.odata.ODataModel(“/sap/opu/odata/sap/Z_MATERIAL_LIST_SRV/”, true);
this.setModel(oModel);
oModel.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay);
this.getRouter().initialize();
}
Next, we’ll define a properties value for i18n. The i18N.properties file text should look like this:
HEADER_MATERIAL_LIST=Material List
SEARCH_MATERIAL=Search Material
MATERIAL_NUMBER=Material Number
MATERIAL_DESCRIPTION= Description
MATERIAL_GROUP= Group
MATERIAL_TYPE=Type
MATERIAL_UNIT=Unit
We’ll save this file and move on to creating our views. To do this, we navigate to the project explorer, select the view folder and right click on it, selecting New > Other… and choosing SAPUI5 Application Development and View, then hitting Next. We’ll change the view’s Name to App, and set the Development Paradigm to XML. Hitting Finish results in two new files created in our view folder, but we only need one of them. We can remove App.controller.js from the folder as we won’t be using it. Next, we’re going to edit the App.view.xml to look something like this:
<mvc View
xmlns:mvc = “sap.ui.core.mvc” xmlns= “sap.m”
displayBlock = “true”>
<App id = “appId”/>
</mvc View>
Once we’ve completed this view, we’re going to create a new one using the same steps but assign the name as “Materials”. We’re going to change the Materials code to look like this:
Next, we’ll change the coding for the materials controller to look something like this:
Deploying our Application
Our final step is the deployment of the application. To do this, we right-click on the MaterialList project name and select Team>Share Project. In the popup that shows up, we’re going to select SAPUI5 ABAP Repository and hit Next. We’ll now be faced with the System Connection prompt. We’ll select the current SAP system, and the fields will populate. We’ll hit Next and enter the BSP Application Details then hit Next. The next screen can be used to define a transport request, but as this is a local project, it’s not needed. We’ll hit Finish and be taken back to our project explorer.
Next, we’re going to right click on index.html context component and in the window that pops up, we will navigate to MaterialList > Team > Submit. Eclipse will then prompt you with a dialog box to verify that all values were successfully submitted. We’ll hit Finish and move to testing.