+ Start a Discussion
Will SnowWill Snow 

"Iterate On Your Prototype" Challenge not finding code that exists

Hi,

I am on the "Build Better With UX > UX Prototyping Basics > Iterate On Your Prototype" module, and the Challenge for doing:

Add icons to the rest of card titles for the Contacts and Leads to make it clearer for the user which card is which, using the iconName attribute of the lightning:card base Lightning component.
In the Apex Controller, limit the account, contact and lead SOQL queries to return 5 records.

will not find the code I have *definitely* inputted (the icons and listings are showing up in my playground AOK).

The error I get is:

Challenge Not yet complete... here's what's wrong: 
Could not find the iconName code for contacts in the ResultsSection component.


But from my console:
<h2 class="slds-text-heading--medium slds-p-vertical--medium">Contacts</h2>
      <div class="slds-grid">
        <ul class="slds-col slds-size--1-of-1">
          <aura:iteration items="{!v.contacts}" var="contact" indexVar="index">
            <li class="slds-size--1-of-3 slds-show--inline-block">
              <lightning:card variant="narrow" iconName="standard:user" class="slds-m-around--small">
                <aura:set attribute="title">

It is definitely there.

What's going on here?

Thanks.
Alo SenAlo Sen
use iconName="standard:contact" instead.
Gabor Papp 5Gabor Papp 5
THX!
Anne JungeAnne Junge
Hi, unfortunately I get the same error even though I replaced iconName="standard:account" with "standard:contact" everywhere.
It still says: Could not find the iconName code for contacts in the ResultsSection component.

This is my code for the ResultsSection Component

<aura:component controller="SearchResultsController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="accounts" type="Account[]"/>
    <aura:attribute name="contacts" type="Contact[]"/>
    <aura:attribute name="leads" type="Lead[]"/>

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

    <div class="slds-card">
      <h2 class="slds-text-heading--medium slds-p-vertical--medium">Accounts</h2>
      <div class="slds-grid">
        <ul class="slds-col slds-size--1-of-1">
          <aura:iteration items="{!v.accounts}" var="account">
            <li class="slds-size--1-of-3 slds-show--inline-block">
              <lightning:card variant="narrow" iconName="standard:contact" class="slds-m-around--small">
                <aura:set attribute="title">
                  {!account.Name}
                </aura:set>
                <div class="slds-tile slds-p-horizontal--large">
                  <div class="slds-tile__detail slds-text-body--small">
                    <dl class="slds-list--horizontal slds-wrap">
                      <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">Phone:</dt>
                      <dd class="slds-item--detail slds-truncate">{!account.Phone}</dd>
                      <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Website:</dt>
                      <dd class="slds-item--detail slds-truncate">{!account.Website}</dd>
                      <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Third Label">Account Owner:</dt>
                      <dd class="slds-item--detail slds-truncate">{!account.OwnerId}</dd>
                    </dl>
                  </div>
                </div>
              </lightning:card>
            </li>
          </aura:iteration>
        </ul>
      </div>
      <h2 class="slds-text-heading--medium slds-p-vertical--medium">Contacts</h2>
      <div class="slds-grid">
        <ul class="slds-col slds-size--1-of-1">
          <aura:iteration items="{!v.contacts}" var="contact" indexVar="index">
            <li class="slds-size--1-of-3 slds-show--inline-block">
              <lightning:card variant="narrow" iconName="standard:contact" class="slds-m-around--small">
                <aura:set attribute="title">
                  {!contact.Name}
                </aura:set>
                <div class="slds-tile slds-p-horizontal--large">
                  <div class="slds-tile__detail slds-text-body--small">
                    <dl class="slds-list--horizontal slds-wrap">
                      <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">Email Address:</dt>
                      <dd class="slds-item--detail slds-truncate">{!contact.Email}</dd>
                      <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Title:</dt>
                      <dd class="slds-item--detail slds-truncate">{!contact.Title}</dd>
                      <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Third Label">Phone:</dt>
                      <dd class="slds-item--detail slds-truncate">{!contact.Phone}</dd>
                    </dl>
                  </div>
                </div>
              </lightning:card>
            </li>
          </aura:iteration>
        </ul>
      </div>
      <h2 class="slds-text-heading--medium slds-p-vertical--medium">Leads</h2>
      <div class="slds-grid">
        <ul class="slds-col slds-size--1-of-1"> <aura:iteration items="{!v.leads}" var="lead" indexVar="index">
          <li class="slds-size--1-of-3 slds-show--inline-block">
            <lightning:card variant="narrow" iconName="standard:contact" class="slds-m-around--small">
              <aura:set attribute="title">
                {!lead.Name}
              </aura:set>
              <div class="slds-tile slds-p-horizontal--large">
                <div class="slds-tile__detail slds-text-body--small">
                  <dl class="slds-list--horizontal slds-wrap">
                    <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Company:</dt>
                    <dd class="slds-item--detail slds-truncate">{!lead.Company}</dd>
                    <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Email Address:</dt>
                    <dd class="slds-item--detail slds-truncate">{!lead.Email}</dd>
                    <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Third Label">Status:</dt>
                    <dd class="slds-item--detail slds-truncate">{!lead.Status}</dd>
                    <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">Phone:</dt>
                    <dd class="slds-item--detail slds-truncate">{!lead.Phone}</dd>
                  </dl>
                </div>
              </div>
            </lightning:card>
          </li>
        </aura:iteration>
      </ul>
    </div>
  </div>
