function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jassi Johal 7Jassi Johal 7 

Lightning Component Framework Specialist superbadge step 2

can anyone help me solving the Second step for Lightning Component Framework Specialist super badge.. I struck in that badge.
Amit Singh 1Amit Singh 1
Are you getting any error?
Which error are you getting can you post here?
Regards,
Amit
 
Jassi Johal 7Jassi Johal 7
Challenge Not yet complete... here's what's wrong: 
We couldn't find the BoatSearch component. Make sure you've created the component and that it's named correctly.
Jassi Johal 7Jassi Johal 7
this is the error i am getting
Jassi Johal 7Jassi Johal 7
<aura:component controller="BoatSearchForm" implements="force:appHostable,flexipage:availableForAllPageTypes"  access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="searchOptions" type='String[]' default='All'/>
    <aura:attribute name='searchOptionToIdMap' type='Map' default="{All:''}" />
    <aura:attribute name='showNewButton' type='Boolean' default='false'/>

    <lightning:layout horizontalAlign="center"   >

       <lightning:layoutItem class="slds-grid_vertical-align-center" > 

           <lightning:select aura:id='typeSelect'  label="Please select"  name='selectItem' onchange=''>
             <aura:iteration items='{!v.searchOptions}' var='option'>
                 <option value='{!option}' text='{!option}'></option>
             </aura:iteration>
         </lightning:select>
       </lightning:layoutItem>

       <lightning:layoutItem class="slds-grid_vertical-align-center" > 
         <lightning:button label="Search" variant="brand"  />
         <aura:if isTrue='{!v.showNewButton}'>
            <lightning:button variant='neutral' label='New' onclick='{!c.createBoat}'/>
        </aura:if>
       </lightning:layoutItem>

    </lightning:layout>

</aura:component>

this is code for BoatSearchForm
Jassi Johal 7Jassi Johal 7
({
     doInit: function(component) 
    {
       console.log('inside do init '); 
        debugger;
       var action=component.get('c.getSearchOptions');
        action.setcallback(this,function(response)
         {
             debugger;
             var state = response.getState();
             if (state === "SUCCESS")
             {
                 debugger;
                 console.log('inside success state');
                 component.set('v.searchOptionToIdMap',response.getReturnValue());
                 var custs = [];
                 var conts = response.getReturnValue();
                 for(var key in conts)
                 {
                    console.log('populated list');
                     custs.push({value:conts[key], key:key});
                 }
                 component.set("v.searchOptions", custs);
             }
             
         }); 
    }, 
     createBoat: function (component) 
     {
            console.log('inside controller');
            var createRecordEvent = $A.get('e.force:createRecord');
            if (createRecordEvent) 
            {
                    var typeName = component.find('typeSelect').get('v.value');
                    var typeMap = component.get('v.searchOptionToIdMap');
                    var typeId = null;
                    if (typeName && typeMap && typeMap[typeName]) 
                    {
                            typeId = typeMap[typeName];
                    }
                    createRecordEvent.setParams({
                        'entityApiName': 'Boat__c',
                        'defaultFieldValues': {
                            'BoatType__c': typeId
                        }
                    });
                    createRecordEvent.fire();
            }
       }
})

controller
Ashish Kumar 442Ashish Kumar 442
Hi Team,

I am unable to find the issue in by code to crack the step2. My code is working abslutly fine without any error but when i submit the challenge it keep on showing error message as '
Challenge Not yet complete... here's what's wrong: 
The Friends with Boats Lightning app should have a similar look and feel to the Lightning app page. Make sure it uses lightning:layout and that Lightning Design System styles are available to components in the app.'

Here is my code so far: 
BoatSearchForm.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" controller="BoatSearchResults"> <!--aura:attribute name="options" type="List" /--> <aura:attribute name="selectedType" type="String" default="NEW"/> <aura:attribute name="boats" type="BoatType__c[]"/> <aura:attribute name="renderNew" type="Boolean" default="true"/> <aura:registerEvent name="newBoatEvent" type="c:createNewBoat"></aura:registerEvent> <aura:handler name="newBoatEvent" type="c:createNewBoat" action="{!c.handleNewBoatForm}"/> <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" /> <article class="slds-card slds-m-bottom_large"> <div class="slds-media__body"> <lightning:layout horizontalAlign="center" verticalAlign="end"> <lightning:layoutItem padding="horizontal-medium" > <lightning:select aura:id="boatTypes" label="" name="selectType" onchange="{!c.handleChange}"> <option value="">All Types</option> <aura:iteration items="{!v.boats}" var="item"> <option text="{!item.Name}" value="{!item.Id}" selected="{!item.selected}"/> </aura:iteration> </lightning:select> </lightning:layoutItem> <lightning:layoutItem padding="horizontal-medium" > <div class="slds-button-group" role="group"> <lightning:button class="slds-button" variant="brand" label="Search" onclick="{!c.searchResult}"/> <aura:if isTrue="{!v.renderNew}"> <lightning:button class="slds-button" variant="neutral" label="New" onclick="{! c.handleClick }" /> </aura:if> </div> </lightning:layoutItem> </lightning:layout> </div></article> </aura:component>

 
Ananth RamiahAnanth Ramiah
Hi Ashish, the friedwithboats app component is required to complete the step2, this app is used to launch the similiar lighning page with the seperate url. Below is the APP code i have used to bypass this error. Hope this helps.

