Adding Text to a Page Layout

There is a dilemma with Salesforce in that many times the most complicated things are the easiest (creating a REST API is one line of code) and the simplest things are the hardest.

Adding a bit of text to a page layout out to be a simple thing – but turns out to need some dodgy work arounds or even a bit of code.

Building on the post from on dependent picklists this example shows how to have some text on a page layout that links to the content.

This is what the final page will look like:

We have  custom object called ‘Travel’ that has a couple of picklists on it for the Continent and Country.

We want some text on the right of the screen that is linked to the content on the main details – in our case a bit of text about each country.   This can be done on one Lightning Component page in a very simple way.

Lets get going:

1. Open the Developer Console
2. Set a name for bundle ‘PageDetail’. Don’t worry about the configuration settings as these can be added to the code
3. Click on the Component and you will get the following

Check that you have the basics working

1. Change the code to a very basic Hello World!

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
Hello World!
</aura:component>

1. Now open your record page and ‘Edit Page’ from the setup Cog
2. Under components you will see your new component ‘PageDetail’ showing under

1. Save and Activate the page (set as Org Default to shortcut slightly). Now we can get back to some code.

Salesforce recently provided a massive shortcut to allow you to access the main record on this record detail page.  By adding the force:recordData you simply get access straight to the content of the record.

 

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">

<aura:attribute name="myRecord" type="Object"/>
<aura:attribute name="recordError" type="String"/>

<force:recordData aura:id="recordLoader"
recordId="{!v.recordId}"
fields="Continents__c,Countries__c"
targetFields="{!v.myRecord}"
targetError="{!v.recordError}"
/>

</aura:component>

This code is a massive code (and therefore error) saver.  In the smallest of nutshells, the force:recordData takes the recordID of the object and searches it to return the fields needed (the Continent and Country) and stores the results in the myRecord object and adds any errors to the recordError string.

Accessing the actual data is as simple as

Add this to the code, save and refresh (x2) your browser on the record page to see the results:

Ok, a breakthrough in that we can see the text (just) from the record (‘Europe’ in the text). Let’s make this a bit more lightning friendly.

<div class="slds-page-header" role="banner">
<p class="slds-text-heading_label">{!v.myRecord.Continents__c}</p>
</div>

So now we can read the heading and it looks like it belongs on the page.

But we wanted some text the changes based on the country selected.

Add the following code below our heading

<article class="slds-card">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__body">
<h2>
<span class="slds-text-heading_small">{!v.myRecord.Countries__c}</span>
</h2>
</div>
</header>
</div>

<div class="slds-card__body slds-card__body_inner">Information on each country</div>

</article>

Now we we get a nicely presented lightning control.

This shows on the page as

Now all that is needed is a bit of code to show some different text per country.  the <aura:if can be used to mix a bit of presentation with programming.  Inside the <aura:if a parameter of isTrue is evaluated to see if the code inside should be displayed. So

<aura:if isTrue="{!v.myRecord.Countries__c == 'Andorra'}">
<div class="slds-card__body slds-card__body_inner">A sovereign landlocked microstate in Southwestern Europe.</div>
</aura:if>

will only show the text if the Countries__c is set to Andorra.  These can simply be added one after another.

<aura:if isTrue="{!v.myRecord.Countries__c == 'Andorra'}">
<div class="slds-card__body slds-card__body_inner">A sovereign landlocked microstate in Southwestern Europe.</div>
</aura:if>

<aura:if isTrue="{!v.myRecord.Countries__c == 'Austria'}">
<div class="slds-card__body slds-card__body_inner">A federal republic and a landlocked country of over 8.8 million people in Central Europe.</div>
</aura:if>

Make a change to the Country and the component changes to match.