+ Start a Discussion
Bhaskar Thalvayapati 9Bhaskar 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.
sfdcdevsfdcdev
Try this:
 
<aura:component  implements="force:appHostable">
    <aura:attribute name="DayOfTheWeek" type="String"/>
	<aura:if isTrue="{!v.DayOfTheWeek == 'Monday'}">
        Today is {!v.DayOfTheWeek}
       <aura:set attribute="else">
           Today is not Monday!
       </aura:set>
    </aura:if>
</aura:component>

 
Bhaskar Thalvayapati 9Bhaskar Thalvayapati 9
Hi,
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.
Andrey VolosevichAndrey Volosevich
I did it this way, which is not perfect, but I felt was addresssing the actual challenge requirement better. I did the input validation first within the expression and then output the day of the week value.
 
<aura:component implements="force:appHostable">
    <aura:attribute name="DayOfTheWeek" type="String"/>

    <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>
</aura:component>

However, this did not pass the challenge check. 
Daniel Glaser 12Daniel Glaser 12
In Order to pass the challenge you need a aura:if for each day of the week and you can nest them with the <aura:set attribute="else"> . Kinda messy.
Rida Akhtar 9Rida Akhtar 9

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>

ShamanthSureshShamanthSuresh
<aura:component implements="force:appHostable">
	<aura:attribute name="DayOfTheWeek" type="String"/>
    <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>
Walter Ochse (SFDC)Walter Ochse (SFDC)
Did someone user the $Locale property nameOfWeekdays in this challenge? How ist it actually used? 
{!$Locale.nameOfWeekdays} gave me a runtime error and I didn't find any example of it's usage.
Amit GoyalAmit Goyal
Hi All,

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.
 
Somnath SharmaSomnath Sharma
<aura:component implements="force:appHostable" >
    
   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>
JuliaForestJuliaForest
I was able to use $Locale.nameOfWeekdays here is controller:
({
	checkWeekday: function(component) {
            var d = new Date();
            var weekday = $A.get("$Locale.nameOfWeekdays");
            var n = weekday[d.getDay()].fullName;
            component.set("v.DayOfTheWeek", n);
    	    component.set("v.displayMessage", true);
        }
})

 
Esteve GraellsEsteve Graells
Even though the challenge is cleared with a very simple <aura.if> on the value of the attribute DayOfTheWeek against literal 'Monday', I think one better solution is as follows:
  • You declare the attribute and its possible values. This provides the reader with a much clearer idea of what we are looking for
  • You write a controller with provides the name of the day of the week with a simple javascript function (omitted to avoid providing all the challenge code)
  • <aura:if> to get the right literal agains all the possible values
<aura:component >
  <aura:component name="DayOfTheWeek" type="string" value="Monday" : "Tuesday" : "Wednesday" : "Thursday" : "Friday" : "Saturday" : "Monday" >

  <aura:handler name="init" value="{!this}" action="{!c.checkWeekday}" />

  <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"> Unknown day </aura:set>
 </aura:if>

</aura:component>




 
Jérôme HaubryJérôme Haubry
Hi, Simply
<aura:component implements="force:appHostable"  >
    <aura:attribute name="DayOfTheWeek" type="String" default="Monday" />

        <aura:if isTrue="{!v.DayOfTheWeek == 'Monday'}">
               Today is {!v.DayOfTheWeek} 
          <aura:set attribute="else"> ERROR.  </aura:set>
        </aura:if>

</aura:component>

 
Mamadou Diallo 14Mamadou Diallo 14
I think the trailhead challenge was not properly set. The goal was to used <aura:if> and have a dynamic message. We can set a dynamic message based on today date without using <aura:if>. Here is my code:
<aura:component >
    <aura:attribute name="DayOfTheWeek" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.checkWeekday}" />
    Today is {!v.NameOfTheDay}
</aura:component>

And here is the JavaScript controller that will update the name of the day.
({
	checkWeekday: function(component) {
            var d = new Date();
            var weekday = $A.get("$Locale.nameOfWeekdays");
            var n = weekday[d.getDay()].fullName;
            component.set("DayOfTheWeek", n);
        }
})

 
Ai SupartiniAi Supartini
Hi All,

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>
AshuPalAshuPal

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 :)
 

 

 

IshwarIshwar
You have to use controller for the component. Below is my code, its working and it passed the challenge.
Component:
<aura:component implements="force:appHostable">
    <aura:attribute name="DayOfTheWeek" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.checkWeekday}"/>
    <aura:if isTrue="{!v.DayOfTheWeek=='Monday'}">Today is Monday</aura:if>
    <aura:if isTrue="{!v.DayOfTheWeek=='Tuesday'}">Today is Tuesday</aura:if>
    <aura:if isTrue="{!v.DayOfTheWeek=='Wednesday'}">Today is Wednesday</aura:if>
    <aura:if isTrue="{!v.DayOfTheWeek=='Thursday'}">Today is Thursday</aura:if>
    <aura:if isTrue="{!v.DayOfTheWeek=='Friday'}">Today is Friday</aura:if>
    <aura:if isTrue="{!v.DayOfTheWeek=='Saturday'}">Today is Saturday</aura:if>
    <aura:if isTrue="{!v.DayOfTheWeek=='Sunday'}">Today is Sunday</aura:if>
</aura:component>

Controller:
({
	checkWeekday: function(component) {
            var d = new Date();
            var weekday = $A.get("$Locale.nameOfWeekdays");
            var n = weekday[d.getDay()].fullName;
            component.set("v.DayOfTheWeek", n);
        }
})


 
Digvijay ShaktawatDigvijay Shaktawat
Hi,

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>
Tim Johnson 19Tim Johnson 19
Ai,

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.
 
<aura:component implements="force:appHostable">
    <aura:attribute name="DayOfTheWeek" type="String"/>
    <aura:if isTrue="{!v.DayOfTheWeek == !$Locale.nameOfWeekdays}">
        Today is {!v.DayOfTheWeek}        
        <aura:set attribute="else">
            Bad Day! {!v.DayOfTheWeek}          
        </aura:set>
    </aura:if>  
</aura:component>

The component output ends up being:
Bad Day! Monday
Bad Day! Friday
So $Locale.nameOfWeekdays never seems to evaluate to true in this case.
Jackson StoneJackson Stone
Simpler solution with less code: 
 
<aura:component>
    <aura:attribute name="DayOfTheWeek" type="String"/>
	<aura:iteration items="{!$Locale.nameOfWeekdays}" var="item">
        <aura:if isTrue="{!v.DayOfTheWeek == item.fullName}">
        Today is {!v.DayOfTheWeek}       
    	</aura:if> 
  </aura:iteration>
</aura:component>

No need for controller or reptitive code, just loops through the built in $locale.nameOfWeekdays value.