FriendswithBoats.app
<aura:application extends="force:slds" >
    <lightning:layout >
    <div class="slds-grid slds-gutters">
  <div class="slds-col slds-size_2-of-3">
    <c.BoatSearch/>
  </div>
  <div class="slds-col slds-size_1-of-3">
    <span>2</span>
  </div>
</div>
    </lightning:layout>
    
    
</aura:application>
sonal gupta 36sonal gupta 36
Hi
I am getting error "Failed to save BoatSearchForm.cmp: Invalid definition for null:BoatSearchForm: null: Source" for BoatSearchForm.comp
Any help?
Please see code below

<aura:component controller="BoatSearchForm" implements="force:appHostable,flexipage:availableForAllPageTypes"  access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="searchOptions" type='String[]' default='All'/>
    <aura:attribute name='searchOptionToIdMap' type='Map' default="{All:''}" />
    <aura:attribute name='showNewButton' type='Boolean' default='false'/>

    <lightning:layout horizontalAlign="center"   >

       <lightning:layoutItem class="slds-grid_vertical-align-center" > 

           <lightning:select aura:id='typeSelect' label='Please select' name='selectItem' >
             <aura:iteration items='{!v.searchOptions}' var='option'>
                 <option value='{!option}' text='{!option}'></option>
             </aura:iteration>
         </lightning:select>
       </lightning:layoutItem>

       <lightning:layoutItem class="slds-grid_vertical-align-center" > 
         <lightning:button label="Search" variant="brand" onclick='{!c.onFormSubmit}' />
         <aura:if isTrue='{!v.showNewButton}'>
            <lightning:button variant='neutral' label='New' onclick='{!c.createBoat}'/>
        </aura:if>
       </lightning:layoutItem>

    </lightning:layout>

</aura:component>
Chinmay KantChinmay Kant

Hi 

I am stuck at Step 2. Getting following error :-
 User-added image

Following are my components :-
 BoatSearchForm.cmp

  <aura:component description="BoatSearchForm"
        controller="BoatSearchFormController"
        implements="flexipage:availableForAllPageTypes">

    <aura:registerEvent name="launchNewBoatForm" type="c:launchNewBoatForm"/>

    <!-- Handle component init in a client-side controller -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="launchNewBoatForm" event="c:launchNewBoatForm" action="{!c.handleNewBoatForm}"/>

    <!-- dynamically load the BoatTypes -->
    <aura:attribute name="BoatTypes" type="BoatType__c[]" />
    <aura:attribute name="selectedType" type="String" default="foo"/>
    <aura:attribute name="renderNew" type="Boolean" default="true"/>

    <article class="slds-card slds-m-bottom_large">
        <div class="slds-media__body">
            <div >

                <lightning:layout horizontalAlign="center" verticalAlign="center">
                    <lightning:layoutItem padding="horizontal-medium" >
                        <lightning:select aura:id="boatTypes" label="Please select" name="selectType"
                                          onchange="{!c.handleChange}">
                            <option value="">All Types</option>
                            <aura:iteration items="{!v.BoatTypes}" var="boatType">
                                <option value="{!boatType.Id}" text="{!boatType.Name}"/>
                            </aura:iteration>
                        </lightning:select>
                    </lightning:layoutItem>
                    <lightning:layoutItem >
                        <div class="slds-button-group" role="group">
                            <lightning:button class="slds-button" variant="brand" label="Search" onclick="{!c.search}"/>
                            <aura:if isTrue="{!v.renderNew}">
                                <lightning:button class="slds-button" variant="neutral" label="New" onclick="{!c.newBoat}"/>
                            </aura:if>
                        </div>
                    </lightning:layoutItem>
                </lightning:layout>
            </div>
        </div>
    </article>

</aura:component>


BoatSearchFormController.js

