Apex Code Development You need to sign in to do that
Don't have an account?
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 (https://developer.salesforce.com/trailhead/project/quickstart-lightning-components)" for documentation was took fragment from "Lightning Components Developer’s Guide" (https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf) p.61
Here is code examples and screenshots:
Component:
JS controller:
And here are screenshots:
What am i doing wrong?
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 (https://developer.salesforce.com/trailhead/project/quickstart-lightning-components)" for documentation was took fragment from "Lightning Components Developer’s Guide" (https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf) p.61
Here is code examples and screenshots:
Component:
<aura:component controller="MyContactListController">
<aura:handler name="init" action="{!c.myAction}" value="{!this}" />
<aura:attribute name="contacts" type="Contact[]" />
<ul>
<aura:iteration items="{!v.contacts}" var="contact">
<li class="minli"> <h3>{!contact.Name}</h3> </li>
</aura:iteration>
</ul>
</aura:component>
JS controller:
({
myAction : function(component, event, helper) {
var action = component.get("c.getContacts");
action.setCallback(this, function(data) {
component.set("v.contacts", data.getReturnValue());
});
$A.enqueueAction(action);
}
})
Documentation:
<aura:documentation>
<aura:description>
<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:description>
<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>
<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>
</aura:example>
</aura:documentation>
And here are screenshots:
What am i doing wrong?
Do you have a np:myComponentExample component, where np is your namespace and myComponentExample is the name of your example component (myComponentExample.cmp) ?
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.
Also, when I tried to reproduce this, I see the following in the Dependencies tab:
aura:component
aura:expression
aura:html
aura:iteration
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 reference.app? It does for me.
Additionaly, documentation section in reference.app is empty for all custom components, even for installed from AppExchange.
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.