Apex Code Development You need to sign in to do that
Don't have an account?
André Cintra Creating Components trailhead challenge
Hello I'm new to Salesforce and I'm doing the trailhead to learn.
But I'm stuck at this challenge in Lightning Module.
Here's the challenge:
Create a simple Lightning component with a styled headline. The headline must use an H1 tag with a CSS class that enforces a 24px font-size. Make the component available in the Navigation Menu of Salesforce1.The component must be named 'MyLightningComponent'.
The component must include an H1 tag with a CSS class named 'headline'. The 'headline' CSS class must set a font-size of 24px.
The Lightning Component tab that is added to Salesforce1 must be called 'MyLightning'.
And here's what I did:
MyLightningComponent.cmp
<aura:component implements='force:appHostable'>
<div class="headline">
<h1>My Lightning Component</h1>
</div>
</aura:component>
MyLightningComponentApp.app
<aura:application>
<h1>Hello Lightning App!</h1>
<c:MyLightningComponent />
</aura:application>
MyLightningComponent.css
.THIS {
}
.THIS.headline{
font-size:24px;
}
I created the tabs in the Salesforce1 and everithing looks right but I can't pass the challenge because it's aways return a error saying "The component does not include an H1 tag with a 'headline' CSS class"
I do no what to do with this error.
I believe you need to add that class to the h1 tag:
All Answers
I believe you need to add that class to the h1 tag:
<aura:component implements="force:appHostable">
<h1> class="headline">Hello My Lightning Component</h1>
</aura:component>
I wannna create 'MyLightning' tab..so I am not able to select my Lightning page..???
I also faced the same problem .So I created a VisualForce page and include my Lightning component in that and also sectect the checkbox to make it available for Lightning app
And Created vf tab for this.
<aura:component implements="force:appHostable">
<h1 class="headline">Hello Lightning Component!</h1>
</aura:component>
--------------------------------------------------------------------------------------------
MyLightningComponent.css
.THIS .headline
{
font-size:24px;
}
-----------------------------------------------------------------------------------------
Lightning Component Tabs named "MyLightning" is properly created.
------------------------------------------------------------------------------------------
RESULT: Challenge Not yet complete... here's what's wrong:
The component is not using the correct CSS for the 'headline' class
Along with the suggestion provided by Vinoj, one must have a custom domain inorder to see 'Lightning Component Tabs' as one of the option under custom tab. You should be able to add your component then.
If not then the solution provided by Anjali works perfect and should be able to pass the task.
<aura:component implements="force:appHostable">
<div>
<H1>Camping List</H1>
</div>
</aura:component>
2. ComponentList
<aura:component>
<ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>
</aura:component>
3.Create a CSS like campingHeader.css and enter
H1.THIS {
font-size:18pt;
}
4. Add all component to Camping List Lightning Component
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<c:campingHeader />
<c:campingList />
</aura:component>
This worked for me.
Please mark this as best answer
I hope it helps.