ブログBLOG

カテゴリー:Lightning Tools

Lightning Conductor SPFx の活用例 「プリセットWebパーツ」

2020年09月29日(火)

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

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

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

sc1

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

sc1

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

sc1

②設定をクリック

sc1

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

sc1

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

sc1

sc1

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

sc1

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

sc1

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

sc1

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

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

sc1

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

sc1

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

sc1

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

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

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

sc1

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

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

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

sc1

⑥列の設定

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

sc1

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

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

sc1

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

sc1

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

sc1

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

sc1

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

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

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

sc1

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

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

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

sc1

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

sc1

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

sc1

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

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

sc1

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

sc1

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

sc1

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

sc1

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())し、1を足すことで“今月”としています。有効期限が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の整数で取得し、1を足すことで“今月”としています。
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)
→8+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"
---------------------------------------------------------------------------------------

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

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のサイトコレクションを横断して、分散された情報を集約するビューを実現し、さらに、ビューの作成は、設定ウィザードに沿ってノンコーディングで簡単に行うことができます。

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

Lightning Conductor Webパーツのプリセット Webパーツを使ってみる

2015年01月29日(木)

インフォシェアブログをご覧の皆様、ご挨拶が遅くなりましたが、新年あけましておめでとうございます!
本年もよろしくお願いいたしますー!!
旧正月が近づいておりますが…(;´∀`)

皆様は、年末年始はいかがお過ごしでしたでしょうか?
私は、妖怪ウォッチ三昧でしたー。

さて、2015年最初の投稿は、Lightning Conductor Webパーツ(以下LCWP)ネタです。
昨年からの引き続きですが。。。
本当は、昨年中に書く予定だったのですが(;・∀・)

 

連載記事(Lightning Conductor Webパーツ)の目次はこちらから

 

さてさてー、今回はプリセット Webパーツということなのですが、プリセット Webパーツとはその名の通り、Lightning Conductor Webパーツの各種設定がプリセット(予め設定)されているWebパーツになります。

つまり、何も設定しなくてもWebパーツをページに追加するだけで

 

すぐに使えてしまうのです!!

 

で、そのプリセット Webパーツは、4種類用意されていますー。

  • イベント ロールアップ
    予定表リストを集約し、集約したアイムをXSLTで作成されたカレンダー形式のビューに表示するWebパーツ。
    月単位、週単位、日単位での表示が可能です。
Monthビュー Weekビュー Dayビュー
image image image

 

  • お知らせ ロールアップ
    お知らせリストを集約し、集約したアイテムをXSLTで作成されたビューに表示するWebパーツ。
    有効期限前のお知らせのみ表示するビューも用意されています。

image

 

  • タスク ロールアップ
    タスク リストを集約し、自分のタスクだけを表示するWebパーツ。
    すべてのタスクや期限切れの自分のタスクだけを表示するビューも用意されています。

image

 

  • ドキュメント ロールアップ
    ドキュメント ライブラリを集約し、自分のドキュメントだけを表示するWebパーツ。
    すべてのドキュメントやチェックアウトされた自分のドキュメントだけを表示するビューも用意されています。

image

 

いかがでしょう?
SharePointのコンテンツ集約をやりたい!ってなった時に真っ先に出てくるものばかりではないでしょうか?
このようなよく使う設定がされているLCWPをページに追加するだけで、

 

すぐに使えてしまうのです!!(2回目)

 

しかも、プリセット Webパーツは、プリセットされた設定のまま使うだけでなく、表示列の変更やフィルタ設定、グループ化など、通常のLCWPと同様に

 

設定変更もできるのです!!

 

つまり、プリセット Webパーツを基に作成することで

 

効率よく設定作業ができるのです!!

 

もちろん今回も動画で実際の動きをご確認いただけますので、こちらもぜひご覧くださいー。

[youtube https://www.youtube.com/watch?v=urq14TYuTws]

 

今回のLCWPの連載記事の最初に書きましたが、LCWPは、

 

高機能、高速、低価格

そして

簡単設定!!

 

これがLCWPの魅力です。

「コンテンツクエリ Webパーツ(コンテンツ結果 Webパーツ)やコンテンツ検索 Webパーツでは、少し足りないんだよねー」とか、「SharePointが活用されて、いろんな業務でSharePointが使われてるのはいいのだけど、情報が散在してて管理しにくいんだよねー」といったようなお悩みをお持ちの方は、ぜひ弊社インフォシェアにご相談ください。

 

ではでは、ひとまず連載は終了いたしますが、新機能が追加されたり、新たな活用方法がありましたら、ご紹介させていただきますー。

 

 

妖怪ウォッチすごいですねー。
去年の年末までは、流行ってるんだね(゜レ゜)
ってぐらいの感覚だったのですが、流行ってるどころの騒ぎじゃないんです。
ある意味社会現象といえますねー。

LCWPもおかげさまで多くのお問い合わせをいただき、ご導入いただいたお客様も増えてまいりました。
いつの日か社会現象になる日を夢見て…。

 

ガッツ!!

 

神田仮面でしたー。