In my last blog you Understand the Lightning Design System
Key Principles, if you didn’t look at it then check this out: Understand
Lightning Design System Key Principles in 25 Minutes. We have
created simple visualforce page which displayed Customized My Accounts page.
In this blog we are using advanced components Tile and Card. Also we will be using components which you have learned in
previous blog which include Icons
and Grid System.
Tile: A tile is
a grouping of related information associated with a record.
Card: Cards are
used to apply a container around a related grouping of information.
For this blog, I choose Record Home Page as this page is archetypical
or template on which you base your many of the app pages.
When we start to build any page, first thing come to mind is skeleton
of page which contains page header, left body (Main card), right card (Narrow
Card) and footer like below :
Let`s work on it now.
Go to Setup and search for visualforce page and Create New Visualforce
page namely VisualForcePage_RecordHomePage
and copy below code snippets.
Click on Save
button and click on Preview button.
<apex:page showHeader="false" standardStylesheets="false" sidebar="false"
applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Record Home Page with Advanced
Lightning Component</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Import the Design System style
sheet -->
<apex:slds />
</head>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds-scope">
<!-- MASTHEAD -->
<p class="slds-text-heading--label slds-m-bottom--small">Record Home Page with Advanced
Lightning Component</p>
<!-- / MASTHEAD -->
<!-- PAGE HEADER -->
<div class="slds-page-header">
<!-- PAGE HEADER TOP ROW -->
<div class="slds-grid">
<!-- PAGE HEADER / ROW 1 / COLUMN 1
-->
<div class="slds-col slds-has-flexi-truncate">
<!-- HEADING AREA -->
<!-- MEDIA OBJECT = FIGURE + BODY
-->
<div class="slds-media slds-no-space slds-grow">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-user">
<use xlink:href="{!URLFOR($Asset.SLDS,
'assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>
</svg>
</div>
<div class="slds-media__body">
<p class="slds-text-title--caps slds-line-height--reset">Account</p>
<h1 class="slds-page-header__title slds-m-right--small
slds-align-middle slds-truncate" title="Lightning In SFDC">Lightning In SFDC</h1>
</div>
</div>
<!-- / MEDIA OBJECT -->
<!-- HEADING AREA -->
</div>
<!-- / PAGE HEADER / ROW 1 / COLUMN
1 -->
<!-- PAGE HEADER / ROW 1 / COLUMN 2
-->
<div class="slds-col slds-no-flex slds-grid
slds-align-top">
<div class="slds-button-group" role="group">
<button class="slds-button slds-button--neutral">
Follow
</button>
<button class="slds-button slds-button--neutral">
More
</button>
</div>
</div>
<!-- / PAGE HEADER / ROW 1 / COLUMN
2 -->
</div>
<!-- / PAGE HEADER TOP ROW -->
<!-- PAGE HEADER DETAIL ROW -->
<ul class="slds-grid slds-page-header__detail-row">
<!-- PAGE HEADER / ROW 2 / COLUMN 1
-->
<li class="slds-page-header__detail-block">
<p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field 1">Account Owner</p>
<p class="slds-text-body--regular slds-truncate" title="Description that demonstrates truncation with
a long text field">
<a href="javascript:void(0);">Josep Martinez</a>
</p>
</li>
<!-- PAGE HEADER / ROW 2 / COLUMN 2
-->
<li class="slds-page-header__detail-block">
<p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field2 (3)">Account Type
<button class="slds-button slds-button--icon" aria-haspopup="true" title="More Actions">
<svg class="slds-button__icon
slds-button__icon--small" aria-hidden="true">
<use
xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Actions</span>
</button>
</p>
<p class="slds-text-body--regular">Prospect</p>
</li>
<!-- PAGE HEADER / ROW 2 / COLUMN 3
-->
<li class="slds-page-header__detail-block">
<p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field 3">Relationship Type</p><a href="javascript:void(0);">Partner</a></li>
<!-- PAGE HEADER / ROW 2 / COLUMN 4
-->
<li class="slds-page-header__detail-block">
<p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field 4">Account Number</p>
<p>
<span title="Description (2-line truncation—must use JS to
truncate).">01234567890</span>
</p>
</li>
<!-- PAGE HEADER / ROW 2 / COLUMN 5
-->
<li class="slds-page-header__detail-block">
<p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field 5">Account Status</p>
<p>
<span title="Description (2-line truncation—must use JS to
truncate).">Active</span>
</p>
</li>
<!-- PAGE HEADER / ROW 2 / COLUMN 6
-->
<li class="slds-page-header__detail-block">
<p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field 6">Account Record Type</p>
<p>
<span title="Description (2-line truncation—must use JS to
truncate).">Partner Account</span>
</p>
</li>
</ul>
<!-- / PAGE HEADER DETAIL ROW -->
</div>
<!-- / PAGE HEADER -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myCustomapp">
<!-- RELATED LIST CARDS-->
<div class="slds-grid slds-m-top--large">
<!-- MAIN CARD -->
<div class="slds-col slds-col-rule--right
slds-p-right--large slds-size--8-of-12">
<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__figure">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-contact
slds-icon--small">
<use
xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>
</svg>
</div>
<div
class="slds-media__body slds-truncate">
<a href="javascript:void(0);" class="slds-text-link--reset">
<span class="slds-text-heading--small">Contacts</span>
</a>
</div>
</header>
</div>
<!-- CARD BODY = TABLE -->
<div class="slds-card__body">
<table class="slds-table slds-table--bordered
slds-no-row-hover slds-table--cell-buffer">
<thead>
<tr class="slds-text-heading--label">
<th class="slds-size--1-of-5" scope="col">Name</th>
<th class="slds-size--1-of-5" scope="col">Company</th>
<th class="slds-size--1-of-5" scope="col">Title</th>
<th class="slds-size--1-of-5" scope="col">Email</th>
<th class="slds-size--1-of-5" scope="col">Phone</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr class="slds-hint-parent">
<th class="slds-size--1-of-5" scope="row"><a href="javascript:void(0);">John Miller</a></th>
<td class="slds-size--1-of-5">Universal Oil and Water Company</td>
<td class="slds-size--1-of-5">Senior Director of Sales</td>
<td class="slds-size--1-of-5">john@universaloilcompany.com</td>
<td class="slds-size--1-of-5">9876543210</td>
<td class="slds-cell-shrink">
<button class="slds-button slds-button--icon-border-filled
slds-button--icon-x-small">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint
slds-button__icon--small">
<use
xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
</svg>
<span
class="slds-assistive-text">Show More</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- / CARD BODY = SECTION + TABLE
-->
<div class="slds-card__footer">
<a href="javascript:void(0);">View All <span class="slds-assistive-text">contacts</span></a>
</div>
</article>
</div>
<!-- / MAIN CARD -->
<!-- NARROW CARD -->
<div class="slds-col slds-p-left--large slds-size--4-of-12">
<article class="slds-card slds-card--narrow">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media--center
slds-has-flexi-truncate">
<div class="slds-media__figure">
<svg class="slds-icon slds-icon-standard-lead
slds-icon--small" aria-hidden="true">
<use
xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/action-sprite/svg/symbols.svg#new_opportunity')}"></use>
</svg>
</div>
<div
class="slds-media__body slds-truncate">
<h2 class="slds-text-heading--small">Opportunities</h2>
</div>
</header>
</div>
<div class="slds-card__body">
<div class="slds-card__body--inner">
<div class="slds-tile">
<h3 class="slds-truncate" title="Renewal Opportunity- A00001234"><a href="javascript:void(0);">Renewal Opportunity- A00001234</a></h3>
<div class="slds-tile__detail slds-text-body--small">
<dl class="slds-list--horizontal slds-wrap">
<dt class="slds-item--label slds-text-color--weak
slds-truncate" title="Opportunity Number:">
Opportunity Number:
</dt>
<dd class="slds-item--detail slds-truncate" title="987654321">
987654321
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="slds-card__footer">
<a href="javascript:void(0);">View All <span class="slds-assistive-text">Opportunities</span></a>
</div>
</article>
</div>
<!-- / NARROW CARD -->
</div>
<!-- / RELATED LIST CARDS -->
</div>
<!-- / PRIMARY CONTENT WRAPPER
-->
<!-- FOOTER -->
<footer role="contentinfo" class="slds-p-around--large">
<!-- LAYOUT GRID -->
<div class="slds-grid slds-grid--align-spread">
<p class="slds-col">Record Home Page with Advanced Lightning Component</p>
<p class="slds-col">© Lightning In SFDC</p>
</div>
<!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
<!-- JAVASCRIPT -->
<!-- / JAVASCRIPT -->
</body>
</html>
</apex:page>
Click on Preview button which will be like below screenshot:
Explanation:
In this example, I have used the last blog code for page
header. If any code related to page header is unclear then please refer to
previous blog or the respective component documentation.
1. <!-- PAGE
HEADER DETAIL ROW --> :
In above code snippet, page header detail row contains
<ul> which is
outer elements instantiates grid and I have added the class slds-page-header__detail-row for
correct alignment. <ul> contains
six fields using with are bound by <li>
which have class
slds-page-header__detail-block.
Each
<li> contains
<p> elements which is carrying slds-text-title,
slds-m-bottom--xx-small and slds-truncate three classes. First two classes
add space below them and slds-truncate truncate field value.
2. <!-- PRIMARY
CONTENT WRAPPER --> :
This section contains two related list card which are main
body card and the right narrow card side by side.
a.<!-- MAIN CARD -->:
Cards are used to apply a container around a related grouping
of information which is wrapped in
<article class="slds-card"> element.
Card header have <div> with slds-card__header and slds-grid classes.
Two columns contain a Media Object
and an action button. In Second column we can easily add Button Groups as in the list view. Card body is wrapped in <div> with slds-card__body which
contains Data table component. Card footer have View All link which have <div
class="slds-card__footer">
b. <!-- NARROW CARD -->:
Narrow card have
slds-card class to which we have added slds-card—narrow modifier class. In Narrow Card we
have use Tile components. Tile is a
grouping of related information associated with a record. We have used series
of Tile components. Tile component have slds-tile class. Inside that we have
added title and some body content in narrow card. In Narrow card we have added
footer with <div
class="slds-card__footer> for view all link.
In this example you see card (Main or Narrow) have light grey
background which is by default background. In Winter 18 release, you will be
able to see white background to Card (Main or Narrow) by default. You can
change using custom css but you will miss any Salesforce SLDS updates related
to Card.
If you want to add Card in Lightning Component, then use
lightning:card tag. Like slds-card, lightning:card is used to
apply container whose look and feel same in Lightning UX. It contains tile,
body and footer.
Below are the attributes of lightning:card:
Attribute Name
|
Description
|
actions
|
This Attribute is of type
Component[]. Actions are components such as button or buttonIcon. Actions are
displayed in the header.
|
body
|
This Attribute is of type
Component[]. The body of the component. In markup, this is everything in the
body of the tag.
|
class
|
This Attribute is of type String. A
CSS class for the outer element, in addition to the component's base classes.
|
footer
|
This Attribute is of type
Component[]. The footer can include text or another component
|
iconName
|
This Attribute is of type String. The
Lightning Design System name of the icon. Names are written in the format
'\utility:down\' where 'utility' is the category, and 'down' is the specific
icon to be displayed. The icon is displayed in the header to the left of the
title.
|
title
|
This Attribute is of type
Component[]. Title is required attribute. The title can include text or
another component, and is displayed in the header.
|
variant
|
This Attribute is of type String. The
variant changes the appearance of the card. Accepted variants include base or
narrow. This value defaults to base.
|
Don’t forget to like or comment or share the blog.
Other blogs:
