Lightning Design Systemを使ってVisualforceでLightning雰囲気のページ作成するのを共有する。
現在Salesforceの主なページ作成はVisualforceページですが、Salesforceが提供しているCSSフレームワーク Lightning Design System を使ってみる。
開発コンソル画面を開き、Visualforce ページ作成する。
<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のSVGアイコン使用宣言
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
・ Lightning Design Systemのスタイル、アセットをVisualforceページにインポート
<apex:slds />
・ 「Contact」へアクセスし、javascriptで呼び出 し
<apex:remoteObjectModel name="Contact" fields="Id,Name,Title,LastModifiedDate,PhotoUrl"/>
・ Lightning Design Systemの適用範囲
<div class="slds-scope">...</div>