combine_images1

Hi Folks ! I have just published a Lightning Component on Appexchange. As you all know Lightning components are slowly growing in numbers on the Appexchange and I can see that a few years (maybe months ?) down the line, they are going to be the dominant apps in the Salesforce Appexchange. It comes quite handy for many organizations to simply pull out something that’s already present in the Appexchange rather than re-inventing the wheel again. So, let me help you walk through this process of building a component to publishing it on Appexchange for the Component that I have already published.

I have written a couple of posts in the past explaining how to build Lightning components. Most of them were pretty simple ones. How about building a component that renders a Chart ? So, below is the use case for this component.

Business Use Case: ABC company has recently enabled their Lightning Experience interface to all it’s users. They would now like to add a component to their homepage, that would display a chart of all the activities that are assigned to the logged in user over a fortnight (one week behind and one week ahead of the logged in date).

Solution: There are many ways to accomplish this, the easiest being to build a report chart and adding it to a custom home page that can be created using the App Builder. However, I would go with the approach of building a custom Lightning component for the same, simply for the reason being that I would like to get my hands dirty with Lightning ! Moreover, I would also like my chart to show some special effects so that it stands out of the home page and can quickly garner the user’s attention.

Lightning components can easily accommodate almost all the Javascript frameworks and libraries out there. So I picked up the Chart.js library to build this chart. You simply have to upload the library and refer the chart in your component. An Apex class can easily aggregate all the tasks that are assigned to the logged in user over a time frame of 2 weeks, group them by status and return the data to a component. Now, let’s see how to do this step by step.

Pre-Requisites 

Create and Deploy My Domain  – This is one of the most important requirements to build Lightning components as you cannot really run Lightning components in your organization unless you have My Domain deployed. Please check the below link to find the details about My Domain Deployment.

https://help.salesforce.com/articleView?id=domain_name_overview.htm&type=0

Setup a Namespace – This is not a requirement for a Lightning Component. However, it becomes mandatory when you want to create a managed package of your component and deploy it on Appexchange. The below link should help you setup the namespace for your org. Note that you need to setup namespace before you start writing the actual code as you will need to include the namespace in several parts of your code.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/namespaces_creating.htm

Step 1 – Apex Class

We would first need a wrapper class to capture the data that we would group by using the aggregate functions in SOQL. So our wrapper class would simply look like this. Note that you will need to add the @AuraEnabled annotation to all the variables and methods that would be exposed to the Lightning component.

a1

We can now write our next class whose job is to simply group the task data only for the logged in user. The class will look like this. Ensure that you follow the best practices to write Apex code because the applications published on Appexchange go through a very stringent security review process and your application will not pass the review if the best practices were not followed or if the security team finds any security vulnerabilities in your code. We need to ensure that the Apex class fetches data only from objects and fields that are accessible to the logged in user. I have ensured this using Schema.sObjectType as seen in the below snippet. I believe that the rest of the code is self explanatory for a novice Apex developer.

a2

 

Step 2 – Chart.js Static resource

The next step is to download the Chart.js library and upload it as a static resource. I have used an older version of the library for this which is version 1.0.1. The library can be download from http://www.chartjs.org. Now simply upload it as a static resource in your org.

Step 3 – Lightning Component

We are now ready with an Apex class which can fetch the data and a Javascript library which can render it in the form of a chart. All that we are left now with is to connect them both together with a Lightning component. So, below is the Lightning component which I had developed. You may notice that the component looks pretty plain. That’s because all it does is render the Chart. I have used the canvas tag which is where the Chart would be rendered. The component also implements the force:appHostable and flexipage:availableForAllPageTypes interfaces so that the component can be used in the Lightning App Builder as well in a  Lightning Component tab. The attribute defined is nothing but an instance to the wrapper class which we defined sometime back.

a3

Now, let’s take a look at the Client-side Controller of this component.  The below class simply calls the Apex method in the class that we defined and returns the aggregate values of the Task records.

l8

Now, that we have the data fetched through the Apex class, we just have to render the chart using the methods in the Chart.js library. Note that we will have to do this using the renderer property of the component as it’s not a good practice to change the DOM within the controller. It’s still fine to read the DOM within the controller. So, here goes the snippet of the renderer which modifies the DOM and displays the chart.

l10

I have also written a client-side helper that generates a random color code to be displayed on each of the slices of the doughnut as I didn’t want to keep the color code static. The helper is as shown below.

l11

That’s it ! That was all about the coding efforts required to build this component.

Step 4 – Review and test your Component

This is the most important phase of publishing an application on Appexchange. You need to ensure that your code is flawless and does not expose any security vulnerabilities. There are several articles and tools that will help you with this process. You must visit the Force.com Security Resources Center to ensure that your code doesn’t expose any pitfalls.

The tools like Web Application Scanner (ZAP) and CheckMarx – Security Code Scanner are some of the best tools recommended by Salesforce to conduct the review process yourself. These tools will definitely show up some of the loopholes in your code which you can fix up before you submit the code for security review.

Step 5 – Create a managed package 

Once you have fixed all the bugs in your component, you can proceed with package creation of your application. Click Here to see the detailed steps on creating a package in Salesforce. The managed package must include all the components and setups that are required to run your application.

Step 6 – Submit for Security Review

This is one of the most crucial steps. Login to your partner account in Salesforce if you already have one or sign up here to become an ISV partner. Then connect the Developer org in which you have created your managed package and create a listing for your managed package. The listing that you create at this point would be private which means it will not be visible on Appexchange. You will then see an option to Submit the package for Security Review. Click on it and you would have to answer several questions related to your application before you successfully submit. Once you have submitted, you might have to wait for 6-8 weeks depending upon the size of your application  to successfully pass the review. If the security review team finds any issues with your application, they will reject it and list out the issues. You will have to fix those issues and re-submit your application.

Step 7 – Publish it on Appexchange

Once the package had successfully passed the security review process, you will see an option to publish your component on Appexchange. Hit that button and your component becomes publicly listed on the Appexchange for the world to use it ! Below is the link to the above Appexchange component which is publicly listed on Appexchange.

Install Lightning Activity Chart

Step 8 – Install and use the Appexchange Component

I had written a post in the past explaining how to install and use lightning components from Appexchange. Click here to see how to use this Component !

Advertisements