Easily Configure Syncfusion JavaScript UI Controls in Salesforce
Tags: javascript, webdev, productivity
Published: 2021-06-07 04:24:00

---
title: Easily Configure Syncfusion JavaScript UI Controls in Salesforce
published: true
date: 2021-06-02 11:30:06 UTC
tags: javascript, webdev, productivity
canonical_url: https://www.syncfusion.com/blogs/post/easily-configure-syncfusion-javascript-ui-controls-in-salesforce.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Easily-Configure-Syncfusion-JavaScript-UI-Controls-in-Salesforce-672x372.png
---

Our Syncfusion [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls "Link to the JavaScript UI controls") suite is the only suite you will ever need to build an application. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. In this blog, we are going to see how to configure Syncfusion JavaScript UI controls in the Lightning component framework to use them in the Salesforce Lightning App Builder tool.

## What is Salesforce?

[Salesforce](https://en.wikipedia.org/wiki/Salesforce "Link to the Wikipedia article on Salesforce") is a cloud computing [software as a service](https://en.wikipedia.org/wiki/Software_as_a_service "Link to the Wikipedia article Software as a service") (SaaS) company that specializes in [customer relationship management](https://en.wikipedia.org/wiki/Customer_relationship_management "Link to the Wikipedia article on Customer relationship management") (CRM). Its services allow business users to use cloud technology to better connect with their customers and partners.

In the [Lightning](https://en.wikipedia.org/wiki/Salesforce#Lightning_Platform "Link to the Lightning platform Wikipedia article") version of Salesforce, we can create custom components and use them in the Lightning App Builder tool which contains everything you need for a custom app, such as custom and standard objects, and custom tabs. It also includes Lightning page tabs and utilities like Lightning Voice.

**Note:** The Lightning Apps Builder tool isn’t available in Salesforce Classic.

## Creating a custom component in Salesforce

To create a custom component in Salesforce, first you need to [log in](https://login.salesforce.com/?locale=in "Link to the Salesforce login page") to your Salesforce account. If you don’t have one, use the [free trial](https://www.salesforce.com/in/form/signup/freetrial-sales/?d=jumbo1-btn-ft "Link to the Salesforce free trail") option. Then, follow these steps:

1. From the Settings option, open the **Developer console** as shown in the following screenshot.  
 ![Open the Developer console option from the settings](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Open-the-Developer-console-option-from-the-settings.png)

1. Then, in the Developer Console window, select **File> New> Lightning Component**.  
 ![In the Developer Console window, select File->New-> Lightning Component](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/In-the-Developer-Console-window-select-File-New-Lightning-Component.png)

1. Now, provide a name (I’m using the name EJ2SalesComponent) and a description for the component. Then, select the following options:
    1. **Lightning Tab**
    2. **Lightning Page**
    3. **Lightning Record Page**

Click the **Submit button**.

![Provide the name as EJ2SalesComponent for the component and select the Lightning Tab, Page and Record Page check boxes](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Provide-the-name-as-EJ2SalesComponent-for-the-component-and-select-the-Lightning-Tab-Page-and-Record-Page-check-boxes.png)

Now, we have created our custom Lightning component in Salesforce and now, let’s proceed with adding Syncfusion JavaScript UI controls to it!

## Adding Syncfusion controls in the custom UI component

If you are new to our JavaScript UI controls, you can find demos and documentation at the following links:

- [JavaScript component demos](http://ej2.syncfusion.com/javascript/demos/ "Link to the Syncfusion JavaScript controls demos")
- [JavaScript component documentation](https://ej2.syncfusion.com/javascript/documentation/ "Link to the Syncfusion JavaScript controls documentation")

To add Syncfusion UI controls in the newly created Lightning component, follow these steps:

1. First, we need to load the required scripts and styles in the static resources. To do so, follow the steps listed in the [Defining Static Resources documentation](https://help.salesforce.com/articleView?id=sf.pages_static_resources_create.htm&type=5 "Link to the Salesforce Defining Static Resources documentation").We recommend you use the Syncfusion [Custom Resource Generator](https://crg.syncfusion.com/ "Link to the Syncfusion JavaScript Custom Resource Generator") (CRG) utility to download the required component scripts and styles. Refer to the [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator/ "Link to Syncfusion JavaScript Custom Resource Generator documentation") documentation page for information on how to use the utility. The following image shows the loaded script and CSS files for the [DataGrid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "Link to JavaScript DataGrid") and [Button ](https://www.syncfusion.com/javascript-ui-controls/js-button "Link to JavaScript Button")components.  
 ![Loaded script and CSS files for the DataGrid and Button components](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Loaded-script-and-CSS-files-for-the-DataGrid-and-Button-components.png) 
2. Next, add the script and style refrence from the static resources to the **EJ2SalesComponent.cmp** (component) file. Refer to the following code example.
```html
<ltng:require scripts="{!$Resource.ej2}" styles="{!$Resource.ej2Css}"
                  afterScriptsLoaded="{!c.doInit}"/>
```
3. Then, add the necessary HTML tags for the controls in the component file. Here, we are going to add the code for the **Button** and **Grid** controls in the **EJ2SalesComponent.cmp** file.
```js
// EJ2SalesComponent.cmp
<aura:component implements="flexipage:availableForRecordHome" access="public">
    <ltng:require scripts="{!$Resource.ej2}" styles="{!$Resource.ej2Css}"
                  afterScriptsLoaded="{!c.doInit}"/>
	<p>EJ2 Components</p>
     <div>
          <hr/>
           <h1>Grid Component</h1>
         <div id='grid'></div>
         <h1>Button Component</h1>
        <button id=’btn’>
        </button>        
    </div>
</aura:component>
```
4. Now, add a controller page (EJ2SalesComponentController.js) by using the right sidebar. Refer to the following screenshot.  
 ![Add the controller page EJ2SalesComponentController.js by using the right sidebar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Add-the-controller-page-EJ2SalesComponentController.js-by-using-the-right-sidebar.png)
5. The following control intializes the DataGrid and Button UI controls in the  **controller.js** file.
```js
// EJ2SalesComponentController.js
({
	doInit : function(component, event, helper) {
        // dataSoruce for Grid
        var data = [{ OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, OrderDate: new Date(8364186e5) },
            { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61, OrderDate: new Date(836505e6) },
            { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83, OrderDate: new Date(8367642e5) },
            { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34, OrderDate: new Date(8368506e5) },
            { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3, OrderDate: new Date(8367642e5) },
            { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17, OrderDate: new Date(836937e6) },
            { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98, OrderDate: new Date(8370234e5) },
            { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33, OrderDate: new Date(8371098e5) },
            { OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97, OrderDate: new Date(837369e6) }];
        //control intialization
        var Button = new ej.buttons.Button({content:'snm',cssClass:'e-primary'},'#snm');
        var Grid = new ej.grids.Grid({dataSource: data},'#grid')
	}
})
```
6. Now, the custom UI Lightning component with Syncfusion UI controls is created and ready to be used in the Lightning App Builder tool. We can test the created component in the developer console itself using the Lightning App Builder. To do this, you need to create your own Lightning App and add the reference for the component as shown in the following code example.
```html
<aura:application >
  <c:EJ2SalesComponent />
</aura:application>
```
7. After that, click the **Preview** button in the right pane.  
 ![Click the Preview button in the right pane](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Click-the-Preview-button-in-the-right-pane.png)

1. Then, the preview of the component will be loaded in the browser like in the following screenshot. Here, we can verify the component structure and alignment.  
 ![Configuring JavaScript UI controls in Salesforce](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Configuring-Syncfusion-JavaScript-UI-Controls-in-Salesforce.png)

1. To use the custom Lightning UI component as a tab or within a page, refer to the instructions provided in the [Add Lightning Components as Custom Tabs in a Lightning App documentation](https://help.salesforce.com/articleView?id=sf.aura_add_cmp_lex.htm&type=5 "Link to Add Lightning Components as Custom Tabs in a Lightning App documentation").

Now, we have succesfully configured the Syncfusion JavaScript DatGrid and Button UI controls into the newly created custom Lightning component in Salesforce.

## Conclusion

I hope you now have a clear idea of how to create a custom Lightning UI component with Syncfusion [JavaScript UI controls ](https://www.syncfusion.com/javascript-ui-controls "Link to the JavaScript UI controls")in Salesforce. We look forward to you trying out this integration and providing your feedback in the comments section below.

Syncfusion has 1,600 components and frameworks for [WinForms](https://www.syncfusion.com/winforms-ui-controls "Link to the WinForms UI controls"), [WPF](https://www.syncfusion.com/wpf-ui-controls "Link to the WPF UI controls"), [WinUI(Preview)](https://www.syncfusion.com/winui-controls "Link to WinUI controls"),  ASP.NET([Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls "Link to the ASP.NET Web Forms UI controls"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls "Link to the ASP.NET MVC UI controls"), [Core](https://www.syncfusion.com/aspnet-core-ui-controls "Link to the ASP.NET Core UI controls")), [UWP](https://www.syncfusion.com/uwp-ui-controls "Link to the UWP UI controls"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/ "Link to the Xamarin UI controls"), [Flutter](https://www.syncfusion.com/flutter-widgets "Link to the Flutter widgets"), [JavaScript](https://www.syncfusion.com/javascript-ui-controls "Link to the JavaScript UI controls"), [Angular](https://www.syncfusion.com/angular-ui-components "Link to the Angular UI controls"), [Blazor](https://www.syncfusion.com/blazor-components "Link to the Blazor UI controls"), [Vue](https://www.syncfusion.com/vue-ui-components "Link to the Vue UI controls"), and [React](https://www.syncfusion.com/react-ui-components "Link to the React UI controls"). As proven in this blog post, you can also integrate these UI components into Salesforce and build astonishing customer relationship management apps!

For existing Syncfusion customers, the newest version of our components is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our available features. You can also try our samples from this [GitHub](https://github.com/syncfusion "Link to the Syncfusion examples on GitHub") location.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/javascript "Link to Syncfusion JavaScript Feedback Portal"). We are always happy to assist you!

If you liked this blog post, we think you’ll like the following articles too:

- [How to Design an Interactive Dashboard for COVID-19 Updates in JavaScript](https://dev.to/syncfusion/how-to-design-an-interactive-dashboard-for-covid-19-updates-in-javascript-4jpb "Link to the article How to Design an Interactive Dashboard for COVID-19 Updates in JavaScript") [Blog]
- [Designing Airfare Calendar – Pure JavaScript Scheduler](https://www.syncfusion.com/blogs/post/designing-airfare-calendar-using-pure-javascript-scheduler2.aspx "Link to the article Designing Airfare Calendar – Pure JavaScript Scheduler") [Blog]
- [Visualize Election Results Using JavaScript Tree Map](https://www.syncfusion.com/blogs/post/visualize-election-results-using-the-javascript-treemap-control-in-essential-js-2.aspx "Link to the article Visualize Election Results Using JavaScript Tree Map") [Blog]
- _[Neural Networks with JavaScript Succinctly](https://www.syncfusion.com/ebooks/neural-networks-with-javascript-succinctly "Link to the eBook Neural Networks with JavaScript Succinctly")_ [Ebook]