</aura:component>

My SearchResultsController Apex: (In the Apex Controller, limit the account, contact and lead SOQL queries to return 5 records.)
     public with sharing class SearchResultsController {
     @AuraEnabled
     public static List<Account> getAccounts() {
       List<Account> accounts = [SELECT Id, Name, Phone, Website, OwnerId FROM Account LIMIT 5];
       return accounts;
     }
     @AuraEnabled
     public static List<Contact> getContacts() {
       List<Contact> contacts = [SELECT Id, Name, Phone, Email, Title FROM Contact LIMIT 5];
       return contacts;
     }
     @AuraEnabled
     public static List<Lead> getLeads() {
       List<Lead> leads = [SELECT Id, Name, Company, Email, Status, Phone FROM Lead LIMIT 5];
       return leads;
     }
   }


Can someone help me please? Thanks!!
Tony Gao1Tony Gao1
Try to match account for account, contact for contact, and lead and lead. I did this and it worked. 
Vicki DuongVicki Duong

I was stuck on this too. Reiterating on what I think Tony Gao1 was stating:

 

1. Go to your "ResultsSection.cmp".

 

2. Verify that the Account card section of your code displays the following for your lightning:card base Lightning component​:

<lightning:card variant="narrow" iconName="standard:account" class="slds-m-around--small">

 

3. Verify that the Contact card section of your code displays the following for your lightning:card base Lightning component​:

<lightning:card variant="narrow" iconName="standard:contact" class="slds-m-around--small">

 

4. Verify that the Lead card section of your code displays the following for your lightning:card base Lightning component​:

<lightning:card variant="narrow" iconName="standard:leads" class="slds-m-around--small">

 

I did this and if finally passed. I hope this help you or anyone that is stuck on this.

bhanu_prakashbhanu_prakash
Hi Will,

