SkyVisualEditorページでLightningDesignSystemをつかってみる

  • Posted on
  • by

先日、Salesforce社からLightning Design Systemという新たなCSSフレームワークが発表されました。

本記事ではそのスタイルをSVEで作成したページに適用してみます。

※サンプルのソースコードは製品サポートの対象外となります。


  1. 事前準備
  2. ボタンのスタイルを変更
  3. データテーブルのスタイルを変更
  4. まとめ

静的リソースにLightningDesignSystemを保存

まずは、

https://www.lightningdesignsystem.com/resources/downloads

からLightning Design Systemをダウンロードし、静的リソースに保存します。

本来は必要なファイルのみを登録すればいいですが、手間を省くために今回はダウンロードしたzipをそのまま登録しました。

SVEページでLightningDesignSystemをインポート設定

SkyVisualEditorでページを新規作成し、

[ページプロパティ]-[ページスタイル] スタイルシートインクルード設定

から先ほどの静的リソース内のCSSファイルのインクルード設定を追加します。

{!URLFOR($Resource.SLDS091, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}

ページにsldsクラスを指定

Lightning Design Systemの指定は基本的にCSSクラス名「slds」の内部でしか効きません。

なのでSVEのページ内でLightning Design Systemのコンポーネント群を使用するためには

ページ内にsldsクラスを指定する必要があります。

SVEにはページ全体にCSSクラスを指定するための設定がないため、 [ページプロパティ]-[ページスクリプト] にそのような処理を行うJavaScriptを指定します。

// SVEページのコンテンツエリアにsldsクラスを追加
document.addEventListener('DOMContentLoaded', function () {
    var form = document.getElementsByClassName('sve_form1')[0];
    form.className = 'sve_form1 slds';
});

ボタンのスタイルを変更

ページ内に配置したボタンの、コンポーネントプロパティから

スタイルクラス に、

slds-button slds-button--neutral 

を設定します。

これでページをデプロイすると、このように表示されました。

無事、クラス指定したボタンの見た目がLightning Design Systemのものになりました。


データテーブルのスタイルを変更

今度はデータテーブルにLightning Design Systemのデータテーブルを適用してみましょう。

まずはSVE上でデータテーブルを作成します。

作成したデータテーブルのコンポーネントプロパティには

・ [共通] - [ID]

・ [開発] - [スタイルクラス]

にそれぞれ「AccountTable」と入力しておきます。

ボタンの変更はCSSクラスを指定するだけで済みましたが、

データテーブルの変更はテーブル内の各セルや行それぞれに指定する必要があるため、 JavaScriptでCSSクラスを指定する必要があります。

JavaScriptでCSSクラス名を変更するための関数を作成し、 ページスクリプトに追加します。

function toArray(fakeArray) {
    return fakeArray ? Array.prototype.slice.call(fakeArray) : [];
}

function setClassNames(pairs) {
    Object.keys(pairs).forEach(function (selector) {
        var nodes = document.querySelectorAll(selector);
        toArray(nodes).forEach(function (node) {
            node.className = pairs[selector];
        });
    });
}

function clearStyles(pairs) {
    Object.keys(pairs).forEach(function (selector) {
        var nodes = document.querySelectorAll(selector);
        toArray(nodes).forEach(function (node) {
            var styles = pairs[selector];
            styles.forEach(function (styleName) {
                node.style[styleName] = '';
            });
        });
    });
}

次に配置したテーブルのJavaScriptとして実際にクラス名を変更する処理を設定します。

スタジオ上で配置したデータテーブルを選択し、 コンポーネントプロパティから、 [開発] > [JavaScript]

を開いて以下のコードを追加します。

setClassNames({
    '.AccountTable'                      : 'AccountTable slds-table slds-table--bordered',
    '.AccountTable > thead > tr'         : 'slds-text-heading--label',
    '.AccountTable > thead > tr > th'    : 'slds-cell-shrink',
    '.AccountTable > tbody > tr'         : 'slds-hint-parent',
    '.AccountTable input[type=button]'   : 'slds-button slds-button--neutral',
    '.AccountTable input[type=text]'     : 'slds-input',
    '.AccountTable select'               : 'slds-select',
    'input[id$="AccountTable_addButton"]': 'slds-button slds-button--neutral'
});
clearStyles({
    '.AccountTable > thead > tr span': ['color']
});

ページをデプロイして表示を確認してみましょう。

データテーブルの表示がLightning Design Systemのものになっていることが確認できます。

まとめ

いかがだったでしょうか。

現在のSVEのもつ標準コンポーネントではLDSがもつコンポーネントと被るものがボタンとテーブルくらいしかありませんでしたが、

AppComponentを使用すればより多くのコンポーネントに対応可能かと思います。

SVEや新製品のSuPICEの標準機能でも、こういったSalesforceから出た新しい技術についてキャッチアップして行きたいものです。