function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
James IveyJames Ivey 

"Iterate On Your Prototype" example not working

I am on the "Build Better With UX > UX Prototyping Basics > Iterate On Your Prototype" module.  I'm following the example in the body of the module (not even at the challenge yet).  

At the very end, the module says: "Ready to see the magic? Go back in your org, refresh your Search Results page. You should see some real data lighting up your prototype."  What I get is an error: "Unknown controller action 'getAccounts'"

All my code is directly copied from the module, but I'll include them here anyway.

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

JS controller:
({
    doInit : function(component, event, helper) {
      helper.getAccounts(component);
      helper.getContacts(component);
      helper.getLeads(component);
    }
  })

JS helper:
({
    getAccounts : function(cmp) {
      var action = cmp.get("c.getAccounts");
      action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
          cmp.set("v.accounts", response.getReturnValue());
        }
      });
      $A.enqueueAction(action);
    },
    getContacts : function(cmp) {
      var action = cmp.get("c.getContacts");
      action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
          cmp.set("v.contacts", response.getReturnValue());
        }
      });
      $A.enqueueAction(action);
    },
    getLeads : function(cmp) {
      var action = cmp.get("c.getLeads");
      action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
          cmp.set("v.leads", response.getReturnValue());
        }
      });
      $A.enqueueAction(action);
    },
  })

Component XML:
<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" 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" 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>

​Aside from formatting the first line of the XML to help me understand it, eveything is directly copied from the module.  No attempt at the challenge yet.

Is the problem that the JS controller and the Apex controller have the same name?  Any thoughts?

Thanks.
Best Answer chosen by James Ivey
James IveyJames Ivey
Hmm...  It's working now.  I didn't change anything.  Last night, salesforce was down for maintenance.  Maybe the problem was on salesforce's side.  Thanks all...

All Answers

Raj VakatiRaj Vakati
Use this code
 
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;
    }
}
 
<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>
      <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">
                <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" class="slds-m-around--small" iconName="standard:contact">
                <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" class="slds-m-around--small" iconName="standard:lead">
              <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>
 
({
  doInit : function(component, event, helper) {
    helper.getAccounts(component);
    helper.getContacts(component);
    helper.getLeads(component);
  }
})
 
({
    getAccounts : function(cmp) {
        var action = cmp.get("c.getAccounts");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.accounts", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
    
    getContacts : function(cmp) {
        var action = cmp.get("c.getContacts");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.contacts", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
    
    getLeads : function(cmp) {
        var action = cmp.get("c.getLeads");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.leads", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
})

 
James IveyJames Ivey
Thanks.  Other than the changes to do the challenge, what's different?
Raj VakatiRaj Vakati
Its same .. You can implement same way
James IveyJames Ivey
Hmm...  It's working now.  I didn't change anything.  Last night, salesforce was down for maintenance.  Maybe the problem was on salesforce's side.  Thanks all...
This was selected as the best answer
Raj VakatiRaj Vakati
cool ! mark it solved!