Hope so you resloved it.
ResultSection Component
<aura:component controller="SearchResultsController" implements="force:appHostable,
                                                                 flexipage:availableForAllPageTypes,
                                                                 flexipage:availableForRecordHome,force:hasRecordId,
                                                                 forceCommunity:availableForAllPageTypes,
                                                                 force:lightningQuickAction" access="global" >
    <aura:attribute name="accounts" type="Account[]"/>
    <aura:attribute name="contacts" type="Contact[]"/>
    <aura:attribute name="leads" type="Lead[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="slds-card">
        <h2 class="slds-text-heading--medium slds-p-vertical--medium">Accounts</h2>
        <div class="slds-grid">
            <ul class="slds-col slds-size--1-of-1">
                <aura:iteration items="{!v.accounts}" var="account">
                    <li class="slds-size--1-of-3 slds-show--inline-block">
                        <lightning:card variant="narrow" iconName="standard:account" class="slds-m-around--small  slds-card_boundary">
                            <aura:set attribute="title">
                                {!account.Name}
                            </aura:set>
                            <div class="slds-tile slds-p-horizontal--large">
                                <div class="slds-tile__detail slds-text-body--small">
                                    <dl class="slds-list--horizontal slds-wrap">
                                        <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">Phone:</dt>
                                        <dd class="slds-item--detail slds-truncate">{!account.Phone}</dd>
                                        <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Website:</dt>
                                        <dd class="slds-item--detail slds-truncate">{!account.Website}</dd>
                                        <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Third Label">Account Owner:</dt>
                                        <dd class="slds-item--detail slds-truncate">{!account.OwnerId}</dd>
                                    </dl>
                                </div>
                            </div>
                        </lightning:card>
                    </li>
                </aura:iteration>
            </ul>
        </div>
        <h2 class="slds-text-heading--medium slds-p-vertical--medium">Contacts</h2>
        <div class="slds-grid">
            <ul class="slds-col slds-size--1-of-1">
                <aura:iteration items="{!v.contacts}" var="contact" indexVar="index">
                    <li class="slds-size--1-of-3 slds-show--inline-block">
                        <lightning:card variant="narrow" iconName="standard:contact" class="slds-m-around--small  slds-card_boundary">
                            <aura:set attribute="title">
                                {!contact.Name}
                            </aura:set>
                            <div class="slds-tile slds-p-horizontal--large">
                                <div class="slds-tile__detail slds-text-body--small">
                                    <dl class="slds-list--horizontal slds-wrap">
                                        <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">Email Address:</dt>
                                        <dd class="slds-item--detail slds-truncate">{!contact.Email}</dd>
                                        <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Title:</dt>
                                        <dd class="slds-item--detail slds-truncate">{!contact.Title}</dd>
                                        <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Third Label">Phone:</dt>
                                        <dd class="slds-item--detail slds-truncate">{!contact.Phone}</dd>
                                    </dl>
                                </div>
                            </div>
                        </lightning:card>
                    </li>
                </aura:iteration>
            </ul>
        </div>
        <h2 class="slds-text-heading--medium slds-p-vertical--medium">Leads</h2>
        <div class="slds-grid">
            <ul class="slds-col slds-size--1-of-1"> <aura:iteration items="{!v.leads}" var="lead" indexVar="index">
                <li class="slds-size--1-of-3 slds-show--inline-block">
                    <lightning:card variant="narrow" iconName="standard:lead" class="slds-m-around--small  slds-card_boundary">
                        <aura:set attribute="title">
                            {!lead.Name}
                        </aura:set>
                        <div class="slds-tile slds-p-horizontal--large">
                            <div class="slds-tile__detail slds-text-body--small">
                                <dl class="slds-list--horizontal slds-wrap">
                                    <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Company:</dt>
                                    <dd class="slds-item--detail slds-truncate">{!lead.Company}</dd>
                                    <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Email Address:</dt>
                                    <dd class="slds-item--detail slds-truncate">{!lead.Email}</dd>
                                    <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Third Label">Status:</dt>
                                    <dd class="slds-item--detail slds-truncate">{!lead.Status}</dd>
                                    <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">Phone:</dt>
                                    <dd class="slds-item--detail slds-truncate">{!lead.Phone}</dd>
                                </dl>
                            </div>
                        </div>
                    </lightning:card>
                </li>
                </aura:iteration>
            </ul>
        </div>
    </div>
</aura:component>

SearchResultsController 
 
public with sharing class SearchResultsController {
     @AuraEnabled
     public static List<Account> getAccounts() {
       List<Account> accounts = [SELECT Id, Name, Phone, Website, OwnerId FROM Account LIMIT 5];
       return accounts;
     }
     @AuraEnabled
     public static List<Contact> getContacts() {
       List<Contact> contacts = [SELECT Id, Name, Phone, Email, Title FROM Contact LIMIT 5];
       return contacts;
     }
     @AuraEnabled
     public static List<Lead> getLeads() {
       List<Lead> leads = [SELECT Id, Name, Company, Email, Status, Phone FROM Lead LIMIT 5];
       return leads;
     }
   }


Mark as resloved if it helps :) :)
Thanks, 
Bhanu Prakash
visit ForceLearn.com 
Colleen ProppeColleen Proppe
Thank you, Bhanu Prakash! Resolved. :) 
bhanu_prakashbhanu_prakash
Hi Collen,

Please close the thread, if the issue is resolved you and mark it best if it helps you

Thanks, 
Bhanu Prakash
ForceLearn.com​​​​​​​