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.


SFDX – Salesforce Command Line Interface (CLI) Commands – Part 1

In this blog, I would like to share with you the available Salesforce CLI Commands. CLI Commands will reduce your effort in creating and configuring the Apex, Visualforce, Lightning components. Refer to my previous blogs for setting up the SFDX with visual studio code IDE.
Continue reading

Deploy & Retrieve metadata using Salesforce DX and VS Code


Visual studio code is one of the most featured, powerful code editors in open source platform developed using Javascript frameworks, node.js, and electron. In this blog, I would like to share with you the steps to deploy and retrieve the metadata from the Salesforce developer, production and sandbox orgs using the SFDX and my favourite Visual Studio Code.

Continue reading

Configure Salesforce Developer Experience (SFDX) on Visual Studio Code


posterIn this blog, I would like to share the steps for configuring Salesforce Developer Experience (SFDX) in my favourite code editor Visual Studio Code for enabling Source Driven Development model. Salesforce DX supports the traditional application development experience with debugging (specifically on apex), CLI (Command Line Interface) Support along with Visual Studio Code.

Continue reading

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