Blog Categories

Posted by on Mar 15, 2017 in Blog Series, Featured, Learn Salesforce Lightning with Examples, Tutorials | 0 comments

Learn Salesforce Lightning with Examples – Part 5 (Switch Screens Using Lightning Events)

Learn Salesforce Lightning with Examples – Part 5 (Switch Screens Using Lightning Events)

Learn Salesforce Lightning with Examples – Part 5 (Switch Screens Using Lightning Events) is the fifth part of the series – “Learn Salesforce Lightning with Examples” where We would share the key practical examples and experience with lightning.We are focusing on Lightning Components for now.

Background,Blog Contributors and Pre-Requisites

To get started for this blog you need to fulfill all the Pre-requisites mentioned here.In this link,you will also get to know the background and blog contributors for this series.

Switch Screens Using Events

Business Case:

Adam is working as a Senior Application Developer in Universal Containers. Company wants to move their traditional (classic version )recruitment app to lighting. Adam needs to do a Proof of Concept by building a custom lighting component for creating the Candidate’s record into Salesforce. Now that he has created the first ,second and third part which is explained here,He would like to showcase even users know how to switch screens using lightning events.

Solution:

Before getting started,Adam makes sure that he doesn’t miss any pre-requisites mentioned here.Below are the steps Adam takes for creating the solution after completing the pre-requisites.If you have followed my previous blogs,then you just need to update the components and follow these steps.

The demo prepared first selects the position records and then create candidate records and creates a job candidate record.

Adam decides to go via this approach :

  1. Creates two events,one to change screen and another one to get applied position records.
  2. Events are handled at managecandidate.app
  3. These events are registered at the components to create candidate records and display position records.

Create two events

ChangeScreen Event

<aura:event type="COMPONENT" description="Event template">
	<aura:attribute name="loadScreen" type="string" />
</aura:event>

ManageData Event

<aura:event type="APPLICATION" description="Event template">
    <aura:attribute name="selectedPosition" type="list" />
</aura:event>

Update Application and components code

Application : ManageCandidate.app code

<!--
          ** Application Details***
         Name: ManageCandidate
         Type: Lightning Application 
         Purpose: Application to host the lightning components
-->
<aura:application >

    <aura:attribute name="screenName" type="string" 
					default="DisplayPositions"/>
    <aura:attribute name="appliedPosition" type="list" />
    <aura:handler name="changeScreen" 
				  event="c:ChangeScreen" action="{!c.changeScreen}" />
    <aura:handler event="c:ManageData" 
				  action="{!c.getAppliedPositionRecords}" />

    <aura:dependency resource="c:CreateCandidateRecord" />
    <aura:dependency resource="c:DisplayPositions" />
    
    <c:DisplayPositions aura:id="DisplayPositions" class="show"/>
    
    <c:CreateCandidateRecord aura:id="CreateCandidateRecord" 
							 class="hidden" 
							 appliedPosition="{!v.appliedPosition}"/>
       
</aura:application>

Application Controller : ManageCandidateController code

({
	changeScreen : function(component, event, helper) {
		var screenName = event.getParam("loadScreen");
        var oldScreenName = component.get("v.screenName");
        var loadCmp = component.find(screenName);
        if(loadCmp.isValid()){
            loadCmp.set("v.class",'show');

            var loadOldCmp = component.find(oldScreenName);
            loadOldCmp.set("v.class",'hidden');
            component.set("v.screenName",screenName);
        } else {
            console.log('screenName is not valid');
        }
	},
    
    getAppliedPositionRecords : function(component, event, helper) {
        var selectedPosition = event.getParam("selectedPosition");
        console.log('after event'+JSON.stringify(selectedPosition));
        component.set("v.appliedPosition",selectedPosition);
    }
    
   
})

CreateCandidateRecord Component

<!--
DISCLAIMER:
THIS CODE IS PROVIDED BY THE AUTHOR "AS IS" AND ANY EXPRESS OR
IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, 
INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<!--
          ** Component Details***
         Name: CreateCandidateRecord
         Type: Lightning Component 
         Purpose: Component to create records
-->


