Art-Break .log : Taichi Nakamura
Microsoft 365 ( Office 365 ) ・ Power Platform ・その他の情報発信ブログ
▼Nintex Forms でパネルを配置し、CSS クラスに「sample」と指定。
▼以下のCSSを記述。
.sample { border:10px #000 solid; }
Formsを発行してフォームを開くと…
▼あきらかに10pxより太い枠線です。
倍の20pxの枠線になっていました。
ソースを調べると原因がわかりました。
▼sampleが指定されているdivがなぜか2個あるんですよね。
▼二重になっているので10px×2個で20pxになってしまうんです。
原因がわかれば対処方法もわかります。CSSに以下の記述を足します。つまり2個目を無効にする感じです。
.sample .sample { border:none; }
▼無事に10pxになりました。
Nintex FormsはSharePointの標準では実現できないフォーム画面のカスタマイズを比較的容易に実現できる便利なツールですが、過去にも色々クセがある事を紹介いたしました。
Formsでフォーム画面をカスタマイズする再に重要な点として、表示速度の問題は外せません。いくらUIが優れてフォーム入力が便利になっても、表示するのに時間がかかってしまってはUXとしては台無しです。
僕自身がFormsを使用した制作経験が少ないのですが、その少ない経験やググった結果から、Formsで表示速度に影響を及ぼすであろう原因を以下に挙げます。
・コントロール数
・ルール数
・カスタムしたJavaScript・CSS
もちろんサーバーやクライアントPCやブラウザ（得にIEは遅い…）などもありますが、同一環境での影響という意味では、大きくは上の3項目が挙げられます。カスタムしたJavaScript・CSSに関しては内容によって左右されますので、そういう意味でも表示速度に問題が出た場合の対応策として挙げやすいのが、単純にコントロール数やルール数をダイエットさせる方法かと思います。
デザインのみで利用しているパネルを妥協できる範囲内で削除してみたり、一つにまとめられるであろう列はまとめたり、表示・非表示で利用しているルールを本当に必要かどうか精査してみたり、バリデーションで利用しているルールを本当に必要かどうか精査してみたり。表示速度と言う観点に重点を置き、真剣に検討をすると意外とコントロール数もルール数も減らす事ができます。軽く検証したところ、20コントロールを削除するとIEでおよそ1秒～1.5秒早く表示される感じです。小手先の工夫でも十分に体感できる可能性があります。
コントロール数と単純に言ってもそのコントロールの種類でも左右されるのかもしれませんが、そこまでは把握できていません。ただ、軽く検証してみたところでは、コントロールの種類で大きく表示速度に左右される事はなさそうです。（ただし、別の場所からデータを引っ張ってくるようなコントロールは影響大きそうですが、そこまでは調べきれていません。）
おそらくですが、コントロール数が増えるほど表示時間が遅くなる原因は、コントロールを適切に配置するのに、CSSで大枠のdivにインラインで[top][left][height][width]といった位置情報が記述されていて、それらを表示の際に全てのコントロールで計算しているので時間がかかっているのではと思っています。（あくまでも予想なので違っていたらゴメンナサイ。）
また、例えばパネル内に非表示にした隠し項目や、タブのように開閉させてコントロール数を表示上で制御している場合でも、CSSでdisplay:none;で非表示にしているだけで、ソースを見るとHTML上では記述があり、上述の位置情報も計算されていたので、表示上のコントロール数ではなく、デザイン画面で実配置したコントロール数が影響範囲です。実際に表示速度が遅い状態でコントロールを非表示にしても遅いままです。
そういう意味でも、もし表示速度でお悩みの場合は、やはりコントロール数を減らしていく方向が一番考えずに表示速度を速くさせる方法なのかもしれないです。
SharePointのユーザー列はサジェスト機能で入力途中で候補がドロップダウンで表示されます。
Nintex Formsのユーザー列も同じです（Forms的には「人々」というコントロール名です）。ただ、若干見た目や表示項目が違います。この環境では設定していないけど、プロフィールに写真を登録していれば写真も表示されるようです。
どちらもSharePoint2007あたりでは存在していた、ダイアログでユーザーを検索する機能はなくなっています。
※Formsではレガシーコントロールとして「人々 V1」というものがあります。サーバーの全体管理から追加をします。
【参照】
Using the legacy People Picker control with Nintex Forms
Nintex Formsのユーザー列では、SharePointの標準のユーザー列にはない注意点があります。
サジェストのドロップダウンが下のコントロールに潜り込んで隠れてしまうんです。
原因はコントロールの重なり順です。過去の記事で軽く触れています。
【参照】
Nintex Forms コントロールのクセと対策 その1
PowerPointの「オブジェクトの順序」みたいな概念があり、上から順番に配置していく事を考えると、上にあるユーザー列のコントロールより、下にある複数行テキスト列のコントロールの方が前面にあり、構造上、背面にあるユーザー列のコントロールが隠れてしまうのです。
原因がわかれば対策はわかります。ユーザー列を前面に出せば良いです。該当するユーザー列を選択し、「最前面へ移動」をクリック。
解決しました。
この注意点は、作成中は結構盲点で見落としがちなので、ユーザー列を追加する際には気に留めておきましょう。
ちなみにFormsを起動した際のデフォルトの配置状態でもこの現象は起きます。
SharePointの選択肢列で不便に思うのが、ラジオボタンやチェックボックスが1列縦並びにしかできないこと。ムダに縦スクロールができてしまいます。選択肢が多い場合はドロップダウンにしがちですが、複数選択させたい場合はドロップダウンは使えません。
例えばこのように「好きなフルーツ」列を作りました。フルーツ大好きなので単数選択は僕にとっては酷な選択です。なので複数選択できるようにチェックボックスにしました。縦長になりますよね。こういうものだと思えば気になりませんが、なんとかしたい場合には、Nintex Formsでは2列以上に簡単にできます。
必要なコントロールの設定はこの3点です。
例によって文字だけでは意味がよくわからないので検証をします。
まず「列の数」で何列にしたいかを設定します。単純に何列にしたいのか数字を入力するだけでもOKだし、式も使えます。ここに「3」と入力するだけで、3列に設定してみました。簡単です。
次に「選択肢の配置」というのがわかりにくいです。
「下から右へ」はこんな並び順。これを見ると「下から右へ」の意味がわかりますね。
ここを「右から下へ」に変更するとこうなります。
つまり「右から下へ」というのはこういう事ですね。
最後に「列の配置」。
これは「固定」「浮動」とあります。今までは固定。
浮動に変更すると、こうなります。
固定は列ごとに左寄せされるのに対し、浮動は全てが左寄せになります。このままでは値と値の間の余白が不十分なので見づらく、何かしらの調整がしたくなりますね。
このようにFormsなら簡単に3つの設定で列の値を横並びにする事が可能です。
「その他の色」から戻せる
例えばExcelでセルに色を塗った後に、元の透明に戻したい場合、「塗りつぶしなし」を選択すれば元の透明に戻せますよね。（白を選択しても見た目では元に戻るけど、厳密には上述の方法が元に戻す方法）
Formsでパネルなどのコントロールに色を塗る際に、「背景塗りつぶし色」で色を選択します。（「背景塗りつぶし色」ってネーミングがもうね…）
問題は塗った後に元の透明に戻したい場合。
Excelなどのような「塗りつぶしなし」的な解除ボタンはどこにもありません。操作の直後に戻すなら「元に戻す」ボタンで戻すことは可能ですが、他に色々な操作をした後に戻したい場合には、使えませんよね。
不可能かと思いましたが、分かりづらいところで透明に戻す方法があったので紹介します。
同じく「背景塗りつぶし色」で、一番下の「その他の色…」を選択します。
背景色ダイアログの「新しい色：」の下あたりにRGBの数値があって、そこを空欄にしてOKを押します。
透明に戻りました。
ちょっとわかりづらいですよね。数分悩んだので紹介してみました。
「名前付きコントロール」：フォーム上でリアルタイムに反映される。
「アイテムのプロパティ」：保存して列に値が落ちた後に反映される。
※今後はなるべく結論を先に書く構成で記事を書きたいと思います。
条件を記述する時などに表示される「数式パレット」ダイアログ内のタブには、「ランタイム関数」「共通」「アイテムのプロパティ」「名前付きコントロール」があります。
その中の「アイテムのプロパティ」「名前付きコントロール」について。
「アイテムのプロパティ」は実際の列名が表示されています。
「名前付きコントロール」は「名前」欄に入力してあるコントロール名が表示されます。
ただし、名前欄を埋めていれば全てのコントロールが表示されるわけではなく、ラベルに名前を入力してもここには表示されません。しっかり検証したわけではないのですが（無責任！）、SharePoint側に列として存在するコントロールであり、名前が入力されているコントロールが条件のようです。
ここで疑問点。
列名が選べる「アイテムのプロパティ」と、列として存在し名前を入力したコントロールが選べる「名前付きコントロール」。結局、同じモノじゃないですか。
でも大きな相違点が2点ほどありました。
両者は同じモノのようで厳密には違います。
「アイテムのプロパティ」は列の値を参照します。つまり、一度保存をしてSharePoint的に列に値が落ちないと反映されません。
「名前付きコントロール」はコントロールの値を参照します。つまり、保存をしなくてもForms上に入力もしくは選択された値がリアルタイムに反映されます。
このリアルタイム性の違いで使い分けるようですね。検証してみます。
select列の値を選択するとパネルが表示される仕組みを作りました。もちろん「名前付きコントロール」と「アイテムのプロパティ」両方。
selectでAを選択すると、「名前付きコントロール – A」パネルのみ表示されます。リアルタイムに反映されるからです。値に落ちないと反映されないアイテムのプロパティの方は、この時点では表示されません。
この状態で保存をし、アイテムを開いてみます。そうすると、「アイテムのプロパティ – A」も表示されました。値が落ちないと反映されないからです。
どちらも数式パレットで選択して張り付けると、数式欄には赤字で下線が引かれた状態で表示されます。
▼名前付きコントロールの「Select」を選択
▼アイテムのプロパティの「select」を選択
単なるテキストではないので手入力はできず、かならず上の列名・コントロール名をダブルクリックして式に挿入します。この式はコピーをして別のルールなどにペーストしても、赤字下線でペーストされ、しっかり列名・コントロール名として認識されます。ここまでは問題ありません。
しかし、例えばこの式をテキストエディタなどにペーストして加工した場合、更にテキストエディタからコピーして数式パレットにペーストすると、赤字下線ではなく単なるテキストとしてペーストされるだけで、列名・コントロール名を指定した事にならず、式としては無効です。
つまり式はテキストエディタなどを経由するとコピペができないんです。これ地味に厄介です。（できる方法があったら教えてください！）
ただ、「アイテムのプロパティ」を選択して作った式は、数式パレット上では同じく赤字下線ですが、その後ルールを再度見るとなんか変わっています。
{ItemProperty:select}
selectという列なので列名と内部名がイコールになっているので例としては良くなかったのですが、「テスト」という列名だと「{ItemProperty:_x30c6__x30b9__x30c8_}」となるので、やはり「{ItemProperty:列の内部名}」です。
さて、この{}で表示された「アイテムのプロパティ」は赤字下線ではないです。なので手入力もできるしテキストエディタ経由でコピペもできるんです。
以前「Nintex FormsでDropbox？？」という記事を書いて、Forms内のある場所で「Dropbox 削除」という表記があり、Dropboxと連携するのかと思ったらそういうわけでもなく、英語版の表記は「Delete」だったので日本語訳した際になんでDropboxが紛れ込んだのか意味不明と書きました。
同様の事が他にもあったので紹介します。
Formsでコントロールを必須項目にしたく、ルールの種類で「検証」を選択すると…
「Yammer メッセージ」？？
Yammerはマイクロソフトの製品なので、Dropboxよりも連携しそうな雰囲気を醸し出しています。ただ、検証とYammerはどう連携するんだろう？Yammerに投稿される？う～む…
結論はやはり別にここでは連携しないようです。
英語版を見てみると…
「Message」
でた！Yammerなんて記載はないじゃない。またまた日本語訳した際に紛れ込んだようですね。しっかしDropboxといいYammerといい不思議ですね。
という事で、はじめてこれを見た時に混乱しますが、これは条件が合わなかった際（必須項目を設定したなら未記入だった場合）、コンテンツエリア上部に赤文字で出すテキスト文です。
こちらも、もしYammerに意味があるなどご存知の方はご一報いただければと思います。
SharePointの標準ではできないFormsの様々な機能の中のよく使われそうな機能が、表示・非表示のルールかと思います。別の選択肢でAを選択するとAパネルが表示され、Bを選択するとAパネルは消えてBパネルが表示されるみたいな。非常に便利な機能ですが、クセがあります。
サンプルとしてこのようなフォームを作りました。
上部操作エリア内にある選択肢でそれぞれのパネルの表示・非表示を制御します。
このように、Formsで配置した上からABCの順番は崩れずに、表示・非表示で自在に制御できるようにしたい。
えっ？？ABじゃなくてBA？？？つまり、Forms上で正しく上からABCとパネルを並べても、表示させるラジオボタンをクリックするパターン次第で、配置順がABCにならなくなる。
これは例えば業務フロー順にパネルを表示・非表示させるとして、その順番が入れ替わってしまったら困りますよね。これ、半日ほど試行錯誤して原因と解決方法がわかりました。
といっても明確に原因がわかったわけではなく、想定外な挙動をするパターンが判明しただけです…。
隙間なくキレイにパネルを配置した際に起きる現象でした（なんてこった）。
パネルを1マスずつ空けて配置しなおします。
先ほどの想定外な挙動と同じ動作をしますと…
BAではなく、ちゃんとABになりました。他にも色々なパターンで表示・非表示を繰り返しましたが、上からABCが崩れることはありませんでした。
表示・非表示の際にはパネルが重なってしまっても思った挙動になりませんが、まさかキレイに配置してもこのような挙動になるとは思いませんでした。
通常はパネルとパネル、コントロールとコントロールをキレイに配置しても問題ありませんが、もしこのような挙動になる、もしくはしようとしている場合は、1マス空けて配置すると良いです。
コントロールを作っているとたまにコントロール内にスクロールが発生する事があるかと思います。この状態でコントロールを移動させたい時に気をつけたい点があります。
スクロール部分をドラッグしてしまうと、ドロップしてもコントロールは離れません。接着剤でくっついてしまったかのごとく離れません。これ結構焦ります。
何度左クリックしても離れません（たまに離れる事もありますが…）。
右クリックをすると離れますが、掴んだコントロールや入れ子にしているパネルが瞬間移動で意図しない場所に動いたりします。
また、くっついてしまった状態で、画面外でクリックすると、コントロールが消えてしまいます。しかも高確率で元に戻すボタンを押しても戻ってきません。
つまり、コントロールの瞬間移動か失踪事件です。このようにNintex Formsは結構動作が不安定だったりします。複雑に作れば作るほど、ドキドキします。
【対策】
Nintex Formsでフォームを作成すると、添付ファイルのところに「Dropbox 削除」って出てくるんです。
▼編集画面の添付ファイルコントロール
▼添付ファイルをアップした後の表示
「え？Dropbox？？Dropboxと連携でもするの？？デフォルトで？？」
って思っちゃうじゃないですか。「Dropbox」って言ったらオンラインストレージサービスのDropboxが有名じゃないですか。
これややこしいですね。Dropboxと連携する機能はNintex Workflowにはあるようですが（詳しくないです）、ここに関しては別に連携しているわけではないんですよね。ただのリストの添付ファイルなんですよね。
添付ファイルの他にも出てきます。Formsの編集画面でコントロールを選択した際のリボンを見ると…
出た！Dropbox 削除！
これは結局、コントロールを削除するメニューなんですよね。
ちなみに英語版はどうなっているのかな？とググってみると…「添付ファイルを追加」は「Add Attachment」、「Dropbox 削除」は「Delete」でした。
添付ファイルの削除だけでなく、コントロールの削除にもDropboxが出てくるところを見ると、Deleteを日本語訳した際に「Dropbox 削除」になったんでしょうかね。
Dropboxはいったいどこから出てきたんだ…、謎です。ややこしいので正直「Dropbox」という表記は表示させたくないですね。Formsの編集画面のリボンの方はイイとしても、添付ファイルの部分に関してはユーザーが見る部分なので。JSで消せそうだし、CSSでも消せそうなので、そのうちやってみようと思います。
今回はとりあえず問題提起。もしDropboxに意味があるなどご存知の方はご一報いただければと思います。