Friday, September 14, 2018

Lightning Component For Timer

I have created a lightning component to display timer. This is useful when you want to display timer to end user so that he/she can understand remaining time.

This component can be used if you are planning to create time tracking app or online exam screen.


Below is complete code snapshot:

Hope this will help!!

Lightning Component for Stopwatch

I have created a lightning component which can work as stopwatch and will display time in "hh:mm:ss" format.



Below is complete code for this lightning component:

Hope this will help!!

Monday, September 3, 2018

lightning:isUrlAddressable Interface: Way to get URL parameters in Lightning Components

In Summer'18 release, Salesforce introduces new interface for lightning components which can be used to fetch URL parameters in lightning components.

Before this, we have to write logic in controller.js function to get current URL and split the url parameters.

If we are using lightning tab and displaying lightning component, then we can fetch URL param by using "{!v.PageReference.state.xxxxx}" where xxxxx is URL parameter name.

I have created a lightning component "SK_URLParamCmp.cmp" in order to explain the usage of this interface. Below is code snapshot:

Now I have created a lightning tab "SK_URLParam_Tab", which will open this lightning component.  Pass any value in URL as "accname" as parameter. Below is sample URL:

"/lightning/n/SK_URLParam_Tab?accname=sunil"

Below is UI snapshot:


Hope this will help!!

Note:

If changes to lightning Components are not reflecting immediately in lightning tabs, then you have to disable the "Enable secure and persistent browser caching to improve performance" option under Caching section in Session settings.

For more details on this setting, please refer below URL:
Improved Performance with Secure Client-Side Caching

Friday, August 24, 2018

Way to get list of Scheduled reports and Jobs from Salesforce

This is very common ask from business admins or end users to get list of schedule reports or schedule jobs (batch jobs, scheduled jobs etc) from Salesforce.

There is no standard view provided by Salesforce to view list of scheduled reports or reports. Users have to navigate to Monitor section under SetUp.


This section display list of jobs either schedule or completed jobs but does not provide complete list of jobs.

By using apex, you get the list of schedule reports or jobs in csv format via email. 

Please find below the apex code for that:


Now if you have to get list of scheduled reports in your org, then just execute below script in developer console:

  • For getting list of scheduled reports:         SK_ScheduleJobUtility.findScheduledJobDetails('Report Run');

  • For getting list of scheduled batch jobs:         SK_ScheduleJobUtility.findScheduledJobDetails('Batch Job');

  • For getting list of scheduled apex jobs:        SK_ScheduleJobUtility.findScheduledJobDetails('Scheduled Apex');


Important Use case

Sometime reports are scheduled by user which becomes inactive, then all system admin start getting email saying:

"The user account that runs the report (the running user) is inactive."

This utility will send email along with user details which will help in identifying all inactive user for whom reports are scheduled as running user.


Hope this will help!!

Looking forward for everyone's comments and feedback.

Monday, August 20, 2018

Creating Lightning Components Dynamically

Through this blog, I will share the approach to create lightning components dynamically by sharing an example in which we will display account summary information by creating summary component dynamically.

I have already posted one blog through which we can create ui:button dynamically and can destroy it. Please refer below URL if you want to refer that before continuing with this blog:

creating or destroying buttons dynamically

Below is snapshot of app which will display recent accounts on left side and on right side, it will display opportunities and case summary for account. You can click on "show Info" link before any account record and its related information will appear on right side dynamically.


Code to create dynamic component

You can use $A.createComponent method which accepts 3 parameters:
  1. ComponentName (String) :Type of component to create like "c:newCmp" etc.
  2. attributes : JSON specify component attributes values
  3. callback function: Once the component is created, this callback function will be invoked.This function can be used to append newly created component to target component. You can place the newly created component inside some div to display.
Below is sample code along with comments to explain steps:

 //find the div markup where you want to display dynamic component
//here "dynamicCmpSection" is aura:id of div
var targetCmp = component.find("dynamicCmpSection");
//create JSON specify all attributes needed for new component
var cmpAttributes = {
                "attribute1": "attribute Value",
"attribute1": "attribute Value"
            }
$A.createComponent(
"c:Demo_DynamicViewCmp", 
cmpAttributes,
function(tempbody) {
//Check if component is valid
if (component.isValid()) {
var targetCmp = component.find("dynamicCmpSection");
//first remove all content inside the div by making its body as null
targetCmp.set("v.body",[]);
var body = targetCmp.get("v.body");
//add newly created component in div
body.push(tempbody);
targetCmp.set("v.body", body);
console.log('***component loaded successfully');
}
}
);

Below is complete code related to snapshot shown in blog.

Hope this Helps!!

Sunday, August 19, 2018

Application Events : Way to Communicate Between Different Lightning Components

Application events are used to communicate between different lightning components. These are different from component events as these are not dependent on containment hierarchy.

Application events behaves similar to standard events. There is no need to register for application event by any component. Any component can fire application event where as in component events, components have to register first in order to fire that event.

Through this blog, I will explain different aspect of using application events:

I have created a lightning app which contains 2 separate components. User is entering some information and sending it to second component by clicking on button.



Below are different steps you need to follow in order to implement application events:

  • Create lightning event "SK_MessagerEvent" of type Application
       <aura:event type="APPLICATION" description="Event template" >    
            <aura:attribute name="msg" type="String" access="GLOBAL"/>                           
       </aura:event>

  • Use below syntax to fire event from lightning component:
        var appEvent = $A.get("e.c:SK_MessengerEvent");
        appEvent.setParams({"msg":component.get("v.ltngUserInput")}); 
        appEvent.fire();

  • Create handler in component which want to consume or catch the information passed using application events.
       <aura:handler action="{!c.handleNotification}" event="c:SK_MessengerEvent" />
  • Create function in controller.js which will get invoked whenever this application event will be fired.
        var sentMessage= event.getParam("msg"); 
        console.log('******sentMessage by app event:'+sentMessage);
        component.set("v.recMsg",sentMessage);

Below is complete code for your reference related to snapshot shown above:


Hope this help!!

More Blogs>>: 
COMPONENT EVENTS: Communicate Between Components in Containment Hierarchy    
INHERITANCE IN LIGHTNING    
FIRING EVENT FROM LIGHTNING COMPONENT AND PASSING IT TO VF PAGE    
CHANGES TO LIGHTNING DATA SERVICE IN SUMMER'17    
LIGHTNING DATA SERVICES    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
FIRE LIGHTNING EVENTS FROM VF PAGE    
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN SALESFORCE LIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT    
CUSTOM COMPONENT TO SHOW/HIDE SPINNER IMAGE