How to integrate EJ controls in SAP Fiori environment?
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.
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.
2) Create views and controller
For more information, refer to the below link for creating views and controller in SAP Fiori.
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,
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.
5) Add the content in view.
Add the below code under createContent() method in order to render DatePicker and Grid controls in SAP environment.
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.
You can refer to the following sample.
This page will automatically be redirected to the sign-in page in 10 seconds.