ブログBLOG

今回の記事では、Lightning Conductor SPFxのプリセットパーツの活用例をご紹介いたします。Lightning Conducor SPFxには、お客様の多くが利用するドキュメントやお知らせなどのコンテンツの表示について、数種類のプリセットWebパーツを用意しております。
　以下に「ドキュメント」、「カレンダー」、「お知らせ」のプリセットWebパーツをご紹介します。

プリセットWebパーツ：LightningToolsDocumentView.js

任意のサイトコレクションおよびサイトから、ドキュメントを集約、プレビューをタイル上に表示するプリセットWebパーツです。フォルダーはフォルダーとして表示されるため、ドキュメントの階層情報を損なうことなく、集約表示することが可能となっております。
　例えば、人事部、経理部、情報システム部のサイトコレクションのドキュメントライブラリのコンテンツを、全社ポータルのサイトコレクションに集約して表示することが可能です。

パンくずリストが表示されるため、フォルダー間の移動も素早く行えます。

上記の例を用いて、Webパーツの追加から順に設定方法をご紹介します。
①Webパーツの追加

②設定をクリック

③アドバンストモードをクリック

④Webパーツの設定
　データソースプロバイダー設定：「Object Model ロールアップエンジンプロバイダー」
　ディスプレイプロバイダー設定：「JSON ディスプレイプロバイダー」

⑤データソースの設定
　ロールアップソース　：「複数のサイトコレクションのアイテムを表示」→対象のサイトコレクションを選択
　リストタイプ：　「ドキュメントライブラリ」

⑥表示の設定
　JavaScriptファイルの選択：「LightningToolsDocumentView.js」

※この時点で、下記の画像のようなドキュメントビューが利用できます。

ただし、「ドキュメントライブラリ」として、サイトコレクションごとのノートブックも表示されるため、フィルターの設定を行います。

⑦列
　フィルター設定（名前）
　フィルター設定（種類）
フィルターマークをクリック

フィルター条件として、[名前]が「チームサイト のノートブック」に等しくない、を設定

[種類]についても同様に、以下のフィルター条件を指定。

3つのサイトコレクションのドキュメントライブラリから、ドキュメントを集約表示するビューの設定は以上となります。

プリセットWebパーツ：LightningToolsCalendar.js

任意のサイトコレクションおよびサイトから、イベント、タスクを集約、カレンダー上に表示するプリセットWebパーツです。文字色、背景色などの書式設定も利用できるため、サイトコレクションごとの色分けや、イベント、タスクなどのアイテムの種類による斜体、下線などの文字飾りの使い分けが可能となっております。
　例えば、人事部、経理部、情報システム部のサイトコレクションのイベント、タスクのコンテンツを、全社ポータルのサイトコレクションに集約して表示することが可能です。

上述のドキュメントビューの設定と重複する手順は省略し、以下に設定方法をご紹介します。

①Webパーツの追加　～　④Webパーツの設定は、ドキュメントビューと同様となります。

⑤データソースの設定　
　ロールアップソース　：「複数のサイトコレクションのアイテムを表示」→対象のサイトコレクションを選択
　リストタイプ　：「タスク」、「予定表」を選択
　列ソース：任意の「タスク」、「予定表」を選択

⑥列の設定

　後述のサイトコレクションごとの色分けの書式設定のために、[親リストタイトル]を選択

⑦表示の設定
　JavaScriptファイルの選択：「LightningToolsCalender.js」
　条件付き書式設定: サイトコレクションごとの色分け、リストの種類ごとのフォントの使い分けを設定

条件付き書式のアイコンをクリック

条件として、
[親リストタイトル]が「schedule_HR」(人事部サイトコレクションの予定表)に等しい
を設定

書式として、
背景色（Back Color）、太字（Bold）を設定
背景色の設定は下記の画像の通り、直感的な操作によって、行えます。

人事部、経理部、情報システム部の3つのサイトコレクション、タスク、予定表の2つのリストの組み合わせた、合計6種類の親リストタイトルごとに、書式設定をする。

3つのサイトコレクションの予定表、タスクから、1つのカレンダーに集約表示するビューの設定は以上となります。

プリセットWebパーツ：LightningTools Announcements