({
    doInit : function(component, event, helper){
        helper.loadBoatTypes(component);
        var createNewBoat = $A.get("e.force:createRecord");
        if (createNewBoat) {
            component.set("v.renderNew", true);
        }else{
             component.set("v.renderNew", false);
        }
    },

    handleChange : function(component, event, helper){
        console.log(component.find("boatTypes").get("v.value"));
        component.set("v.selectedType", component.find("boatTypes").get("v.value"));
    },

    search : function(component, event, helper){
        var selectedType = component.get("v.selectedType");
        console.log("Search button pressed " + selectedType);
    },

    newBoat : function(component, event, helper){
        var boatTypeId = component.get("v.selectedType");
        console.log("New button pressed " + boatTypeId);
        var requestNewBoat = component.getEvent("launchNewBoatForm");
        if(requestNewBoat){
            requestNewBoat.setParams({"boatTypeId": boatTypeId});
            requestNewBoat.fire();
        }else{
            console.log("Action not supported");
        }
    },

    handleNewBoatForm: function(component, event, helper){
        console.log("handleNewBoatForm handler called.")
        var boatTypeId = component.get("v.selectedType");
        console.log(boatTypeId);
        var createNewBoat = $A.get("e.force:createRecord");
        if (createNewBoat) {
            createNewBoat.setParams({"entityApiName": "Boat__c"});
            if(! boatTypeId==""){
                createNewBoat.setParams({"defaultFieldValues": {'BoatType__c': boatTypeId}})
            };
            createNewBoat.fire();
        }else{
            console.log("Action not supported");
        }
    },
    //more handlers here
})

BoatSearchResults.cmp

<aura:component >
    <article class="slds-card slds-m-bottom_large">
        <div class="slds-media__body">
            <div >
                 <lightning:layout horizontalAlign="center" verticalAlign="center">
                    <lightning:layoutItem padding="horizontal-medium" >
                      Test test
                    </lightning:layoutItem>
                </lightning:layout>
            </div>
        </div>
    </article>
</aura:component>

BoatSearch.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <lightning:card title="Find a Boat"  class="slds-m-top_10px">
        <c.BoatSearchForm/>
    </lightning:card>
    <lightning:card title="Matching Boats">
        <c.BoatSearchResults/>
    </lightning:card>
</aura:component>

FriendswithBoat.app

<aura:application extends="force:slds" >
    <lightning:layout >
    <div class="slds-grid slds-gutters">
          <div class="slds-col slds-size_2-of-3">
            <c.BoatSearch/>
          </div>
          <div class="slds-col slds-size_1-of-3">
            <span></span>
          </div>
    </div>
      </lightning:layout>
</aura:application>

BoatSearchFormController.apxc
public with sharing class BoatSearchFormController
{
    @AuraEnabled
    public static List<BoatType__c> getBoatTypes()
    {
        return [SELECT Id, Name from BoatType__c ORDER BY Name];
    }
}
Manish Anand 22Manish Anand 22
Hi Chinmay,
I am getting the same error. Were you able to get the fix of it?

Thanks,
Manish
SANCHIT MITTAL 9SANCHIT MITTAL 9
Hi Chinmay,

You are getting this error message because of just one small mistake that you have made while instantiating components i.e you have used dot instead of the colon at 3 places. So just replace your code with below code and it will work:-

BoatSearch.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <lightning:card title="Find a Boat"  class="slds-m-top_10px">
        <c:BoatSearchForm/>
    </lightning:card>
    <lightning:card title="Matching Boats">
        <c:BoatSearchResults/>
    </lightning:card>
</aura:component>

FriendswithBoat.app

<aura:application extends="force:slds" >
    <lightning:layout >
    <div class="slds-grid slds-gutters">
          <div class="slds-col slds-size_2-of-3">
            <c:BoatSearch/>
          </div>
          <div class="slds-col slds-size_1-of-3">
            <span></span>
          </div>
    </div>
      </lightning:layout>
</aura:application>

Thanks!
Sanchit Mittal
(Salesforce Developer at Paytm)
Frederick H LaneFrederick H Lane
Thanks for the support. It all worked for me. However, I couldn't get the 3 x apps all visible in the Lightning Page to load in. But I will post this as a separate query.
azrkhnazrkhn
Adding to @Ananth Ramiah's solution, this also works (without the slds classes in Div)

<aura:application extends="force:slds">
    <lightning:layout>
        <c:BoatSearch />
    </lightning:layout>
</aura:application>
Jack 2014Jack 2014
Can anyone please provide me the Event component code also?
Reddeiah R 3Reddeiah R 3
Thanks !Bro
 
 
BraneBrane
This is related to the Lightning page, not the app page.

1. From Setup, enter App Builder in the Quick Find box, then select Lightning App Builder
2. Click New
3. Select App Page and start stepping through the wizard
4. Name your page
5. Select Main Region and Right Sidebar Layout
6. Put the BoatSearch component in the main region
7. Activate the page as a new tab in Lightning Experience and the Salesforce App

