レコードホームページのレイアウトと高度なコンポーネントの使用

学習の目的

この単元を完了すると、次のことができるようになります。

  • グリッドシステムを使用してレコードホームページをレイアウトする。
  • カードコンポーネントの 2 つのバリエーションを使用してレコード関連リストを表示する。

グランドフィナーレ

ここまでこのモジュールにお付き合いいただきありがとうございます。この最後の単元では、CSS を 1 行も記述しなくても自動的に Lightning UI に適合する新しいページを作成します。グリッドシステムページヘッダーアイコンなど、前のモジュールで学習したコンポーネントを多く使用します。また、カードタイルという 2 つの主要コンポーネントも紹介します。

目的のページはレコードホームページです。なぜこのページが選ばれたのかというと、これから作成する多数のアプリケーションページの原型であり、多くの点で従来の Salesforce ページといえるからです。この例は、アプリケーションのベースとなるテンプレートです。また、複雑ですが、複雑すぎるというわけではないので、ちょうどいい練習となると同時に Trailhead バッジも獲得できます。では、さっそく始めましょう。

レコードページレイアウト

以下は、これから作成するページのワイヤーフレームです。上部のページヘッダーの下に関連リストが 2 つあります。左側に大きなリストがあり、右側には小さなカードがあります。その下には通常のフッターを使用します。幸い、前に記述した多数のマークアップを再利用できます。

レコードホームのワイヤーフレーム

まず、Trailhead_SLDS_RecordHome という名前の新しい 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="en">
<head>
 <meta charset="utf-8" />
 <meta http-equiv="x-ua-compatible" content="ie=edge" />
 <title>Salesforce Lightning Design System Trailhead Module</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">Salesforce Lightning Design System Trailhead Module</p>
 <!-- / MASTHEAD -->
 <!-- PAGE HEADER -->
 <!-- / PAGE HEADER -->
 <!-- PRIMARY CONTENT WRAPPER -->
 <div class="myapp">
 </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">&copy; Your Name Here</p>
 </div>
 <!-- / LAYOUT GRID -->
 </footer>
 <!-- / FOOTER -->
 </div>
 <!-- / REQUIRED SLDS WRAPPER -->
 <!-- JAVASCRIPT -->
 <!-- / JAVASCRIPT -->
</body>
</html>
</apex:page>

コピー

ページヘッダーの追加

次に、ページヘッダーコンポーネントを追加します。今回はリストビューで使用したものよりやや複雑です。これには、2 つの行があります。1 行目はリストビューで使用したものとほぼ同じです。2 行目にはレコードの重要な項目がいくつか表示されます。

1 行目のコードにはすでに見覚えがあるはずです。これを <!-- PAGE HEADER --> コメントの間に配置します。

<!-- 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="SLDS Inc.">SLDS Inc.</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">
 Contact
 </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 -->
 <!-- / PAGE HEADER DETAIL ROW -->
</div>
<!-- / PAGE HEADER -->

コピー

ページをプレビューすると、ページヘッダーの一番上の行が期待どおりに表示されます。コードが不明確な場合は、前の単元または該当するコンポーネントに関するドキュメントを参照してください。

ヘッダーの一部が表示されたレコードホーム

