Varad
Applications using SAPUI5 have the option to include reusable UI blocks known as Components. These are SAPUI5 applications that are completely working. Put differently, SAPUI5 apps can leverage the notion of Component Containers to contain other SAPUI5 apps. This should be familiar to you if you have experience with SAP Web Dynpro Applications (Component Usage).
Let’s say that it is frequently necessary to display a PDF document within an iframe.
What plan ought we to follow?
creating a stand-alone application for “Displaying PDF in an iframe” and then use it in a variety of other apps as needed. This ought to be our layout! It can be connected to class methods, function modules, or sub-routines (PERFORMs). What purpose do they serve? Reusability.
In a similar vein, there may be situations where downloading and uploading documents is helpful for various applications. Therefore, such a little, independent program can be created independently and used in a variety of other applications.
My goal in this lesson is to walk you through the process of using a single UI5 component in another UI5 application, and more significantly, how to communicate data between the two. We’ll use a straightforward illustration of a Child Component that accepts.
It’s your turn to take the lead.
Prerequisites:
Eclipse is installed on your PC, and you have configured “SAP development for Eclipse” as a new program within your Eclipse installation.
On the SAP front end server you have access to, you can start your SAPUI5 application for testing.
Create a child component (UI application) in step one.
Make a child component that shows the color name on the user interface (UI) and takes the color name as a parameter from the parent application.
Navigate to File->New->Project in Eclipse.
Select “Finish.” In the Eclipse project explorer view, as seen below, a new project will begin to appear.
Select “Finish.” In the Eclipse project explorer view, as seen below, a new project will begin to appear.
DisplayColourView.xml will be opened by default and will wait for developer to write xml code.
Within the content section, you can write xml code to display a name of the Color received as input from Parent component which we will create in the subsequent section of this tutorial.
How to Pass Data from One Component to Another
Three methods exist for transferring data between components.
By means of eventBus
Using a central Model
By means of a Propagate Model
The event bus technique will be used in this tutorial to transfer data between the two components.
Using EventBus
In the DisplayColourView.controller.js onInit() hook method, write the following code.
onInit: function() {
sap.ui.getCore().getEventBus().subscribe("exchange",
"data", function(channel, event, oEventData){
jsonModel = new sap.ui.model.json.JSONModel({
colour : oEventData
});
this.getView().setModel(jsonModel, "myModel");
}, this);
},
For you ABAPers, are the lines of code above Geeky? Please don’t worry; I’m here to help you comprehend every syntactic line. Simply read the section that follows.
By subscribing to an event named “exchange,” we are reading data from the eventBus in the code above. The Parent component will raise this event and provide data to its subscriber. Next, we are assigning the color variable of the JSON Model to the event data. Next, we are naming the JSONModel myModel and specifying its DisplayColourName view.
Gluing
As seen below, we now need to link myModel’s characteristics to the view.
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="DisplayColorName.displaycolorname.DisplayColourView"
xmlns:html="http://www.w3.org/1999/xhtml">
<html:style>
#__xmlview1--id{
margin-left: 39rem;
margin-top: 9rem;
font-size: 10rem;
font-style: italic;
}
</html:style>
<App id="fioricontent">
<Page title="Display Colour Name">
<content>
<Text xmlns="sap.m"
id="id"
busy="false"
busyIndicatorDelay="1000"
visible="true"
fieldGroupIds=""
text="{myModel>/colour}"
textDirection="Inherit"
wrapping="true"
textAlign="Begin"
validateFieldGroup="">
</Text>
</content>
</Page>
</App>
</core:View>
The line \text=”{myModel>/colour}” above—did you see it?
Next, we will create a Component that will contain all of this child application’s functionality. Create a JS file named Component.js in the project’s WebContent subdirectory in order to achieve this, as seen below.
In the Component.js file, write the following code.
sap.ui.core.UIComponent.extend("DisplayColorName.Component", {
metadata: {
"name": "DisplayColorName",
"dependencies": {
"components": []}
},
createContent: function() {
var oViewData = {
component: this
};
var oView = sap.ui.view({
viewName: "DisplayColorName.displaycolorname.DisplayColourView",
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("DisplayColorName");
},
});
Next, we will instruct the application’s index.html file to load Component.js upon execution. When an application project is created, by default, a page entity and an app entity are produced in the index.html file, with the app entity being placed in the file’s body.
In the html body of the index.html file, we must write our code to load Component.js and comment the default generated code. To implement this, see the code below.
<!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.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{"DisplayColorName": "./"}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
//sap.ui.localResources("displaycolorname");
//var app = new sap.m.App({initialPage:"idDisplayColourView1"});
//var page = sap.ui.view({id:"idDisplayColourView1", viewName:"displaycolorname.DisplayColourView", type:sap.ui.core.mvc.ViewType.XML});
//app.addPage(page);
//app.placeAt("content");
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "DisplayColorName"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
We will use this component in another SAPUI5 application after deploying it to the server.Select Project, Team, then Share Project with a right-click.Click Next after selecting SAPUI5 ABAP Repository.
choose System connection
Provide the project a technical name so that it can be used to construct a BSP application within the system.
Make a TR to record the process of starting a fresh SAPUI5 server application.
Send the updated files to the server.
Test after saving and submitting the modifications to the server. The URL below will open in a browser when you right-click on the project and choose Run As->Run on ABAP server.
Output.
Create the Parent Component (the UI application that will consume the Child Component) in Step 2.
Make a parent component that has three buttons: blue, green, and red.The appropriate color name will be sent to the child component upon button click and shown on the child component.
Make a new project named PassColourName for your SAPUI5 application (Parent).
Proceed in the same manner as you did when you created the child component in Step 1. Enter the code below in Component.js.
sap.ui.core.UIComponent.extend("PassColourName.Component", {
metadata: {
"name": "PassColourName",
"dependencies": {
"components": []}
},
createContent: function() {
var oViewData = {
component: this
};
var oView = sap.ui.view({
viewName: "PassColourName.passcolourname.PassColourName",
type: sap.ui.core.mvc.ViewType.XML,
viewData: oViewData
});
return(oView);
},
init: function() {
// call super init (this 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("PassColourName");
},
});
Put the code below in 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.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{"PassColourName": "./"}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
//sap.ui.localResources("passcolourname");
//var app = new sap.m.App({initialPage:"idPassColourName1"});
//var page = sap.ui.view({id:"idPassColourName1", viewName:"passcolourname.PassColourName", type:sap.ui.core.mvc.ViewType.XML});
//app.addPage(page);
//app.placeAt("content");
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "PassColourName"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Write below code in PassColourName.view.xml file
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="PassColourName.passcolourname.PassColourName" xmlns:html="http://www.w3.org/1999/xhtml"> <Page title="Parent Component"> <content> <VBox xmlns="sap.m" id="vboxid"> <items> <Button xmlns="sap.m" id="redid" text="Red" press="clickbutton"></Button> <Button xmlns="sap.m" id="greenid" text="Green" press="clickbutton"></Button> <Button xmlns="sap.m" id="blueid" text="Blue" press="clickbutton"></Button> <core:ComponentContainer id="conpcontid" name="DisplayColorName" manifestFirst="true" component="zdispcolname"> </core:ComponentContainer> </items> </VBox> </content> </Page> </core:View>
Three buttons and a Component container in a vBox are inserted in the Parent Component’s view code above.All of the things in VBOX are arranged vertically.The child component that we constructed in the first instructional step is rendered by the component container. The action handler “clickbutton” is linked to the press event of buttons. Now let’s develop some controller code.
sap.ui.controller("PassColourName.passcolourname.PassColourName", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf passcolourname.PassColourName
*/
onInit: function() {
jQuery.sap.registerModulePath("DisplayColorName", "../zdispcolname");
},
clickbutton:function(oEvent)
{
sap.ui.getCore().getEventBus().publish("exchange",
"data", oEvent.oSource.mProperties.text);
}
The technical name of the Child component, which has already been deployed on the server, is passed to Parent Component in the controller code above during the initialization process. in order for the Parent Component to locate the Child Component at runtime and render it inside the Component Container UI element. We are publishing an event named “exchange” and passing the text of the clicked button in the clickbutton action handler. Child Component has previously subscribed to this event through its onInit() function in its default view.
<core:ComponentContainer id="conpcontid" name="DisplayColorName" manifestFirst="true" component="zdispcolname"> </core:ComponentContainer>
The above piece of code with ComponentContainer in the View and the below line of code in the controller do all the Magic..
jQuery.sap.registerModulePath("DisplayColorName", "../zdispcolname");
Let’s test the Parent Application after deploying it to the server. After deployment, the Parent Application should be accessible at the following URL (substitute your server’s host name for the host name).
Output
When you click the “Green” button, the text “Green” will be sent to the child component and appear as seen below.
Utilizing components may initially seem a little frightening. However, after reading this, you should feel more confident to handle it. At Technicalgyanguru, we often say that something is difficult until you do it for the first time. After you have done it once, the second time is a piece of cake. Make the two aforementioned programs and give it a go, I would advise.
you may be interested in this blog here
Salesforce Roadmap to Success: Mapping Out Your Training Journey
Empowering Your ABAP ALV with Integrated Data Access (IDA) on HANA:…
