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、サンプルの内容に関してご興味ある方は、ぜひ弊社までご連絡お願いします!

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

XSLTを用いたグラフィカルなビューを作ってみる

こんにちは、初めましてインフォシェアの飯島と申します。

今回は、Lightning Conductorで集約したSharePointリストアイテムデータを、標準のリストビューテーブルではなく、カスタマイズした独自の表示形式で画面に表示できる機能をご紹介します。

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

事前にテンプレートファイルを用意しておけば、Lightning Conductor Webパーツの設定から参照するだけでそのテンプレートに従った表示が可能です。

テンプレートの記述には、Webの標準技術の一つであるXSLT変換を使用できます。XSLTは、任意のXML(データ)から別の形式のテキストに変換を定義する言語で、それ自身もXML形式(ファイル拡張子は「.xsl」)です。特に変換先にはWebページ記述言語であるHTML形式が使用されます。

Lightning Conductorで集約したデータはXMLの形式データとして、XSLTから参照できます。これを任意のHTMLに変換する記述を書くことで、標準のテーブルを超えた表現が可能です。汎用のテンプレートを適用することでデータの内容によらずに統一的な表示も可能ですし、専用のテンプレートを作成することで固有のデータの内容に応じた表示も可能です。

XSLT変換

まずは、すでにカスタマイズされた見た目を定義したXSLファイルがあるとして、Lightning Conductor Webパーツからの参照方法をご紹介します。
ここでは、複数のアイテムを横並びに(プロパティを縦並びに)表示する(通常のリストビュー表示の行と列を転置)定義があるXSLファイル「TranspositionList.xsl」を用意してあるとします。このファイルをサイトのスタイルライブラリのフォルダー(/Style%20Library/XSLForLCWP/)にアップロードしてあるとします。

また、すでに以下のようなリストとアイテムがあるとします。

元リスト

Lightning Conductor Webパーツの設定画面の「Webパーツ」タブの「ディスプレイ プロバイダー設定」で「XSL Style Display Provider」を選択します。

Web パーツの設定

次に「データソース」タブで、上記のリストを指定します。

データソース

さらに、「列」タブで、表示したい列をチェックします。ドラッグ&ドロップで列を並べ替えるとXMLデータの列もその順番が反映されます。

列の設定

続いて、「XSLスタイルシートを選択」のドロップダウンでアップロードして置いた「TranspositionList.xsl」を選択して更新アイコンをクリックします。日付形式には「yyyy/MM/dd」と入力して、「保存」ボタンで設定を保存します。

表示設定

以下のようにリストのアイテムが横並びに表示されました。

XSLTレンダリング結果

以上のように、事前にXSLファイルを用意しておけば、設定は簡単です。

さて、XSLTに関してですが、一般的な文法に関してはこちらでは説明しません(Webの標準的な技術ですので、インターネットに情報はあります)。
XSLTから、LCWP集約結果データが以下のようなXML構造データとして参照できます。(実際にXMLファイルが見えるわけでありません。)

XSLTの内部で参照できるXMLデータ(抜粋)

<?xml version=1.0 encoding=utf-8?>

<Root WebPartInstanceId=xxxxxxxxx DateTimeFormat=yyyy/MM/dd>

<Root>

<Description>

<List>

<Title>SampleCustomList</Title>

・・・ ・・・ ・・・ ・・・

</List>

・・・ ・・・ ・・・ ・・・

</Description>

<Header>

<Field ID=XXXX1 Title=ID InternalName=ID Type=Counter ・・IsChecked=True></Field>

<Field ID=YYYY2 Title=タイトル InternalName=LinkTitle ・・IsChecked=True></Field>

<Field ID=ZZZZ3 Title=イメージ InternalName=xxxxxx ></Field>

<Field ID=AAAAA4 Title=オプション ・・・></Field>

・・・ ・・・ ・・・ ・・・

</Header>

<Rows>

<Row ID=1 Title=“” Url=http://xxxxxxx/DispForm.aspx?ID=1 ・・・>

<Column fID=zzzzzz fInternalName= xxxxxx Value=xxxx.gif, チンゲン菜></Column>

<Column fID=zzaaaa fInternalName=_x8aac__x660e_ ・・・></Column>

<Column fID=aaaabbbb ・・・></Column>

<Column fID=bbbbcccc ・・・></Column>

・・・ ・・・ ・・・ ・・・

</Row>

<Row ID=2 Title=“” Url=http://xxxxxxx/DispForm.aspx?ID=2 ・・・>

・・・ ・・・ ・・・

</Row>

・・・ ・・・ ・・・ ・・・

</Rows>

</Root>

</Root>

 

XSLTに記述する内容は、このXMLから個々のデータを取り出して、HTML要素に置き換えてページを作成する変換の定義です。以下にXSLファイルの抜粋を示します。

TranspositionList.xsl(抜粋)

<?xml version=1.0 encoding=utf-8 ?>

<xsl:stylesheet version=1.0 xmlns:xsl =http://www.w3.org/1999/XSL/Transform

xmlns =http://www.w3.org/1999/xhtml>

<xsl:output indent=no method=html />

<xsl:template match=/ name=vertical>

<xsl:variable name=Rows select=Root/Root/Rows />

<xsl:choose>

<xsl:when test=count(Root/Root/Rows/Row)=0>データがありません。</xsl:when>

<xsl:otherwise>

<table id=LCWPlistItems width=100% style=border: 1px solid black; >

<xsl:for-each select=Root/Root/Header/Field[@Hidden=’False’・・・]>

<tr>

<xsl:call-template name=RowRendering>

<xsl:with-param name=Rows select=$Rows></xsl:with-param>

</xsl:call-template>

</tr>

</xsl:for-each>

</table>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

<xsl:template name=RowRendering match=Field>

・・・ ・・・ ・・・ ・・・

</xsl:template>

・・・ ・・・ ・・・

</xsl:stylesheet>

 

LCWPとこの表示テンプレートの詳細に関してご興味がある方は、ぜひ弊社までご連絡お願いします!

「ディスプレイ プロバイダー設定」は「JSON Provider」も用意されています。こちらは、JavaScriptからLightning Conductorで集約したデータを、やはりWebで広く使用されているJSONという形式で参照して、ページのHTML要素を自由に記述できる設定となります。XMLよりもJavaScriptの扱いに慣れている技術者がいる場合は、使い慣れた「JSON Provider」を使用して表示するためのテンプレートを開発していただくということも可能です。

「XSL Style Display Provider」や「JSON Provider」を使用したビューのカスタマイズについての動画もご覧いただけます。