)
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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

Using Essential JavaScript (EJ) controls with Visualforce

Platform: jQuery |
Control: General |
Published Date: September 26, 2017 |
Last Revised Date: May 10, 2019

Visualforce is the component-based user interface framework for the Force.com platform by Salesforce.com. Syncfusion JavaScript components can be used to create attractive user interfaces within Visualforce. This article provides step by step instructions for creating a sample application hosted in Visualforce and using EJ controls.

 

Step 1: Create HTML application using EJ controls

 

Create an application using Syncfusion JavaScript controls.

Make sure that all HTML tags are closed. 

In the below link, HTML app for Customer Support Analysis can be downloaded. In this sample, we have used ejGrid and ejChart controls.

www.syncfusion.com/downloads/support/directtrac/general/ze/SFSupport1560857258

It includes HTML app and modified HTML file to be embedded with Visualforce page (Static files are referred from Static Resources).

 

Step 2: Make changes in EJ angular directives to make controls workable within Visualforce page

 

Consider the below code snippet of ejGrid. The attribute directives ej-grid, e-columns and e-column are needed for rendering the grid control. Since, the attributes are not assigned with any value, when you paste this code into Visualforce page, it will throw invalid markup exception.

<div id="PortoTopRepresentativeGrid" e-datasource="TopRepresentativeGridData" ej-grid e-allowpaging="true" e-allowsorting="true" e-isresponsive="true" e-enableresponsiverow="true">

<div e-columns>

<div e-column e-field="RepresentativeName" e-headertext="Name" e-textalign="center"></div>

<div e-column e-field="AverageResolutionTime" e-headertext="Time" e-textalign="center"></div>

</div>

</div>

 

                                                                                       

So, as the below snippet, assign some dummy value for those attributes.

<div id="PortoTopRepresentativeGrid" e-datasource="TopRepresentativeGridData" ej-grid='te' e-allowpaging="true" e-allowsorting="true" e-isresponsive="true" e-enableresponsiverow="true">

<div e-columns='t'>

<div e-column='t' e-field="RepresentativeName" e-headertext="Name" e-textalign="center"></div>

<div e-column='t' e-field="AverageResolutionTime" e-headertext="Time" e-textalign="center"></div>

</div>

</div>

 

                                                                                         

Step 3: Upload HTML app dependencies (CSS, JS, Images) into Static Resources

 

There are two ways we can refer static resources in Visualforce pages,                                             

  1. Give CDN link for the resources - We can refer the direct online link
  2. Upload all static files needed for application into Static Resources

   

Steps to upload files,

  1. Create archive file (.zip, .jar) which includes all the required static files
  2. Login into Salesforce site
  3. Click on setup icon in the header

 

upload

 

  1. Click on Static Resources

 

resources

 

  1. Name the file and upload the archive file created earlier

 

file and upload

 

  1. Make changes in the static resource references in the HTML file. In the below code, we are referring resources from ‘staticcontent’ archive file (which we uploaded in previous step).

 

 

<script src="{!URLFOR($Resource.staticcontent, 'jquery.min.js')}"></script>

<script src="{!URLFOR($Resource.staticcontent, 'jsrender.min.js')}"></script>

 

 

Step 4: Create new page

 

  1. Click on Visualforce Pages

 

new page

 

 

  1. Name the page and paste the HTML we have designed into the markup editor

 

 

A screenshot of a social media post

Description generated with very high confidence

 

  1. Save the page   

                               

 

Step 5: View the page

 

Click on preview and you can see the designed page.

 

A screenshot of a computer

Description generated with very high confidence

 

 

 

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

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

Live Chat Icon For mobile
Live Chat Icon