[Salesforce]Lightning Design System

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>

投稿者: kinkun

保有資格 Salesforce Certified Platform App Builder T Salesforce Certified Platform Developer I Salesforce Certified Platform Developer II Salesforce Certified Administrator

コメントを残す

メールアドレスが公開されることはありません。