You need to sign in to do that
Don't have an account?
Bhaskar Thalvayapati 9
Trailhead lightning components
This is to solve one of the trailhead challenge.
How do we assign multiple values to an attribute by not using default paramenter instead value parameter. For example.
I have a component as below.
<aura:component name="DayOfTheWeek" type="string" value="Monday" : "Tuesday" : "Wednesday">
and I would like to read these values and find the week of the day dynamically, as we have $Browser and $Locale, do we have another binding variable to check on day, date and time values.
Thanks.
How do we assign multiple values to an attribute by not using default paramenter instead value parameter. For example.
I have a component as below.
<aura:component name="DayOfTheWeek" type="string" value="Monday" : "Tuesday" : "Wednesday">
and I would like to read these values and find the week of the day dynamically, as we have $Browser and $Locale, do we have another binding variable to check on day, date and time values.
Thanks.
Using above I have resolved challenge, but my question is different.
From above code snippent, is there a way for "name" DayOfTheWeek attribute how can I assign list of values instead of one value?
and my second question is using aura component how can I validate using day dynamically.
However, this did not pass the challenge check.
here is the code: Please try
<aura:component implements="force:appHostable">
<aura:attribute name="DayOfTheWeek" type="String"/>
<aura:if isTrue="{!v.DayOfTheWeek=='Monday'}">
Today is {!v.DayOfTheWeek}
</aura:if>
</aura:component>
{!$Locale.nameOfWeekdays} gave me a runtime error and I didn't find any example of it's usage.
Even I haven't got any code reference or example for {!$Locale.nameOfWeekdays} as well but I had tried two ways for the assignment.
You could use the code in the following two ways:
1.)
<aura:attribute name="DayOfTheWeek" type="String" default="Monday"/>
<aura:if isTrue="{!(v.DayOfTheWeek == 'Monday') ||
(v.DayOfTheWeek == 'Tuesday') ||
(v.DayOfTheWeek == 'Wednesday') ||
(v.DayOfTheWeek == 'Thursday') ||
(v.DayOfTheWeek == 'Friday') ||
(v.DayOfTheWeek == 'Saturday') ||
(v.DayOfTheWeek == 'Sunday')
}">
<p>Today is {!v.DayOfTheWeek}</p>
<aura:set attribute="else">
Invalid input value.
</aura:set>
</aura:if>
2.)
<aura:attribute name="DayOfTheWeek" type="String" default="Monday"/>
<aura:if isTrue="{!v.DayOfTheWeek != ''}">
<aura:if isTrue="{!v.DayOfTheWeek == 'Monday'}">
Today is {!v.DayOfTheWeek}
<aura:set attribute="else">
<aura:if isTrue="{!v.DayOfTheWeek == 'Tuesday'}">
Today is {!v.DayOfTheWeek}
<aura:set attribute="else">
<aura:if isTrue="{!v.DayOfTheWeek == 'Wednesday'}">
Today is {!v.DayOfTheWeek}
<aura:set attribute="else">
<aura:if isTrue="{!v.DayOfTheWeek == 'Thursday'}">
Today is {!v.DayOfTheWeek}
<aura:if isTrue="{!v.DayOfTheWeek == 'Friday'}">
Today is {!v.DayOfTheWeek}
<aura:set attribute="else">
<aura:if isTrue="{!v.DayOfTheWeek == 'Saturday'}">
Today is {!v.DayOfTheWeek}
<aura:set attribute="else">
<aura:if isTrue="{!v.DayOfTheWeek == 'Sunday'}">
Today is {!v.DayOfTheWeek}
</aura:if>
</aura:set>
</aura:if>
</aura:set>
</aura:if>
</aura:if>
</aura:set>
</aura:if>
</aura:set>
</aura:if>
</aura:set>
</aura:if>
</aura:if>
I passed the trailhead assignment by the second one.
Device: {!$Browser.formFactor}
<br> </br>
<aura:attribute name="DayOfTheWeek" type="String"/>
<ui:inputText aura:id="dayname" label="Day"
value="{!v.DayOfTheWeek}"
required="true"/>
<aura:if isTrue="{!v.DayOfTheWeek != ''}">
<aura:if isTrue="{!v.DayOfTheWeek == 'Monday'}">
Today is {!v.DayOfTheWeek}
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Tuesday'}">
Today is {!v.DayOfTheWeek}
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Wednesday'}">
Today is {!v.DayOfTheWeek}
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Thursday'}">
Today is {!v.DayOfTheWeek}
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Friday'}">
Today is {!v.DayOfTheWeek}
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Saturday'}">
Today is {!v.DayOfTheWeek}
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Sunday'}">
Today is {!v.DayOfTheWeek}
</aura:if>
</aura:if>
</aura:component>
And here is the JavaScript controller that will update the name of the day.
This is my script and I passed the challange
<aura:component >
<aura:attribute name="DayOfTheWeek" type="String" default="Monday"/>
<aura:if isTrue="{!v.DayOfTheWeek == !$Locale.nameOfWeekdays}">
Today is {!v.DayOfTheWeek}
<aura:set attribute="else">
Unkown day!
</aura:set>
</aura:if>
</aura:component>
In most cases it will throw error, cannot evaluate value to DayOfTheWeek.
This is my MOTD.cmp file:
<aura:component >
<aura:attribute name="DayOfTheWeek" type="String" />
{!v.DayOfTheWeek} = {!c.storeDay}
<aura:if isTrue="{!v.DayOfTheWeek == 'Sunday'}">
<h1>Today is Sunday</h1>
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Monday'}">
<h1>Today is Monday</h1>
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Tuesday'}">
<h1>Today is Tuesday</h1>
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Wednesday'}">
<h1>Today is Wednesday</h1>
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Thursday'}">
<h1>Today is Thursday</h1>
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Friday'}">
<h1>Today is Friday</h1>
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Saturday'}">
<h1>Today is Saturday</h1>
</aura:if>
</aura:component>
& i created a controller to evaluate Sunday, Monday....so on like this
This is my MOTDController.js file:
({
storeDay : function(component) {
var days = $A.get("$Locale.nameOfWeekdays");
return (days);
}
})
It worked :)
Component:
Controller:
Below is my code and I Passed the Challenge..
<aura:component >
<aura:attribute name="DayOfTheWeek" type="String" default="!$Locale.nameOfWeekdays"/>
<aura:if isTrue="{!v.DayOfTheWeek == 'Sunday'}">
Today is Sunday
<aura:set attribute="else">
Unkown day!
</aura:set>
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Monday'}">
Today is Monday
<aura:set attribute="else">
Unkown day!
</aura:set>
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Tuesday'}">
Today is Tuesday
<aura:set attribute="else">
Unkown day!
</aura:set>
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Wednesday'}">
Today is Wednesday
<aura:set attribute="else">
Unkown day!
</aura:set>
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Thursday'}">
Today is Thursday
<aura:set attribute="else">
Unkown day!
</aura:set>
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Friday'}">
Today is Friday
<aura:set attribute="else">
Unkown day!
</aura:set>
</aura:if>
<aura:if isTrue="{!v.DayOfTheWeek == 'Saturday'}">
Today is Saturday
<aura:set attribute="else">
Unkown day!
</aura:set>
</aura:if>
</aura:component>
Did you happen to look at the output of your version of the code? True it does pass the challenge but when I view the output using the same logic as you my ELSE condition is executed every time. The Locale.nameOfWeekdays doesn't evaluate as expected.
The component output ends up being:
Bad Day! Monday
Bad Day! Friday
So $Locale.nameOfWeekdays never seems to evaluate to true in this case.
No need for controller or reptitive code, just loops through the built in $locale.nameOfWeekdays value.
You can use the below code it is very simple and small code to pass the challenge.
And also you have to use default parameter to assign the values.
If you face any problem then post it.
Please mark it as best answer if it helps you to fix the issue.
Thank you!
Regards,
Suraj Tripathi.