次に、別のグリッドシステムコンポーネントを使用して、2 行目にあたる詳細行を実装します。これには、4 つの列が含まれます。次のコードを <!-- PAGE HEADER DETAIL 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">Field 1</p>
 <p class="slds-text-body_regular slds-truncate" title="Description that demonstrates truncation with a long text field">Description that demonstrates truncation with a long text field.</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)">Field 2 (3)
 <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">Multiple Values</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">Field 3</p><a href="javascript:void(0);">Hyperlink</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">Field 4</p>
 <p>
 <span title="Description (2-line truncation—must use JS to truncate).">Description (2-line truncat...</span>
 </p>
 </li>
</ul>
<!-- / PAGE HEADER DETAIL ROW -->

コピー

ページをプレビューすると、2 行目にレコードから重要な項目が入力される、完全なヘッダーが表示されます。

完全なヘッダーが表示されたレコードホーム

今回も Design System のおかげで簡単にできました。このコードは、CSS を一文字も入力せずに、Lightning UI 仕様に適合する複雑なコンポーネントを配置します。詳細行のコードを順を追って説明します。相互参照できるように、このウィンドウの他に、お気に入りのエディタでコードを開いておくことをお勧めします。

外側の <ul> は、グリッドをインスタンス化し、正しい配置を適用する slds-page-header__detail-row クラスを追加します。

4 つの項目が slds-page-header__detail-block クラスを持つ一連の <li> を使用して配置されています。

各詳細ブロック内には、1 つ以上の <p> 要素があり、slds-text-title、下にスペースを追加する slds-m-bottom--xx-small、項目値を切り捨てる slds-truncate という 3 つのクラスが指定されています。

完全なレコードホームページのヘッダーの例はページヘッダーコンポーネントに関するページで参照できます。

次に、2 つの関連リストを横並びに配置する、レコードホームの詳細領域に進みます。

次のコードを <!-- PRIMARY CONTENT WRAPPER --> コメントの内側に含めます。

<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
 <!-- 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">
 left hand column related list
 </div>
 <!-- / MAIN CARD -->
 <!-- NARROW CARD -->
 <div class="slds-col slds-p-left_large slds-size_4-of-12">
 right hand column related list
 </div>
 <!-- / NARROW CARD -->
 </div>
 <!-- / RELATED LIST CARDS -->
</div>
<!-- / PRIMARY CONTENT WRAPPER -->

コピー

別のグリッドシステムコンポーネントを使用し、サイズヘルパークラスを使用してサイズが設定される 2 つの列を配置します。1 列目には大きな関連リストカードが含まれます。幅の狭い右側の列には、コンパクトカードが含まれます。これらはそれぞれ、カードコンポーネントのバリエーションです。

左側のカードのコードは次のとおりです。これを <!-- MAIN CARD --> コメントの内側に配置します。

<!-- 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-4" scope="col">Name</th>
 <th class="slds-size_1-of-4" scope="col">Company</th>
 <th class="slds-size_1-of-4" scope="col">Title</th>
 <th class="slds-size_1-of-4" scope="col">Email</th>
 <th scope="col"></th>
 </tr>
 </thead>
 <tbody>
 <tr class="slds-hint-parent">
 <th class="slds-size_1-of-4" scope="row"><a href="javascript:void(0);">Adam Choi</a></th>
 <td class="slds-size_1-of-4">Company One</td>
 <td class="slds-size_1-of-4">Director of Operations</td>
 <td class="slds-size_1-of-4">adam@company.com</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 -->

コピー

ページをプレビューして、最初の関連リストが正しく配置されていることを確認します。

主関連リストがあるレコードホームページ

このデモでは取引先が 1 つしかないので、営業担当の人たちには見せないでください。実際はもっと多くの取引先があることでしょう。

では、マークアップを順に見ていきましょう。

カードコンポーネントが <article class="slds-card"> 要素でラップされています。

カードヘッダーは、slds-card__header クラスと slds-grid クラスを持つ <div> 要素で指定されます。2 つの列には、メディアオブジェクトとアクションボタンがそれぞれ含まれています。2 列目は、リストビューの場合と同じように、ボタングループを使用して簡単に拡張できます。いつものとおり、これらすべてのクラスについての詳細と例は、Design System の Web サイトを参照してください。

カードのボディは、slds-card__body クラスが指定された <div> 要素です。その内部にデータテーブルコンポーネントがあります。

カードは <div class="slds-card__footer"> 内の [View all (すべてを表示)] リンクで完了します。

最後のカードの追加

レコードホームの最終ステップは、右側に幅の狭いカードを追加することです。この操作では、もう一度カードコンポーネントを使用します。グリッドシステムにより、このカードは自動的に幅の狭いスペースに隙間なく配置されます。<!-- NARROW CARD --> コメント内に配置するマークアップを次に示します。

<!-- NARROW CARD -->
<div class="slds-col slds-p-left_large slds-size_4-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 class="slds-icon slds-icon-standard-lead slds-icon_small" aria-hidden="true">
 <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#lead')}"></use>
 </svg>
 </div>
 <div class="slds-media__body slds-truncate">
 <h2 class="slds-text-heading_small">Team</h2>
 </div>
 </header>
 </div>
 <div class="slds-card__body">
 <div class="slds-card__body_inner">
 <div class="slds-tile">
 <h3 class="slds-truncate" title="Anne Choi"><a href="javascript:void(0);">Anne Choi</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="Email:">
 Email:
 </dt>
 <dd class="slds-item_detail slds-truncate" title="achoi@burlingtion.com">
 achoi@burlingtion.com
 </dd>
 </dl>
 </div>
 </div>
 </div>
 </div>
 <div class="slds-card__footer">
 <a href="javascript:void(0);">View All <span class="slds-assistive-text">team members</span></a>
 </div>
 </article>
</div>
<!-- / NARROW CARD -->

コピー

前と同じく、カードのヘッダーとボディは提供されています。カードのボディは、一連のタイルコンポーネントです。タイルは、レコードに関連付けられた関連情報のグループです。このコンポーネントにはバリエーションがいくつかあり、それぞれが異なる情報のグループです。各タイルレイアウトは異なる構成になっているので、ドキュメントにある例のマークアップに注意してください。ここでは、シンプルな base バリエーションを使用します。

各タイルには、slds-tile クラスが指定されています。その内部に、タイルのタイトルとコンテンツが提供されています。前と同じく、カードを、別のカードで使用したのと同じ <div class="slds-card__footer"> マークアップでラップします。

これで、完成したレコードホームページをプレビューできます。

幅の狭いカードがあるレコードホーム

この複雑なレコードホームのマークアップの例で、Trailhead モジュールの終了となります。これで Design System のしっかりした基礎が身に付き、独自のアプリケーションで早く使ってみたいと思っていただければ幸いです。

明らかにこれらのサンプルページはほんの手始めです。独自のアプリケーションを構築する場合、次のステップは実際のデータを接続し、ページをリンクし、ビジネスロジックを構築することです。Design System によって、CSS を使用した UI のスタイル設定から解放され、実際の機能の構築に集中できるようになることを望んでいます。楽しみながら作業ができますように、そしてこちらまでフィードバックをお寄せください

リソース