How to Document Lightning Component

Its extremely important to keep and maintain the documentation of your newly built (and all existing) Lightning component. So that it can be easy to understand and easy to reuse. It will not take much time for your Salesforce Org to flood with Lightning components.

We will take example of previous post, where I shared source code of Circular Progress Bar Lightning Component.

First, we will create a new Lightning Component which will have possible examples of using Lightning Component.

New Lightning Component – CircularProgressExample.cmp

<aura:component >
    <c:CircularProgress theme="blue" size="small" totalProgress="100" actualProgress="65" />    
    <c:CircularProgress theme="orange" size="medium" totalProgress="100" actualProgress="35" />     
    <c:CircularProgress theme="green" size="big" totalProgress="90" actualProgress="24" />    
</aura:component>

Next step is to go back to actual Lightning Component and open Documentation from resource bundle. We would be using below code in Documentation.

CircularProgress.auradocs

<aura:documentation>
	<aura:description>
        <code>c:CircularProgress</code> component can be used to display progress in circular bar format.
    </aura:description>
     
	<aura:example name="Example1" label="Examples of Circular Progress Component" ref="c:CircularProgressExample"> 
	</aura:example>
</aura:documentation>

You can read Salesforce documentation in detail on how to document Lightning Components.

Now navigate to https://YourSalesforce-MyDomain-URL/auradocs then Components | c | CircularProgress. CircularProgress would be replaced by your Lightning Component name.

And that’s it, we are all set !!!