<aura:component controller="CreateCandidateRecord" 
				implements="force:appHostable,
							flexipage:availableForAllPageTypes,
							flexipage:availableForRecordHome,
							force:hasRecordId,forceCommunity:
							availableForAllPageTypes" access="global" >
    
    <!-- Include Static Resource-->
    <ltng:require styles="/resource/popup" />
    <ltng:require styles="/resource/bootstrap/css/bootstrap.min.css" 
				  scripts="/resource/bootstrap/js/jquery.js,
						   /resource/bootstrap/js/bootstrap.min.js" />
  
    <aura:attribute name="class" type="string" default="show"/>
    <aura:attribute name="appliedPosition" type="list" />
    
    <aura:registerEvent name="changeScreen" type="c:ChangeScreen"/>
    
    <!-- Define Attribute-->
    <aura:attribute name="candidate" type="Candidate__c" 
					default="{'sobjectType': 'Candidate__c',
                         'First_Name__c': '',
                         'Last_Name__c': '',
                         'Email__c': '', 
                         'SSN__c': ''
                       }"/>
    
    <div class="{!v.class +' container-fluid'}">
        <h3>Please Enter The Candidate Information</h3>
        <div class="form-group">
            <label>First Name</label>
            <ui:inputText class="form-control" 
						  value="{!v.candidate.First_Name__c}"/>
        </div>
        <div class="form-group">
            <label>Last Name</label>
            <ui:inputText class="form-control" 
						  value="{!v.candidate.Last_Name__c}"/>
        </div>
        <div class="form-group">
            <label>Email Address</label>
            <ui:inputText class="form-control" 
						  value="{!v.candidate.Email__c}"/>
        </div>
        <div class="form-group">
            <label>SSN</label>
            <ui:inputText class="form-control" 
						  value="{!v.candidate.SSN__c}"/>
        </div>
    </div>
    <div class="{!v.class +' col-md-4 text-center'}">
        <ui:button class="btn btn-default" 
				   press="{!c.create}">Create</ui:button>
    </div>
   
</aura:component>

DisplayPositions Component

<!--
DISCLAIMER:
THIS CODE IS PROVIDED BY THE AUTHOR "AS IS" AND ANY EXPRESS OR
IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, 
INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<!--
          ** Component Details***
         Name: DisplayPositions
         Type: Lightning Component 
         Purpose: Component to display position records
-->
<aura:component controller="DisplayPosition" 
				implements="force:appHostable,flexipage:
							availableForAllPageTypes,
							flexipage:availableForRecordHome,
							force:hasRecordId,forceCommunity:
							availableForAllPageTypes" access="global" >
    <ltng:require styles="/resource/bootstrap/css/bootstrap.min.css" 
				  scripts="/resource/bootstrap/js/jquery-2.js,
						   /resource/bootstrap/js/bootstrap.min.js" />
    <aura:attribute name="lstPositions" 
					type="CommonWrapperClass.DisplayPositionRecords[]" />	
     
    <!-- register event -->
    <aura:registerEvent name="changeScreen" type="c:ChangeScreen"/>
    <aura:registerEvent name="ManageData" type="c:ManageData"/>  
    
    <aura:attribute name="class" type="string" default="show"/>
    
    <!--- on initialization of component init event 
will fire and doInit action will execute-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler name="change" value="{!v.class}" action="{!c.reLoadCmp}"/>

    
      <div class="{!v.class +' container'}">
        <h2>Postions</h2>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th></th>
                    <th>Position</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <!-- TO Check if list is not empty-->
                <aura:if isTrue="{!!empty(v.lstPositions)}">
                    <aura:iteration var="position" 
									items="{!v.lstPositions}" >
                        <tr>
                            <td><ui:inputCheckbox 
									value="{!position.isSelected}"/>
							</td>
                            <td><ui:outputText 
									value="{!position.positionTitle}"/>
							</td>
                            <td><ui:outputText 
									value="{!position.status}"/></td>
                        </tr>
                    </aura:iteration>
                </aura:if>
            </tbody>
        </table>
        <!--newly button added for export records-->
        <ui:button class="btn btn-default" press="{!c.export}">
			Download Selected Records</ui:button>
        <ui:button class="btn btn-default" press="{!c.goToCandidate}">
			Go to Candidate</ui:button>
        
    </div>
    
</aura:component>

Host and test the application

You need to host the component into the application : managecandidate.app

Now just access the app by using the URL in this format : https://{Domain Name}.lightning.force.com/c/{App Name}.app

You will see a screen similar to this where you can select the positions you want to apply.Once applied,you can click on ‘Go to Candidate’ button :

Once clicked,you will get a ‘new candidate’ page.Once selected,you can hit the continue button,you would get a pop up success message :

and hence a candidate record and a Job Application record will be created:

You can also download the code from the github repository here.

Hope you enjoyed the blog!If you have missed any,then you can go and check here for complete series. Stay tuned and there will be more examples to come ..

Post a Reply

Your email address will not be published. Required fields are marked *