{"id":5852,"date":"2016-12-19T05:36:00","date_gmt":"2016-12-19T05:36:00","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5852"},"modified":"2016-12-19T05:40:51","modified_gmt":"2016-12-19T05:40:51","slug":"how-to-document-lightning-component","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/how-to-document-lightning-component\/","title":{"rendered":"How to Document Lightning Component"},"content":{"rendered":"

Its extremely important to keep and maintain the documentation of your newly built\u00a0(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.<\/p>\n

We will take example of previous post<\/a>, where I shared source code of Circular Progress Bar Lightning Component.<\/p>\n

First, we will create a new Lightning Component which will have possible examples of using Lightning Component.<\/p>\n

\"Documentaing<\/a>
Documentaing Lightning Component<\/figcaption><\/figure>\n

New Lightning Component – CircularProgressExample.cmp<\/strong><\/p>\n

\r\n<aura:component >\r\n    <c:CircularProgress theme="blue" size="small" totalProgress="100" actualProgress="65" \/>    \r\n    <c:CircularProgress theme="orange" size="medium" totalProgress="100" actualProgress="35" \/>     \r\n    <c:CircularProgress theme="green" size="big" totalProgress="90" actualProgress="24" \/>    \r\n<\/aura:component>\r\n<\/pre>\n
Next step is to go back to actual Lightning Component and open Documentation from resource bundle. We would be using below code in Documentation.<\/p>\n
CircularProgress.auradocs<\/strong><\/p>\n
\r\n<aura:documentation>\r\n\t<aura:description>\r\n        <code>c:CircularProgress<\/code> component can be used to display progress in circular bar format.\r\n    <\/aura:description>\r\n     \r\n\t<aura:example name="Example1" label="Examples of Circular Progress Component" ref="c:CircularProgressExample"> \r\n\t<\/aura:example>\r\n<\/aura:documentation>\r\n<\/pre>\n
You can read Salesforce documentation in detail on how to document Lightning Components<\/a>.<\/p>\n
Now navigate to https:\/\/YourSalesforce-MyDomain-URL\/auradocs<\/a> then Components | c | CircularProgress<\/em>. CircularProgress would be replaced by your Lightning Component name.<\/p>\n
And that’s it, we are all set !!!<\/p>\n","protected":false},"excerpt":{"rendered":"
Demo and Example, showing process of documenting Lightning Component<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[9],"tags":[],"class_list":["post-5852","post","type-post","status-publish","format-standard","hentry","category-salesforce"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":5852,"position":0},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6598,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/read-query-parameter-in-lightning-component\/","url_meta":{"origin":5852,"position":1},"title":"Read Query Parameter in Lightning Component","author":"Jitendra","date":"September 3, 2018","format":false,"excerpt":"Launch Lightning Component using formula field and also read query parameter in Salesforce Lightning Component","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4493,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-collapsible-panel-component-in-lightning\/","url_meta":{"origin":5852,"position":2},"title":"Salesforce  Lightning Component – expand and collapsable panel example","author":"Jitendra","date":"May 22, 2015","format":false,"excerpt":"How to use aura:facet component and Learn creating expand and collapsable reusable lightning component in Salesforce","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Lightning CollapsiblePanel Component - Expanded","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":6176,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/","url_meta":{"origin":5852,"position":3},"title":"Lookup component in Salesforce Lightning","author":"Jitendra","date":"July 6, 2017","format":false,"excerpt":"Salesforce Lightning component in plain JavaScript and SLDS with complete source code","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Lookup Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6496,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/embed-lightning-component-in-flow\/","url_meta":{"origin":5852,"position":4},"title":"Embed Lightning Component in Flow","author":"Jitendra","date":"June 24, 2018","format":false,"excerpt":"How to create a lookup field in Flow by embedding Lightning Component","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Use Lightning Component in Salesforce Flow","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":5109,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-component-for-wikipedia-search\/","url_meta":{"origin":5852,"position":5},"title":"Lightning Component for Wikipedia search","author":"Jitendra","date":"January 6, 2016","format":false,"excerpt":"Initially I thought creating Wikipedia Search component will be straight forward. I can simply use AJAX request from Lightning component to get result from Wikipedia using its REST API. Soon, I discovered about Content Security Policy\u00a0in Lightning components developer guide. If we attempt to use AJAX or REST API in\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Component for Wikipedia Search","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=5852"}],"version-history":[{"count":6,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5852\/revisions"}],"predecessor-version":[{"id":5860,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5852\/revisions\/5860"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}