Check the challenge again and it will works.
Ian Lin 485Ian Lin 485
Hi all ,just copy the below code...hope it will work well...
BoatSerachFormController.js
<aura:component controller="BoatSearchFormController">
    
    <aura:attribute name="BoatTypes" type="BoatType__c[]" />
    <aura:attribute name="selectedType" type="String"/>
    <aura:attribute name="renderNew" type="Boolean"/>

   
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <article class="slds-card slds-m-bottom_large">
        <div class="slds-media__body">
            <div>
                <lightning:layout horizontalAlign="center" verticalAlign="end">
                    <lightning:layoutItem padding="horizontal-small" >
                           <lightning:select aura:id="boatTypes" label="" name="selectType" onchange="{!c.handleChange}">
                                <option value="">All Types</option>
                                    <aura:iteration items="{!v.BoatTypes}" var="boatType">
                                            <option value="{!boatType.Id}" text="{!boatType.Name}"/>
                                    </aura:iteration>
                            </lightning:select>
                    </lightning:layoutItem>
                    
                    <lightning:layoutItem padding="horizontal-small">
                        <div class="slds-button-group" role="group">
                            <lightning:button class="slds-button" variant="brand" label="Search" onclick="{!c.onFormSubmit}"/>
                                    <aura:if isTrue="{!v.renderNew}">
                                        <lightning:button class="slds-button" variant="neutral" label="New" onclick="{!c.newBoat}"/>
                                    </aura:if>
                        </div>
                    </lightning:layoutItem>
                </lightning:layout>
            </div>
        </div>
    </article>
</aura:component>
.........................................................................................................................................
BoatSearchFormHelper.js
({
    LoadBoatTypes : function(component,event) {
        var action=component.get("c.getBoatType");
       
        action.setCallback(this,function(response) {
            var state= response.getState();
            if(state==='SUCCESS'){
                component.set("v.BoatTypes",response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        $A.enqueueAction(action);
       
    },
   
   
})
......................................................................................................................................
BoatSearch.cmp
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
        <lightning:card title="Find a Boat" class="slds-m-bottom_10px">
            <c:BoatSearchForm aura:id="BoatSearchForm"/> 
        </lightning:card>
        <lightning:card title="Matching Boats">
            <c:BoatSearchResults aura:id="BoatSearchResults"/>
        </lightning:card>
</aura:component>
................................................................................................................................
BoatSerach.css
.THIS.FindBoat {
    margin-bottom:10px
}
......................................................................................................................
BoatSearchResults.cmp
<aura:component >
    <article class="slds-card slds-m-bottom_large">
        <div class="slds-media__body">
            <div >
                 <lightning:layout horizontalAlign="center" verticalAlign="center">
                    <lightning:layoutItem padding="horizontal-medium" >
                      Test test
                    </lightning:layoutItem>
                </lightning:layout>
            </div>
        </div>
    </article>
</aura:component>
................................................................................................................
BoatSearchForm.cmp
<aura:component controller="BoatSearchFormController">
    
    <aura:attribute name="BoatTypes" type="BoatType__c[]" />
    <aura:attribute name="selectedType" type="String"/>
    <aura:attribute name="renderNew" type="Boolean"/>

   
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <article class="slds-card slds-m-bottom_large">
        <div class="slds-media__body">
            <div>
                <lightning:layout horizontalAlign="center" verticalAlign="end">
                    <lightning:layoutItem padding="horizontal-small" >
                           <lightning:select aura:id="boatTypes" label="" name="selectType" onchange="{!c.handleChange}">
                                <option value="">All Types</option>
                                    <aura:iteration items="{!v.BoatTypes}" var="boatType">
                                            <option value="{!boatType.Id}" text="{!boatType.Name}"/>
                                    </aura:iteration>
                            </lightning:select>
                    </lightning:layoutItem>
                    
                    <lightning:layoutItem padding="horizontal-small">
                        <div class="slds-button-group" role="group">
                            <lightning:button class="slds-button" variant="brand" label="Search" onclick="{!c.onFormSubmit}"/>
                                    <aura:if isTrue="{!v.renderNew}">
                                        <lightning:button class="slds-button" variant="neutral" label="New" onclick="{!c.newBoat}"/>
                                    </aura:if>
                        </div>
                    </lightning:layoutItem>
                </lightning:layout>
            </div>
        </div>
    </article>
</aura:component>
.........................................................................................................................
BoatSearchFormController.apxc
public class BoatSearchFormController {

    @AuraEnabled
    public static list<BoatType__c> getBoatTypes(){
        
        return [SELECT Id, Name from BoatType__c];
    }
}
............................................................................
FriendswithBoats.app
<aura:application extends="force:slds">
    <lightning:layout class="slds-grid slds-wrap">
        <lightning:layoutItem flexibility="auto" class="slds-col slds-size_2-of-3">
          
        </lightning:layoutItem>
        <lightning:layoutItem flexibility="auto" class="slds-col slds-size_1-of-3">
          
        </lightning:layoutItem>
    </lightning:layout>
    
</aura:application>