Nintex Formsと連携してみる

tomoyanakazato

12年前

こんにちは、引き続きインフォシェアの飯島と申します。今回は、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を入力するテキストボックスです。

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

このUIでは、たとえ同じサイトコレクションの画像ライブラリのある画像を参照したい場合も、URLをコピーしてきて、それを貼り付けて入力するという煩雑な手順が必要になります。入力フォームで直接的に画像ライブラリの画像を選択して、選択時にそのURLを自動で入力できると便利です。ご紹介するデモ用サンプルのUIのイメージは、選択ボタンをクリックすると、複数の画像ライブラリの画像を一覧できるダイアログが表示され、その中の画像を選択して、OKボタンでダイアログを閉じると、フォームにその画像が入力されるというUIです。また、入力後にどの画像が選択されているのかわかるようにするために、フォームにも画像を表示します。

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

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

データソースとして同一ファーム内の画像ライブラリが追加された場合にも、LCWPの設定で選択を増やすだけで対応が可能です。以下で、このような”画像URL簡単入力”を満たすUIの作成手順の概要をご紹介します。前提として、画像列を持ったリストがあって、同じファーム内の複数の画像ライブラリの画像のURLを設定したいとします。また、各サイトコレクションで、NintexFormsとLightning Conductor Web パーツが有効化されているとします。画像ライブラリの各画像のタイトルも参照できますので、タイトルに値が入っているとします。まず、ダイアログの中身となるLCWPのページを作成します。サイトコンテンツ>サイトのページに移動して、リボン>「ファイル」タブ>「新しいドキュメント」のドロップダウンから新しい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」など整数値を入力することで、ページングの設定ができます。

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

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

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

イメージ列に紐づいているハイパーリンクコントロールより下にあるコントロールを下方に移動して、空いた領域に「ボタン」と「イメージ」コントロールを配置します。また、フォームの「設定」の「カスタムJavaScript」にダイアログを呼び出す関数「OpenDialog()」を記載してあるとします。（コードの詳細は割愛）JSのコードで、ダイアログがOKで閉じられると選択した（ラジオボタンがON）画像のURLが、ハイパーリンクコントロールに入力されるようにしてあるとします。ハイパーリンクコントロールの設定で、「詳細>JavaScript変数にクライアントIDを保存」で「はい」を選択して、変数名に「ImageLinkObject」と名付けます。配置した、ボタンコントロールの設定で、