We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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.

 

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.

Note: 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.

 

Likewise, create a javascript file named as Main.controller under the view folder and add the following code in order to create the controller.

 

For more information, refer to the below link for creating views and controller in SAP Fiori.

  1. View
  2. Controller

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.

 

Note: You can use our CDN link or CSG(Custom Script Generator) to access the Syncfusion libraries.

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.

 

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.

Sample

Article ID: Published Date: Last Revised Date: Platform: Control:
7191 01/03/2017 01/04/2017 JavaScript General
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon