Salesforce Lightning Component: Make a simple custom Page Layout

on

How many times have you thought “What if I could insert some code inside my Lightning page layout?” Nope? Never? Liars!

I can list at least three cases where you thought about implementing a custom page layout:

  • Objects without Record Type (eg. Opportunity Line Item) for which different page layout cannot be assigned to different types of records
  • Page Layouts to be switched based on the combination of two or more field values
  • The customer asks you to make an animated unicorn appears if all strings of a record start for ‘R’ and outside there is the full moon

In this article, we’ll create a simple custom lightning page layout to display and edit records. In deatils:

  • Create a Custom sObject
  • Create a Lightning Component for sObject record display
  • Modify the Lightning Component for sObject record edit
  • Implement Page Layout customization logic based on a field value
  • Replace the default Page Layout with the custom Page Layout

Create a Custom sObject

Let’s create a custom sObject “Vehicle” with the following fields:

  • Type: a picklist to identify the vehicle typology. It contains only two values: “Car” and “Motorbike”
  • Licence plate: a 7 character string to uniquely identify the vehicle
  • Year: a 4 digit number to identify the registration date of a vehicle
  • Color: a 20 characters string to identify the main color of the vehicle
  • Number of car doors: a picklist to identify the number of doors. In case of “Car” typology, it contains only two values: “3” and “5”

Custom object

After creating the custom sObject, add it to the tabs (Setup -> tabs -> New).

Create a Lightning Component for sObject record display

When a new object is created, a new default Page Layout is created and assigned. This Page Layout is valid for all types of vehicles, but some fields should be visible only to “Car” vehicles.

Create a Custom Page Layout with Lightning Component from the Developer Console (File -> New -> Lightning Component). Insert Component name “CustomVehicleDetails” and then click Submit.

ComponentBoundleAs we can see, a Component is a bundle that includes several resources such as: a definition resource written in markup language (the only required resource), a javascript controller, a css style, a javascript helper and other resources.

For more information see Lightning Components Basics on Salesforce Trailhead.

To make our Page Layout similar to the Default Page Layout, we need to use the Lightning Design System.

Let’s start! We need to write a Component, a CSS, a Javascript Controller and an Apex Controller to make DML operations on the used sObject.

Vehicle_Component_Controller.apxc

CustomVehicleDetailsController.js

CustomVehicleDetails.cmp

 

Modify the Lightning Component for sObject record edit

To allow record editability, we need to modify the previous code and add a new resource: the Javascript Helper, which can be considered a Controller support file.

First of all insert a boolean attribute ‘isEditPage’ to the Component. For each non-read-only fields in the Component, if this value is true, the field value is displayed as output, otherwise the field value is displayed as input.

We also have to insert two buttons that are shown in the case isEditPage is true:

  • Save button, to save record values
  • Cancel button, to cancel the operation and return to the record’s display

Note: As you can see, if a field is a picklist, in the edit mode you must be able to set a value with a select element.

CustomVehicleDetails.cmp

When an edit button is clicked, Controllers have to modify the Page Layout. When the Save button is clicked, Controllers have to save the new record values.

CustomVehicleDetailsController.js

CustomVehicleDetailsHelper.js

Vehicle_Component_Controller.apxc

Implement Page Layout customization logic based on a field value

Now we have our Lightning Component, just one more thing missing: how can we show “Car Info” section only for record with “Car” typology? Simple, we need to add an IF construct in the Component resource.

finalPage

 

 

 

CustomVehicleDetails.cmp

Replace the default Page Layout with the custom Page Layout

Well, how can we exchange default Page Layout with our Page Layout? Be sure you are in Lightning mode and go to Setup -> EditPage.

EditPage

 

 

 

 

Select page body to display the lateral menu with existing tabs.

TabSelectionAdd a new Tab clicking “Add Tab”. Select the created Tab and chose “Custom” from the picklist. Add tab label and save.

Now you can see in the page body our new Tab. Click ‘Add Component(s) Here’ and select our Lightning Component appeared on the left menu.

CustomSelection

But… what if I would like to add a Lookup field? Stay tuned for more complex Lightning Component custom Page Layout.

PS: here you can find final Component code 😉

If you enjoyed the post and you found useful information, follow us on FacebookTwitter and Linkedin

(Visited 843 times, 3 visits today)

2 thoughts on “Salesforce Lightning Component: Make a simple custom Page Layout

  1. hi Mate ,
    thanks for the nice example but the thing is , its very difficult to figure out /learn for New persons as you divided the code into each part. for example

    In CustomVehicleDetailsController.js
    you have modified to


    changeEditLayout : function(component, event, helper) {
    component.set(“v.isEditPage”, true);
    helper.removeDivider(); etc ……….

    so people cant understand , they just copy paste the code
    so can you please attach whole code at the end sepeately such that New comers can copy and learn it .

    1. Hi Kumar, good point!
      Now you can find a link at the end of the post.

      Good job and thanks for the contribute =D

Leave a Reply

Your email address will not be published. Required fields are marked *