Lightning

Displaying Static Resources Using Lightning Components

Over the past few years I have used Visualforce to customize certain aspects of the Salesforce UI. A typical customization would be to display a logo or other image, stored as a static resource, on a home page or custom landing page. The code for this is only a couple of lines long and looks something like this:

Visualforce Code Sample:

<apex:page >  
   <apex:image id="adminLogo" value="{!$Resource.AwesomeAdmin}" height="200" style="display: block; margin: auto; width: 80%;"/>
</apex:page>

The introduction of customizable home pages during the Salesforce Summer ‘16 release opened up a host of other options for UI customization and fueled my curiosity over how the existing Visualforce would function in Lightning.   

Exposing Visualforce in Lightning Experience

My first approach was to use Lightning App builder to include a Visualforce Lightning Component on the home page. This standard component provides a few configurable options that allow Admins and App Builders a no-code approach to expose Visualforce in Lightning Experience.
visualforce-in-app-builder

One caveat here is that Visualforce pages exposed in Lightning must have the ‘Available for Salesforce mobile apps and Lightning Pages’ attribute enabled. 

visualforce-page

While this approach ‘technically’ works as a means to re-use Visualforce components in Lightning, there are a few drawbacks in terms of styling. The standard Visualforce Lightning Component appears to include a mandatory label that prints on the page, occasionally adds an annoying scroll bar, and (this may have been my CSS) a bit of distortion to the image.  I was able to fix the scroll bar issue by clearing the height value of the component but this added extra white space that is mostly wasted in the new home page.  Here is an example of this in action:

visualforce-in-home-page

Ideally, I would be able to reduce the size of the logo and remove much of the wasted space. The limited options exposed in the standard Visualforce Lightning Component didn’t provide any relief and I started tweaking style settings in the Visualforce page. This got me part of the way there but resulted in undesired changes for those users still operating in Classic.  I would have to either deal with the poor formatting or migrate this Visualforce page to a Lightning component.

Creating the Lightning Component

With a bit of time (about than 30 minutes) and some help from the “Lightning Design System” module in Salesforce Trailhead I was able to re-implement the original Visualforce page as a native Lightning Component.  If you haven’t spent much time looking at creating your own Lightning Components then it is definitely worth the investment to dive into the modules listed in the “Develop for Lightning Experience” trail on Trailhead.

developer-console

The process to create a new Lightning Component is really very short and it starts with the Salesforce Developer console.

You can get to this in Lightning by clicking the Setup menu from the top menu and selecting “Developer Console”

 

Once in the Developer Console, Click File > New > Lightning Component

newlightningcomponent

Provide a name and description for the bundle and click Submit to create the component.

lightningbundlename

The Developer Console page will update and bring you to the code view of the new component.

Component Code

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <img id="awesomeAdmin" src="/resource/AwesomeAdmin"  />
</aura:component>

Style

.THIS {
    display: block; margin: auto; width: 40%;
}

In order for the new component to appear in Lightning App Builder, it must have the ‘implements=”flexipage:availableForAllPageTypes”’ value in the <aura> tag. The only other configuration needed is to specify the name of your static resource in the SRC attribute of the IMG tag.  

In this case it was necessary to add a bit of CSS to the component. This allowed for better formatting of the image position and size.  The CSS code for components is added to the ‘STYLE’ section of the Lightning bundle and will look like this:

 

Add the component code and relevant CSS to the bundle and then Save the changes. 

Adding the Component to the Home Page

Return to the Home page and use the ‘Edit Page’ entry from the Setup menu in the upper right.  This will launch the Lightning App Builder and display a preview of the existing home  page. The newly created component will be displayed in the Custom section of the Lightning Components menu off to the left of the screen.

appbuilder-addlightningcomponent

Drag the new component from the menu on the left and dropping it in the desired place on the page. The preview pane will update and show you the static image that you defined when the component was built.

Save the changes to the page and use the Back button to see it in action.  

lightningcomponentonhomepage

The logo now looks much cleaner and eliminates the wasted white space introduced by the Visualforce component.

This shows a very limited example of what can be done with Lightning Components. For additional information on component options and best practices be sure to check out the Salesforce Lightning Component Developer Guide.

 

Advertisements