任意のサイトコレクションおよびサイトから、お知らせリストのアイテムを集約、見やすいデザインに整えて表示するプリセットWebパーツです。Lightning Conduntorにおける計算列を活用することで、今月、来月、前月などのアイテムだけに絞り込んだ表示も可能となります。
　例えば、人事部、経理部、情報システム部のサイトコレクションのお知らせリストのアイテムで今月に登録されたもののみを集約して全社ポータルのサイトコレクションに表示することが可能です。

上述のドキュメントビューの設定と重複する手順は省略し、以下に設定方法をご紹介します。

①Webパーツの追加　～　③アドバンストモードをクリック　は、ドキュメントビューと同様となります。

④Webパーツの設定
　データソースプロバイダー設定：「Object Model ロールアップエンジンプロバイダー」
　ディスプレイプロバイダー設定：「JSON ディスプレイプロバイダー」

⑤データソースの設定
　ロールアップソース　：「複数のサイトコレクションのアイテムを表示」→対象のサイトコレクションを選択
　リストタイプ　：「お知らせ」を選択
　列ソース：任意の「お知らせ」を選択

⑥列の設定
現在日時の月とアイテムの有効期限の月が等しい場合“ON”、等しくない場合”OFF”とする計算列[今月]を追加
[今月]列が”ON”であるアイテムのみ表示するフィルターを設定
計算列の追加をクリック

任意の列名（今月）を設定
下記の数式を設定
※記事の末尾に補足説明を記載しております。

[Expires].getMonth()+1 ==(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))+1)?"ON":"OFF"

追加した[今月]の列のフィルターマークをクリック

フィルター条件として”ON”に等しいを設定

⑦表示の設定
　XSL スタイルを選択：「LightningTools Announcements」

3つのサイトコレクションのお知らせから、有効期限が今月であるものに絞った表示するビューの設定は以上となります。

-----------------------------------------------------------------------------------------
有効期限が今月のアイテムを表示するフィルターに用いた数式についての補足説明を以下に記載します。

[Expires].getMonth()+1 ==(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))+1)?"ON":"OFF"

[Expires].getMonth()+1
[有効期限]の列から月を0から11の整数で取得（getMonth()）し、１を足すことで“今月”としています。有効期限が9月の場合、
[Expires].getMonth()+1 →　8+1 →　9
となります。

Date().substring(4,7)
Date()によって現在の日時の文字列を取得、substring(4,7)により4文字目から7文字目である今月の文字列のみとしています。9月に閲覧した場合、
Date().substring(4,7)
→　“Mon Sep 28 2020 13:12:16 GMT+0900 (日本標準時)”.substring(4,7)
→ “Sep”
となります。

(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))+1)
[‘Jan’,’Feb’, ... ,’Nov’,’Dec’].indexOf(Date().substring(4,7))によって月を0から11の整数で取得し、１を足すことで“今月”としています。
9月に閲覧した場合、
(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))+1)
→(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(“Sep”)+1)
→８+1 → 9
となります。

(条件式）?(真の場合):(偽の場合)が利用できるため、全体として
[Expires].getMonth()+1 ==(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))+1)?"ON":"OFF"
は、
有効期限の月 ==　現在日時の月？“ON”:”OFF”
となり、アイテムの有効期限が今月ならば”ON”、そうでないならば“OFF”
という計算となります。

有効期限が前月のアイテムを表示するフィルターに用いる数式
前月が、0から11となるため、数値そのものではなく、12で割った余りが等しくなるかを条件式に設定しています。

([Expires].getMonth()+1)%12== (['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))%12?"ON":"OFF"

有効期限が翌月のアイテムを表示するフィルターに用いる数式
翌月が、2から13となるため、数値そのものではなく、12で割った余りが等しくなるかを条件式に設定しています。

([Expires].getMonth()+1)%12== (['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))+2)%12?"ON":"OFF"
---------------------------------------------------------------------------------------

いかがでしたでしょうか。インフォシェア株式会社では様々な業務のシーンでのお客様の「困った」を解消するお手伝いができるよう優れた海外製品の日本語化や、各種サービスの提供をしております。是非、「お問い合わせ」から、ご連絡ご相談ください。