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

 

https://developer.salesforce.com/docs/component-library/bundle/lightning:appHomeTemplate

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s