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

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

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

さて、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パーツを基に作成することで

 

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

 

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

 

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

 

高機能、高速、低価格

そして

簡単設定!!

 

これがLCWPの魅力です。

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

 

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

 

 

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

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

 

ガッツ!!

 

神田仮面でしたー。

Lightning Conductor Webパーツを使ってワークフロータスクを集約する

インフォシェアブログをご覧の皆様、ハリークリスマス!
サイレント イヴ神田です。

Lightning Conductor Webパーツ(以下LCWP)の連載記事ですが、当初の予定通り?記事が増えます!(∩´∀`)∩

LCWPの連載記事を書き始めたのは私なのですが、最初の2回を書いただけで後は他のメンバーに奪われてしまったので

 

なんだかなー(゜レ゜)

 

って思いまして、目立ちたがり屋魂に火が付いたとでも言いましょうか、じっとしていられなくなりましたので、あと2つ記事を書かせていただきまーす!

 

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

 

というわけで、今回はLCWPを使ったワークフロータスクの集約です。

えーいきなりLCWPの話じゃないのですが、弊社インフォシェア株式会社は、Nintex社製品も取り扱っておりまして、SharePointワークフローのデファクトスタンダードと言っても過言ではない、Nintex Workflowも取り扱ってるんですねー。
で、そのNintex Workflowにとても便利なWebパーツ「マイ ワークフロー タスク」と「自分が開始したワークフロー」というのがありまぁす。

image

 

これらのWebパーツは、その名の通り自分に割り当てられたワークフロータスク(承認、却下など)や自分がワークフローを開始したアイテム(承認依頼、レビュー依頼など)を複数のリストから集約してくれるWebパーツなんですねー。

とても便利なWebパーツではあるのですが、設定できることが限られているので、「表示列を変更したいー」とか「サイト名でグループ化したいー」とか「期限切れのタスクに書式を付けたいー」といったことができないんですねー。

 

ここでようやくLCWPの登場です!

LCWPは、これまでの記事でもご紹介させていただきました通り、表示列の選択はもちろん、列の値を使ったグループ化や条件付き書式にも対応しています。
つまり、Nintex WorkflowとLCWPを組み合わせれば、

より便利な

「マイ ワークフロー タスク」と「自分が開始したワークフロー」Webパーツが

作れるのですー!

image

 

さらにLCWPは1つのWebパーツに複数のビューを作成できるので、

「マイ ワークフロー タスク」と「自分が開始したワークフロー」を

1つのWebパーツに表示させることもできちゃうのですー!

  • マイ ワークフロー タスク

image

 

  • 自分が開始したワークフロー

image

 

といった感じで、今回はNintex Workflowとの連携といった形でご紹介させていただきましたが、もちろんSharePoint標準のワークフローでも同じことができますので、複数のサイトやリストでワークフローを使っている場合などは、とても便利になると思いまーす。

 

ちなみに今回ご紹介した内容は、動画でもご覧いただけますー。

 

 

何か今回はあっさりしてる感じがしますが、たまにはこんなのもありでしょうか。。。
いつもがくどすぎるという話もありますが(;´・ω・)

 

 

今年のクリスマスは、どんな奇跡が起きるでしょうか?

ちなみに弊社はクリスマスに1日早い納会を行います。。。

 

I wish you a joyful Christmas from the bottom of my heart♡

 

神田

Nintex Formsと連携してみる

こんにちは、引き続きインフォシェアの飯島と申します。

今回は、Lightning Conductor Web パーツのある画面をNintex社のNintex Formsの画面から呼び出すデモ用サンプルについてご紹介します。動作の様子はこのページの下の動画でご確認ください。

連載記事(Lightning Conductor Web パーツ)の目次はこちらをご参照ください。

Nintex Formsは弊社でお取り扱いしているNintex社製の、SharePointリストのフォーム(アイテムの作成/表示/編集画面)のカスタマイズツールです。
Nintex Forms 2010/2013 – インフォシェア株式会社(弊社のNintex Formsの製品紹介ページ)

SharePointのリストのにおける画像列(「ハイパーリンクまたは画像列」でURLの形式:画像)は、値としてURLが入る列です。リストアイテムの編集フォームでは、ユーザーはURLを入力します。
SharePointの標準の新規・編集フォームにおける画像列の既定の入力UIはURLを入力するテキストボックスです。

image

NintexFormsを使用した場合でも既定では、標準のフォームと同様のUIです。

image

このUIでは、たとえ同じサイトコレクションの画像ライブラリのある画像を参照したい場合も、URLをコピーしてきて、それを貼り付けて入力するという煩雑な手順が必要になります。

入力フォームで直接的に画像ライブラリの画像を選択して、選択時にそのURLを自動で入力できると便利です。
ご紹介するデモ用サンプルのUIのイメージは、選択ボタンをクリックすると、複数の画像ライブラリの画像を一覧できるダイアログが表示され、その中の画像を選択して、OKボタンでダイアログを閉じると、フォームにその画像が入力されるというUIです。また、入力後にどの画像が選択されているのかわかるようにするために、フォームにも画像を表示します。

簡単画像URL入力

以上のことは、SharePoint標準技術だけでも実現することもできますが多くの工数を必要とします。(実際にそのようなご要望を受けてのお仕事もありました。)また、データ取得元にしたい画像ライブラリが複数ある場合、ライブラリごとに取得のスクリプトを記述する必要があります。

アドオンツールを使うことで、比較的簡単に実現できます。

  1. フォームのUIを簡単に自由に編集してカスタマイズするために、NintexFormsを使用します。
  2. 複数の画像ライブラリから画像を取得して一覧表示するために、Lightning Conductor Web パーツ(以下LCWP)を使用します。
    デモ用サンプルでは、選択ダイアログの中身をカスタマイズするためなどに、若干JavaScriptを使用します。(詳細は割愛します。)

データソースとして同一ファーム内の画像ライブラリが追加された場合にも、LCWPの設定で選択を増やすだけで対応が可能です。

以下で、このような”画像URL簡単入力”を満たすUIの作成手順の概要をご紹介します。

前提として、画像列を持ったリストがあって、同じファーム内の複数の画像ライブラリの画像のURLを設定したいとします。また、各サイトコレクションで、NintexFormsとLightning Conductor Web パーツが有効化されているとします。画像ライブラリの各画像のタイトルも参照できますので、タイトルに値が入っているとします。

まず、ダイアログの中身となるLCWPのページを作成します。サイトコンテンツ>サイトのページに移動して、リボン>「ファイル」タブ>「新しいドキュメント」のドロップダウンから新しいWebパーツページを追加します。「レイアウトテンプレートの選択:ページ全体, 縦型」で作成します。

Webパーツページの作成

このページに、LCWPを配置します。LCWPの設定画面を開き設定をします。

今回は、ディスプレイプロバイダーは既定の「SPGridView Display Provider」のまま特に変更しません。
「データソース」タブのロールアップソースのドロップダウンで「複数のリストのアイテムを表示」を選択、ツリーで、ダイアログの画像一覧のデータソースとなる画像ライブラリを選択します。後になって、画像ライブラリが追加された場合にも、こちらの設定画面で、選択すればいいだけです。

ロースアップソース:複数のリストのアイテムを表示

画像ライブラリ

リスト/アイテムタイプで、

  • コンテンツタイプグループ:ドキュメントコンテンツタイプ
  • コンテンツタイプ:画像

と選択。(選択しないと、画像ライブラリのフォルダもアイテムとして表示されてしまいます。)

画像コンテンツタイプ

「列」タブでは、親リストタイトル、ID(リストごとのアイテム識別番号)、URLパス、タイトル、画像の幅、画像の高さにチェックします。
また、ここで画面上部の「集計列の追加+」の+アイコンをクリックして、集計列の追加ダイアログを開き、以下のように設定します。この列は画像列のURLの画像を<IMG>タグで表示するためのものです。幅の式が少々複雑になっているのは、100ピクセルの範囲に画像を縦横比を保ちながら縮小して収めるためです。

  • 列名:画像プレビュー
  • 列の種類:文字列型
  • 数式のテキストエリア:(表示したいHTMLを記述します。数式のドロップダウンで列を選択して「フィールドの挿入」をクリックするとフィールド参照が追加できます。URLパス→[FileRef]、画像の高さ→[ImageHeight]、画像の幅→[ImageWidth]、→名前(一番下)→[LinkFilename]、…)
    “<img src=””+[FileRef]+”” width=””+(([ImageHeight].Value  <= [ImageWidth].Value) ? (100.0 <[ImageWidth].Value)? 100.0 : [ImageWidth].Value : (100.0 <[ImageHeight].Value)? 100.0*[ImageWidth].Value/[ImageHeight].Value : [ImageWidth].Value)+”” alt=””+[LinkFilename]+””  title=””+[Description]+””/>”

集計列の追加

集計列の追加ダイアログ

「表示」タブでは、「1ページあたりのアイテム数」に「6」など整数値を入力することで、ページングの設定ができます。

ページングの設定

設定を完了して、「保存」ボタンのクリックで、ダイアログを閉じます。

image

この画面を画像選択ダイアログとして使用するので、ラジオボタンと「OK」、「Cancel」ボタンを追加します。ここでは、詳細は割愛させていただきますが、デモ用サンプルではコンテンツエディターWebパーツを追加して、そこにJavaScriptを記述して実装しています。

image

次に、呼び出し側のアイテム新規・編集フォームの画面を作成します。NintexFormsのデザイナーを開きます。

image

イメージ列に紐づいているハイパーリンクコントロールより下にあるコントロールを下方に移動して、空いた領域に「ボタン」と「イメージ」コントロールを配置します。

また、フォームの「設定」の「カスタムJavaScript」にダイアログを呼び出す関数「OpenDialog()」を記載してあるとします。(コードの詳細は割愛)JSのコードで、ダイアログがOKで閉じられると選択した(ラジオボタンがON)画像のURLが、ハイパーリンクコントロールに入力されるようにしてあるとします。

ハイパーリンクコントロールの設定で、「詳細>JavaScript変数にクライアントIDを保存」で「はい」を選択して、変数名に「ImageLinkObject」と名付けます。

配置した、ボタンコントロールの設定で、

  • ボタンアクション:JavaScript
  • ボタンタイプ:ボタン
  • ボタンラベル:画像選択
  • 詳細>クライアントクリック:OpenDialog()

として、イメージコントロールにはURLに画像列「イメージ」の参照を設定します。

イメージ列

フォームの設定が完了したら、フォームを「発行」して、デザイナーを閉じ、新しいアイテムを追加画面で「画像選択」ボタンをクリックします。

image

ダイアログで、任意の画像を選択して、選択ラジオボタンをオンにして、「OK」ボタンをクリックしてダイアログを閉じます。

image

ハイパーリンクとイメージのコントロールにURLと画像のイメージが表示されました。

image

LCWPやNintexForms、サンプルの内容に関してご興味ある方は、ぜひ弊社までご連絡お願いします!

今回のエントリの内容についての動画もご覧いただけます。