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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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 !