この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
どうも！西村祐二＠大阪です。
SalesforceにはLightning ExperienceとSalesforce Classicの2つの異なるUIがあります。
Visualforceは主にSalesforce ClassicのUIを作成する際に使用するWeb開発フレームワークです。
今回、「Lightning Design System」を使って
Lightning風(現在主流のUI)のVisualforceページを作成してみたいと思います。
作成するページの内容はTrailheadを参考に取引先責任者リストを表示するページを作成してみたいと思います。
Lightning Design Systemとは
Lightning Design Systemとは
Salesforceが提供しているCSSフレームワークです。
イメージとしてはTwitter BootstrapのSalesforce版です。
Saleforceで使われているLightningのアイコンやスタイルを利用することができます。
さっそく、Lightning Design Systemを使ってページを作ってみましょう。
環境
・Developer Edition
※デモ用のデータがあらかじめ入っているためオススメです。
・バージョン：40
完成画面
今回作成するページの完成画面は下記のようになります。
比較のため通常のUIは下記のようになります。
手順
▼「開発者コンソール」を開きます。
▼「Visualforce Page」を新規作成します。ページ名は今回「test_slds」としています。
▼下記プログラム貼り付け「Preview」をクリックします。
すると完成画面のようながページが表示されるかと思います。
Lightning Design SystemはファイルをSalesforceにアップロードせずに利用することができます。
※プログラムはTrailheadをもとにしております。予めご了承ください。
<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="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Salesforce Lightning Design System</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Import the Design System style sheet -->
<apex:slds />
</head>
<apex:remoteObjects >
<apex:remoteObjectModel name="Contact" fields="Id,Name,Title,LastModifiedDate,PhotoUrl"/>
</apex:remoteObjects>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds-scope">
<!-- MASTHEAD -->
<p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System </p>
<!-- / MASTHEAD -->
<!-- PAGE HEADER -->
<div class="slds-page-header">
<!-- LAYOUT GRID -->
<div class="slds-grid">
<!-- GRID COL -->
<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-contact">
<use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>
</svg>
</div>
<div class="slds-media__body">
<p class="slds-text-title--caps slds-line-height--reset">Contacts</p>
<h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="My Contacts">顧客リスト</h1>
</div>
</div>
<!-- / MEDIA OBJECT -->
<!-- /HEADING AREA -->
</div>
<!-- ACTION BUTTONS -->
<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">Add Contact </button>
<button class="slds-button slds-button--neutral">More </button>
</div>
</div>
<!-- / ACTION BUTTONS -->
</div>
<!-- / LAYOUT GRID -->
</div>
<!-- / PAGE HEADER -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp slds-p-horizontal--medium">
<ul id="contact-list" class="slds-has-dividers--bottom-space"></ul>
</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">Salesforce Lightning Design System Example</p>
<p class="slds-col">© Your Name Here</p>
</div>
<!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
<!-- JAVASCRIPT -->
<script>
(function() {
'use strict';
var contact = new SObjectModel.Contact();
var contactList = document.getElementById('contact-list');
function createTile (record) {
return [
'<li class="slds-item">',
'<div class="slds-tile slds-media">',
'<div class="slds-media__figure">',
'<img class="slds-avatar slds-avatar--medium" src="', record.get('PhotoUrl'), '" alt="" />',
'</div>',
'<div class="slds-media__body">',
'<h3 class="slds-truncate" title="', record.get('Name'), '"><a href="javascript:void(0);">', record.get('Name') ,'</a></h3>',
'<div class="slds-tile__detail slds-text-body--small">',
'<p class="slds-truncate">', record.get('Title') ,'</p>',
'</div>',
'</div>',
'</div>',
'</li>'
].join('');
}
contact.retrieve(
{ orderby: [{ LastModifiedDate: 'DESC' }], limit: 10 },
function(error, records) {
if (error) {
alert(error.message);
} else {
contactList.innerHTML = records.map(createTile).join('');
}
}
);
})();
</script>
<!-- / JAVASCRIPT -->
</body>
</html>
</apex:page>解説
「Lightning Design System」を利用するにあたりハマそうなとろこを中心に解説していきます。
▼2行目
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
Lightning Design SystemのSVGアイコンを使用するための宣言です。
▼9行目
<apex:slds />
Lightning Design SystemのスタイルとアセットをVisualforceページにインポートします。
▼12行目
<apex:remoteObjectModel name="Contact" fields="Id,Name,Title,LastModifiedDate,PhotoUrl"/>
「Contact」へアクセスし、javascriptで呼び出せるようになります。
apex:remoteObjectsはとても便利です。
▼18行目から72行目
<div class="slds-scope">...</div>
Lightning Design Systemの適用範囲です。
▼31行目から35行目
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-contact">
<use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>
</svg>
</div>$Assetグローバル変数を使用して、
Lightning Design Systemに含まれる画像やその他のアセットにアクセスできます。
jpg画像を利用する際は下記のようになります。
<span class="slds-icon_container slds-icon--small slds-icon-standard-account" title="Contact Avatar">
<img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" alt="Contact Avatar" />
</span>さいご
いかがだったでしょうか。
「Lightning Design System」を使ってLightning風のVisualforceページを作成してみました。
個人的な備忘録のようになってしまいましたが
誰かの参考になれば幸いです。
Salesforce開発のお作法に慣れるまで大変ですが頑張ります。
186
