Are you looking for a way to open a lightning component in a new tab/window on detail page button click?

While working on a lightning component development, I found that there is no standard way to open a lighting component in a new tab. You can find the same problem being asked on developer forums.

So, to be honest there is no standard way to achieve this behavior. I used a workaround to get this done in a project. I thought it’s good to share it if someone is looking for a way. I will divide this into 3 simple steps.

1. Create a New Lightning Component Tab

In order to create a new Lightning Component Tab, please follow these steps.

  • Navigate to Setup and then Tabs.
  • Click on New button in Lightning Component Tab section.

pvzyfs0wteqpgztn1grmha

  • We will need the tab name for the URL which we are going to use for the button.
2. Create a New Button
  • Create a Detail Page button with “Display in new window” behaviour.
  • Button or Link URL
    /one/one.app#/n/tab_name
    
    After URL UPDATE Use the following 
    /lightning/n/tab_name
    

    tab_name is the Tab name which we created in the previous step. Additionally, you can add parameters to the URL. For example – Case record Id

    /one/one.app#/n/New_Case?id={!Case.Id}
    
    After URL UPDATE Use the following 
    /lightning/n/New_Case?id={!Case.Id}
  • Add this button to the page layout under Salesforce1 and Lightning Experience Actions from available Salesforce1 and Lightning Actions.
3. Get the passed Id in the URL

Now, here is the tricky part. Above 2 steps are enough if you don’t want to get the Id passed in the parameter. force:hasRecordId doesn’t work in this scenario. In order to get the passed Id or any other parameter, you will have to do some code in the lightning component which is being displayed in the new page. I did the following things to get the URL parameter.

  • Added an event handler which will be fired when the component gets loaded.
Component Code
<aura:attribute name="recordId"
                    type="String"
                    description="ID of the record."/>

<aura:handler name="init"
			  value="this"
			  action="{!c.doInit}"/>
Client-side controller code
doInit : function(component, event, helper) {

	var recordId = helper.getParamValue('New_Case', 'id');
	component.set('v.recordId', recordId);

}
Client-side helper JS code
({
	getParamValue : function( tabName, paramName ) {

		var url = window.location.href;
		var allParams = url.substr(url.indexOf(tabName) + tabName.length+1).split('&amp;amp;amp;');
		var paramValue = '';
		for(var i=0; i&amp;amp;lt;allParams.length; i++) {
			if(allParams[i].split('=')[0] == paramName)
				paramValue = allParams[i].split('=')[1];
		}
		console.log(paramValue);
		return paramValue;
	}
})

That’s all you need to achieve this functionality. Please comment your questions in case of any doubt/clarification.

UPDATE

If you have enabled the “NEW URL FORMAT” update in your org then you will have to update URL in the tab as per new format.

critical_update_screenshot_cptaqo

Difference

Old URL – /one/one.app#/n/tab_name

New URL –  /lightning/n/tab_name

 

Reference

Here’s What You Need To Know About The New URL Format For Lightning

Jquery Datepicker in Lightning Components for better control on behaviour of Datepicker

Having trouble with and components? Then why don’t you use Jqyery Datepicker?

Jquery datepicker gives a lot of flexibility and freedom to developers to let them use a datepicker as per business needs. A developer can enforce validation on dates and date range which is very hard to impose using these out-of-the-box components as they rely on HTML5 input element.

Following component is using the jquery datepicker to get the date of birth from users.

NOTE –

In the above example, I used an old version of jquery which is jquery-2.2.4 due to LockerService bug. LockerService’s SecureWindow does not support a ‘hasOwnProperty’ method which is being used in the latest versions of the jQuery library.

Preview

20171006-021715_capture

Salesforce Cookies #3

If there is a need of scheduling an apex job or schedulable apex class after each hour then cron expression is the best way. Cron expression allows you to schedule a job on a specific time. Following cron expression runs a job after each hour of the day.

scheduledJob j = new scheduledJob();
String sch = '0 0 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23 ? * *';
System.schedule('My Job', sch, j);
Cron expression is built with following parameters - 
Seconds Minutes Hours Day_of_month Month Day_of_week Optional_year

You can Special Characters in a Cron expression such as running a job only on weekdays after each 4 hours then following Cron expression will be used.

scheduledJob j = new scheduledJob();
String sch = '0 0 0,4,8,12,16,20 ?  MON-FRI';
System.schedule('My Job', sch, j);

For more details you can check the Salesforce Article.

 

Salesforce Cookies #2

Now using Lightning Design System in Lightning Application is easier – No static resource is required to include CSS files. An application automatically gets Lightning Design System styles and design tokens if it extends force:slds.

Same behaviour can be accomplished in Visualforce pages with the help of apex:slds component. Include  /> in a Visualforce page to use Lightning Design System stylesheets in the page.

Salesforce Cookies #1

Accessing record ID in the Lightning component is very simple. Just use following things.

  1. Implements force:hasRecordId interface in the component as follows.
    <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
  2. Define an aura:attribute as follows.
    <aura:attribute name="recordId"
     type="String"
     description="The ID of the record to be displayed. Provided by force:hasRecordId interface."/>