How to integrate EJ controls in SAP Fiori environment
How to integrate EJ controls in SAP Fiori environment?
The UI development toolkit for HTML5 (SAPUI5) is a user interface technology that is used to build and adapt client applications. To know more, click here
We can integrate Syncfusion EJ controls with SAP Fiori environment. Here, we have used MVC concept of SAP Fiori where this sample figures out the JS Views.
Steps to create SAP Fiori application with EJ controls:
1) Create an HTML page
First create an HTML page and define the meta tags, a script tag to load the SAPUI5 libraries, and a placeholder for the content of the app. Refer to the below code.
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title>EJ controls with SAP Fiori</title> <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"> </script> </head> <body class="sapUiBody" role="application"> <div id="content"> </div> </body> </html>
In the above code, we have specified script tag in order to access the SAPUI5 libraries using CDN link and also mentioned the theme, id etc.
We can use either CDN link or we can specify the path in script tag after installing SAP Fiori framework. For more information, click here.
2) Create views and controller
For creating view, create a javascript file named as Main.view under the view folder and add the following code.
sap.ui.jsview("view.Main", {
getControllerName: function () {
return "view.Main";
},
createContent: function (oController) {
}
});
Likewise, create a javascript file named as Main.controller under the view folder and add the following code in order to create the controller.
sap.ui.controller("view.Main", {});
For more information, refer to the below link for creating views and controller in SAP Fiori.
1)View
3) Refer required scripts and CSS using Syncfusion library
Include the specific theme reference to your HTML file by referring the appropriate ej.web.all.min.css file from an installed location.
Then, refer the external dependent script files which is given below,
- jQuery
- jsrender.min.js
Apart from the above dependent scripts, you need to refer the ej.web.all.min.js file, which contains all the JavaScript components script and globalize library packed together in a minified format from an installed location. Refer to the below code.
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title>EJ controls with SAP Fiori</title> <link rel="stylesheet" href="content/ej/default-theme/ej.web.all.min.css" /> <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"> </script> <script src="scripts/jquery-3.1.1.min.js"></script> <script src="scripts/jsondata.min.js"></script> <script src="scripts/jsrender.min.js"> </script> <script src="scripts/ej/ej.web.all.min.js"> </script> </head> <body class="sapUiBody" role="application"> <div id="content"> </div> </body> </html>
4) Initialize the APP and invoke views in HTML page
Create the app control and define the page that you want be displayed initially. At this point in time, this page does not have any content.
Then, invoke the Main view by using localResources() method.
Using addPage() and PlaceAt() methods, add the pages to the app and place the app in the content area of the HTML file that you have defined inside the body tag earlier. Refer to the below code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>EJ controls with SAP Fiori</title>
<link rel="stylesheet" href="content/ej/default-theme/ej.web.all.min.css" />
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m">
</script>
<script src="scripts/jquery-3.1.1.min.js"></script>
<script src="scripts/jsondata.min.js"></script>
<script src="scripts/jsrender.min.js"> </script>
<script src="scripts/ej/ej.web.all.min.js"> </script>
<script>
sap.ui.localResources("view");
var app = new sap.m.App({ initialPage: "idApp1" });
var view = sap.ui.view({ id: "idApp1", type: sap.ui.core.mvc.ViewType.JS, viewName: "view.Main" });
app.addPage(view);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content">
</div>
</body>
</html>
5) Add the content in view.
Add the below code under createContent() method in order to render DatePicker and Grid controls in SAP environment.
createContent: function (oController) {
var datepicker = '<input id="daterange" type="text" />';
var grid = '<div id="Grid"></div>';
var dateHtml = new sap.ui.core.HTML();
var gridHtml = new sap.ui.core.HTML();
dateHtml.setContent(datepicker);
gridHtml.setContent(grid);
return new sap.m.Page({
title: "Syncfusion EJ Controls",
showNavButton: true,
content: [
dateHtml, gridHtml
]
})
}
Assign the <input> element and <div> element, which acts as a container for ejDatePicker and ejGrid widget to render. Then on using setContent() and sap.ui.core.HTML() method embed it into the SAP application and also we need to return the HTML control in the view to display it using content option, where sap.ui.core.HTML() is used to embed standard HTML in a SAPUI5 control tree and setContent() is used to set the content as byte array into payload.
6) Initialize EJ controls
Finally initialize Syncfusion EJ controls either in <body> section or <head> section of an HTML page as like shown in the below code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>EJ controls with SAP Fiori</title>
<link rel="stylesheet" href="content/ej/default-theme/ej.web.all.min.css" />
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m">
</script>
<script src="scripts/jquery-3.1.1.min.js"></script>
<script src="scripts/jsondata.min.js"></script>
<script src="scripts/jsrender.min.js"> </script>
<script src="scripts/ej/ej.web.all.min.js"> </script>
<script>
sap.ui.localResources("view");
var app = new sap.m.App({ initialPage: "idApp1" });
var view = sap.ui.view({ id: "idApp1", type: sap.ui.core.mvc.ViewType.JS, viewName: "view.Main" });
app.addPage(view);
app.placeAt("content");
//Initializing EJ controls
$(document).ready(function () {
// DatePicker
$("#daterange").ejDatePicker();
// Grid
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#Grid").ejGrid({
dataSource: data,
allowPaging: true,
allowSorting: true,
isResponsive: true,
columns: [
{ field: "OrderID", headerText: "Order ID", width: 75, textAlign: ej.TextAlign.Right },
{ field: "CustomerID", headerText: "Customer ID", width: 80 },
{ field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right, priority: 4 },
{ field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right, priority: 3 },
{ field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right, priority: 2 },
{ field: "ShipCity", headerText: "Ship City", width: 110, priority: 2 }
]
});
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content">
</div>
</body>
</html>
We have created this sample based on this SAP Forum where they have integrated the third party calendar API in SAP application.
You can refer to the following sample.
