Custom Lightning Page Template / Layout

In this blog, I would like to discuss you about how to create a custom lightning page template or layout using SFDX.

Create Lightning component

Lightning component resides inside a lightning project so create a project and follow the below steps. If you are not aware of project creation then go through my blog.

  • Create a lightning component in Visual Studio Code
    • sfdx force:lightning:component:create -n <component name> -d <location>
    • Modify the design page to show the custom attribute in the layout selection or page layout editor

Push Code into scratch Org

  • Create a scratch org
    • sfdx force:org:create -s -f config/project-scratch-def.json -a <alias name>
  • List all connected orgs including scratch org with Visual Studio Code
    • sfdx force:org:list –all
  • finally, push the code into scratch org created

Create a page named My Bike  in the Lightning App Builder.

  • Go to setup –> Lightning App Builder -> New
  • Select App Page in the options
  • Then, fill the field with your Page name and click Next
  • Select your custom or standard layout
  • Our custom three column layout displayed under Custom section
  • Then, Click Finish button to include the custom or standard component in the layout
  • Click Save and Activate your page to the preferred profiles and apps

Each template component should implement only one template interface. Template components shouldn’t implement any other type of interface, such as flexipage:availableForAllPageTypes or 

force:hasRecordId. A template component can’t multi-task as a regular Lightning component. It’s either a template, or it’s not.


How to Get the Browsing Device Information in Lightning?

Poster Detect Browse

Lightning mainly focuses on the user experience on the web and mobile interfaces. So, most of the scenarios we should need to know the information of the browser to align the design with respect to the device browser.  In this post, I would like to discuss, how we can detect the browsing device information in a lightning component.

Continue reading

How to convert attachments to files in salesforce ?

Poster 2 basic


I have uploaded an attachment (salesfiorce_migration_guide.pdf) to an opportunity record from classic salesforce. The uploaded document record has the following actions where ‘view’ action is a link to download the file.

Screen Shot 1940-02-11 at 5.05.59 PM
Uploaded attachments to an opportunity record

Next, uploading another file (router-sample.pdf) to the same opportunity record using upload file functionality in lightning. The uploaded files in the above and current scenario are shown below.

Continue reading

Lightning Component for Communicating Server Side Aura Method – Best Practice 1

Poster 2 basic

Aura framework provides a javascript action function to send a request from the lightning component to apex controller and it returns the response back to the client side. Please refer this link to know how the server side action is handled by the client-side controller. In this blog we are explaining the best practices can be followed to do this communication.


This implementation requires two components. The server communication is modularized into an abstracted component which is then extended to the second component as needed.
Continue reading

Extending Lightning Components

Poster 2 basic


In lightning, we have developed multiple components for different functionalities. All custom components include a lot of boilerplate code and we will have to exclude most of the redundant code by building generic function in the helper part of aura bundle. However, it wouldn’t be the perfect solution to avoid the redundancy as we will have to do the same for other components as well. For example, Communication between an apex controller and a component is written separately for each custom component, even if the components are related to each other. Are there any mechanisms available in lightning for abstracting the boilerplate into one component for others to make use of it?

From my experience, this can be solved by Inheritance as it makes the code more structured and flexible. The Salesforce Apex framework supports inheritance similar to what we see in object-oriented programming languages like Java and others. Is Aura framework built to support inheritance?

Continue reading