ブログBLOG

2020年6月の記事

Lightning Conductor SPFx の活用例 「支社掲示板」

2020年06月11日(木)

 今回の記事では、Lightning Conductor SPFxの活用例をご紹介いたします。
Lightning Conductor SPFxはSharePoint Onlineの サイトコレクションを横断して、分散された情報を集約するビューを実現できます。さらに、ビューの作成は、設定ウィザードに沿ってノンコーディングで簡単に行うことができます。
以下に、東京本社、北海道支社、大阪支社の3つの地域拠点ごとのサイトコレクションのお知らせリストからコンテンツを集約する「支社掲示板」を例に、複数のサイトコレクションに点在するコンテンツを集約するためのビューの設定例をご紹介します。

「支社掲示板」に限らず、基本的にビューの設定は、データ設定ウィザードの沿った、①データソース、②列、③表示の3つのステップとなります。

ステップ①:データソース

どこにあるコンテンツを集約するかの設定となります。
今回の支社掲示板のデータソースの設定内容を言葉で表しますと、「東京本社、大阪支社、北海道支社のサイトコレクションのトップサイトにあるお知らせリストからアイテムを集約する」ものです
まずは、SharePoint Onlineのどこからアイテムを集約するのかを設定するロールアップソースでは、「複数のサイトコレクションのアイテムを表示」を選択します。

すると、テナント内のすべてのサイトコレクションが表示されますので、集約したい情報のあるサイトコレクションを選択します。

目的のサイトコレクションを絞り込むために、サイトコレクションURLなどでフィルタを適用することが可能です。今回は、3つのサイトコレクションに共通して含まれるURL(LCSPFx)でフィルタを適用します。

サイトコレクションURLによって絞り込まれた候補の中から、東京本社、大阪支社、北海道支社のサイトコレクションを選択します。

なお、サイトコレクションの選択のバリエーションとして、以下の3つがあります。
サイトコレクションのトップサイトからアイテムを集約

サイトコレクションのサブサイトからアイテムを集約

サイトコレクション全体からアイテムを集約

今回は、各地域拠点のサイトコレクションのトップサイトにあるお知らせリストにあるアイテムを集約するため、サイトコレクションのトップサイトを指定しています。最後に、リストタイプに“お知らせ”を設定します。※選択肢に“お知らせ”が表示されない場合、更新ボタンをクリックし、ロールアップソースの設定を反映させてください。

ステップ2:列

集約したアイテムの列に関する設定となります。
今回の支社掲示板の列の設定内容を言葉で表しますと、「どの列を読み込むか、どの順番で表示するかを決めるとともに、列の値を利用して表示するアイテムの絞り込みと並び替えを行う」ものです。
まずは、データソースから集約したアイテムについて、読み込む列を選択します。

列を表示する順番の変更は、ドラック&ドロップで直感的に行えます。

次に、列の値を利用して、表示するアイテムの絞り込むフィルタを設定します。
有効期限について、期限内だけのアイテムだけに絞り込むために、以下のフィルタを設定します。

さらに、お知らせリストにおいて、[トップサイトに掲載]の列が“はい”のアイテムのみに絞り込んで表示するため、以下のフィルタを設定します。

最後に、[重要度]の列の値が、“高”、“中”、“低”の順番にアイテムが並び替えるための、計算列を追加作成します。
列名、列の型に適当なものを設定します。
数式では、読み込んでいる列をドロップダウンで選択し、挿入できます。[重要度]を挿入したものが、
[_91cd_x8981_x5ea6]と列の内部名によって表示されております。
下記の数式では、[重要度]の列に対して、“低”を“1”に、“中”を”2”に、“高”を”3”に、置き換えています。
(他の関数につきましては、英語となりますが、こちらのマニュアルをご参照ください。)

これによって、[重要度]の “高”、“中”、“低”のそれぞれを“3”、“2”、“1”に置き換えた[ソート]の列が作成されます。
この[ソート]に対して降順で、アイテムを表示することで、[重要度]によるアイテムの並び替えが設定できます。
支社掲示板においては、[ソート]の降順を優先順位1、[有効期限]の昇順を優先順位2とすることで、重要度が高く、有効期限が短いアイテムを順番に表示しています。

ステップ3:表示

集約したアイテムの列の表示の設定となります。
今回の支社掲示板の列の設定内容を言葉で表しますと、「どの列を表示するかの選択と、列ごとのデザインを行う」ものです。
表示の設定画面は以下のようになります。

エイリアス:表示される列名を変更可能。[親リストタイトル]を[カテゴリ]に変更。
:任意の数値を設定
表示:表示する列に✔
書式設定:色、位置、フォント、アイコン、データバーについて条件付き書式の設定が可能

設定が、どのように表示に反映されているかの確認のため、支社掲示板を再掲します。

書式設定は、列ごとの編集となりますのでそれぞれご紹介します。

■ [支社名]の書式設定
どの地域拠点のお知らせアイテムであるかを示す支社名列には、色、フォント、アイコンの3つを設定しています。

色:文字の色(前景色)を白、文字の背景色を灰色に設定しています。

フォント:ボールド

アイコン:地図上で場所を示すアイコン(Searchでの設定名:POIsolid)

■ [親リストタイトル]の書式設定
カテゴリ列(親リストタイトル列)は、お知らせリストのタイトルに条件を設定し、色分けをしています。
①どの列が、②どのような関係で、③どのような値に、あてはまるかの条件ごとに色を設定していくのみですので、③以外はマウス操作のみで行えます。

■ [タイトル]の書式設定
タイトル列は、前述の[支社名]、[親リストタイトル]の内容の重複となりますが、”重要度”が”高”の条件にあてはまるアイテムだけにアイコンを設定しています。
ただし、条件付き書式の候補となる列は、ステップ2:列で✔を入れた列となりますので、最終的に非表示とする列も、条件付き書式で利用したい列に関しては、ステップ2:列で✔を入れる必要があります。

東京本社、北海道支社、大阪支社の3つの地域拠点ごとのサイトコレクションのお知らせリストからコンテンツを集約する「支社掲示板」の設定は以上となります。

冒頭の繰り返しとなりますが、Lightning Conductor SPFxはSharePoint Onlineのサイトコレクションを横断して、分散された情報を集約するビューを実現し、さらに、ビューの作成は、設定ウィザードに沿ってノンコーディングで簡単に行うことができます。

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