Recently, a community member asked how is one able to reference the current running user for replacing a report quick link in classic to be available for lightning. This post sets out to answer that.
The nitty gritty, there is not a User Global Variable, e.x. {$User.Id}, in Lightning components as of yet. The solution requires a few things:
- A little bit of apex
- One super component to get the user information
- One component to get the link information
- One (optional) component for the header (It makes it look nicer so why not add it?)
Here’s what you’ll get:
The Super Component
The super component is an extensible component that allows for reuse of getting the user information. Why would I create this kind of a component? It’s more efficient to have an extensible component that can be used to get this information and pass it through to a child component. For this particular use case, it makes the most sense to use this framework. The component is very simple:
The Component:
<aura:component controller="userController" extensible="true" abstract="true" access="PUBLIC"> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="user" type="User"/> {!v.body} </aura:component>
This has:
- An event that fires on initialization.
- A user attribute
Notice that it has a tag of “extensible” marked as true. This is what allows for it to be used as a component extension.
Something important worth reading about is inherited component attributes, which are documented here.
The Component Controller:
({ doInit : function(component, event, helper) { var action = component.get("c.getUser"); action.setCallback(this, function(response) { var state = response.getState(); if (component.isValid() && state === "SUCCESS") { component.set("v.user", response.getReturnValue()); } else { console.log('There was an error'); } }); $A.enqueueAction(action); } })
This is called on component initialization. When initialized, it will call the getUser method in the userController, which will return the current running user. Once returned, it will set the attribute in the component.
The Apex Controller:
public class userController { @AuraEnabled public static user getUser(){ return [SELECT Id FROM User WHERE Id = :UserInfo.getUserId()]; } }
This controller is very simple. Select the current running user and return the value.
Optional – the header component:
<aura:component > <aura:attribute name="icon" type="Aura.Component[]"/> <aura:attribute name="buttons" type="Aura.Component[]"/> <aura:attribute name="fieldGroup" type="Aura.Component[]"/> <aura:attribute name="recordType" type="String"/> <aura:attribute name="recordTitle" type="String"/> <div class="slds-page-header"> <div class="slds-grid"> <div class="slds-col slds-has-flexi-truncate"> <div class="slds-media slds-no-space slds-grow"> <div class="slds-media__figure"> {#v.icon} </div> <div class="slds-media__body"> <p class="slds-text-title--caps slds-line-height--reset">{!v.recordType}</p> <h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="this should match the Record Title">{!v.recordTitle}</h1> </div> </div> </div> <div class="slds-col slds-no-flex slds-grid slds-align-top"> {!v.buttons} </div> </div> {!v.fieldGroup} </div> </aura:component>
The above component allows for quick creation of page headers. It allows for you to pass in various attributes and will style it to use lightning icons, buttons, etc. In the screenshot above, it is what makes the grey bar with the Home icon and the Quick Links header.
Now, the magic! The Quick Links Component:
<aura:component implements="flexipage:availableForAllPageTypes" extends="c:UserComponent"> <c:pageHeader recordTitle="Quick Links"> <aura:set attribute="icon"> <lightning:icon iconName="standard:home" size="medium" alternativeText="Quick Links" /> </aura:set> </c:pageHeader> <div class="padTop"> <ul> <li><ui:outputURL value="{!'/one/one.app#/sObject/' + v.user.Id +'/view'}" label="Your user record" /></li> <li><ui:outputURL value="{!'/one/one.app#/sObject/00Oo0000005vn8sEAA/view?fv0=' + v.user.Id}" label="My Projects" /></li> </ul> </div> </aura:component>
A few things to point out:
- It implements the flexipage:availableForAllPageTypes interface. This allows for it to be used in the app builder.
- It extends the c:UserComponent. This is what allows for us to avoid duplicating the javascript controller for the super component across a bunch of components (and having to maintain it in multiple places should it change).
- The output urls call the current user with “v.user.Id”. The rest of the urls are static links.
Note: Use the ‘/one/one.app#sObject/’ links versus a classic link (e.x. ‘/’ + v.user.Id). This is because it does a redirect to send it to the lightning compatible page and this took a significantly greater amount of time to get to the final page.
I added a style to the component, because I didn’t want the links getting squished on the header.
.THIS.padTop{ padding-top: 10px; }
This bumps the links down 10 pixels.
That’s it! Do all that and this is what you get!
Thanks for taking the time for coming up with a solution and sharing it. You are most definitely a SFDC Ninja!