function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Vladimir GergievVladimir Gergiev 

How to add documentation to lightning component?

Hello guys,
I wanted to test components but has faced that documentation for component can't be added.
For test i used component created during passing trailhead "Quick Start: Lightning Components (" for documentation was took fragment from "Lightning Components Developer’s Guide" ( p.61
Here is code examples and screenshots:
<aura:component controller="MyContactListController">
	<aura:handler name="init" action="{!c.myAction}" value="{!this}" />
    <aura:attribute name="contacts" type="Contact[]" />
<aura:iteration items="{!v.contacts}" var="contact">
<li class="minli"> <h3>{!contact.Name}</h3> </li>

JS controller:
	myAction : function(component, event, helper) {
		var action = component.get("c.getContacts");
action.setCallback(this, function(data) {
component.set("v.contacts", data.getReturnValue());

        <p>An <code>np:MyContactList</code> component represents an element that executes an action defined by a controller.</p>
        <!--More markup here, such as <pre> for code samples-->
    <aura:example name="myComponentExample" ref="np:myComponentExample" label="Using the np:MyContactList Component">
	<p>This example shows a simple setup of <code>MyContactList</code>.</p>
    <aura:example name="mySecondExample" ref="np:mySecondExample" label="Customizing the np:MyContactList Component">
       <p>This example shows how you can customize <code>MyContactList</code>.</p>

And here are screenshots:

User-added imageUser-added imageUser-added image
What am i doing wrong?
Mark SFMark SF
I'm not completely clear on what you're asking. If you're asking why nothing is showing in the Examples tab, you have to make sure that the ref="np:myComponentExample" in the <aura:example> tag in the <aura:documentation> resource points to a valid component. ref is a reference to a separate, stand-alone component that illustrates the use of this component.

Do you have a np:myComponentExample component, where np is your namespace and myComponentExample is the name of your example component (myComponentExample.cmp) ?
Vladimir GergievVladimir Gergiev
Hi Mark,
Thank you for response and explaining how should work Examples Tab.
But all of my component documentation sections are empty (even attribute section).
Also, i'd tried to follow your advices about Examples tab, but it still empty.
Mark SFMark SF
Can you recheck the source on your MyContactList component as i can't reproduce the attribute not showing up?

Also, when I tried to reproduce this, I see the following in the Dependencies tab:

The source and your screenshots seem to be out of sync.

Can you remove the <aura:example> elements in <aura:documentation> and see whether the <aura:description> shows up in It does for me.
Vladimir GergievVladimir Gergiev
Unfortunately, removing  <aura:example>  doesn't help.
Additionaly, documentation section in is empty for all custom components, even for installed from AppExchange.
Mark SFMark SF
Does MyContactList.cmp work when you add it to an application (.app)?

To isolate the issue, maybe remove controller="MyContactListController" from the .cmp markup and add <p>hello</p> before the <ul> tag. Try and get the component to display in an application and take it from there.

I've run out of ideas if that doesn't help. Sorry.