Morning Girl

Web API, Windows, C#, .NET, Dynamics 365/CRM etc..

【Dynamics CRM】【8.0】モバイル・タブレット用アプリケーションの新コントロールUI その2

前回の記事にて、モバイル・タブレット用の新しいコントロールUIを紹介しました。

今回の記事では、実際の設定方法や設定時の注意点などを紹介していきたいと思います。

しかし、思いのほか情報が少なく、結構調べるが手探りで苦労しました……。

線形スライダー

f:id:sugimomoto:20160102235317p:plain

[種類]整数(形式:なし)・通貨・浮動小数点・10進数

整数などの数値入力系における新しい入力用コントロールです。線形ゲージと似ていますが、こちらのほうが若干細かく入力できる? 感じがします。

数値系の入力方式ではほとんど指定するのですが、以下のように[最小][最大][ステップ]を指定します。

f:id:sugimomoto:20160102233414p:plain

編集ボタンをクリックすると以下のように静的な値もしくは、ほかのフィールドに依存するかどうかを選択できます。

f:id:sugimomoto:20160102233925p:plain

たとえば、事前に入力させるフィールドを[最大]に依存させることで、目標値からはみ出ないように入力させたりすることが可能です。

[ステップ]ではスライドの刻みの指定です。[10]と指定すると、10、20、30と刻む入力が可能です。

オプションセット

f:id:sugimomoto:20160102234807p:plain

[種類]オプションセット

オプションセットをボタン形式で入力させることが可能になるコントロールです。

設定方法は面倒ではないのですが、一番の注意点として[二つか三つの選択肢にしか対応していない]という点が挙げられます。

4つ以上はデフォルトの入力方式しか選べませんので、注意する必要があります。

フリップスイッチ

f:id:sugimomoto:20160102234941p:plain

[種類]2つのオプション

2つのオプションをスマートフォンなどでよくあるフリップスイッチ形式で入力させることが可能になるコントロールです。

設定は特にありません。

星評価

f:id:sugimomoto:20160102235203p:plain

[種類]整数(形式:なし)

5つ星評価形式で整数を入力することができるコントロールです。星の数に応じて、1~5の数値が入力されます。

設定方法としては、星の最大値を以下のように2~5まで指定できます。

f:id:sugimomoto:20160102235507p:plain

放射状ノブ

f:id:sugimomoto:20160102235743p:plain

[種類]整数(形式:なし)・通貨・浮動小数点・10進数

放射状、円形状で数値入力が可能になるコントロールです。アークノブが半円に対して、こちらが円形になります。

パーセンテージを入力させるときなどに有効かなと思います。

設定方法としては数値系コントロール共通で[最小][最大][ステップ]を指定します。

マルチメディアコントロール

f:id:sugimomoto:20160103000132p:plain

[種類]1行テキスト(URL)

1行テキストのURL入力時に、Youtubeなどのビデオ用URLだった場合、プレビューをCRM画面上で表示させるためのコントロールです。

対応しているメディアは[ストリーミング MPEG4 ファイル][YouTube ビデオ][Azure メディア][オーディオ ストリーム]とのことです。

いまいちどこまで対応できて、どこまで対応できないのか未検証ですが、Office365Videoで営業資料動画などを共有することなどに利用できれば一番便利かなと思います。

ナレッジベースなどとして、エンジニア向けテクニカル動画などもいい感じでしょうか。

ペンコントロール

f:id:sugimomoto:20160103001235p:plain

[種類]複数行テキスト

一番わかりづらかったペンコントロール。これは複数行テキストの入力コントロールを変更することができるという代物でした。

利用方法としては署名などを行う際に活用してくださいと説明されています。一度入力すると変更できません。

契約などを行い際の[サイン]などをしてもらうことなどを想定している感じでしょうか? もう少し調査する必要がある感じです。

モバイルやタブレット上では上記のようにペンで書くようなインターフェースと結果が容易されますが、WEB版では以下のようにバイナリデータとして蓄積されます。

f:id:sugimomoto:20160103001820p:plain

設定で特に面倒なものはありませんが、バイナリデータとして登録される故か、複数行テキストの最大長を15000以上にしないと入力内容次第では保存できなくなります。(実際になりました……。)

Webサイトプレビュー

f:id:sugimomoto:20160103002124p:plain

[種類]1行テキスト(URL)

WEBサイトのURLを入力した際にプレビューが表示されるコントロールです。わかりやすいですね。

設定で特に面倒な点はありません。形式をURLに指定する必要があります。

数値入力

f:id:sugimomoto:20160103002331p:plain

[種類]整数(形式:なし)・通貨・浮動小数点・10進数

整数などの数値入力系における新しい入力用コントロールです。線形ゲージなどとは違い、設定された[ステップ]刻みの元、プラスマイナスボタンを利用して値を変更することができます。

複雑な数値入力などを求めないシチュエーション、パーセンテージや期間など入力時に活用できるコントロールかと思います。

設定は前述のとおり[ステップ]のみ指定します。

自動完了

f:id:sugimomoto:20160103002829p:plain

[種類]1行テキスト(テキスト)

1行テキストを入力する際に、自動補完機能を提供するコントロールです。(自動完了という翻訳がややこしいですね)

補完時の候補検索方法は部分一致。補完対象データは設定より[ビュー]と[オプションセット]が選択可能です。

[ビュー]を選択すると、対象となる[エンティティ][ビュー][フィールド]を指定できます。

f:id:sugimomoto:20160103003153p:plain

たとえば以下のように[営業案件]エンティティの[オープンされている営業案件]ビュー、[トピック(name)]フィールドを選択すると、現在登録されているオープンされている営業案件の名前を候補として入力補完を働かせることが可能になります。

f:id:sugimomoto:20160103003248p:plain

以下のような形で利用できます。

f:id:sugimomoto:20160103003659p:plain

定型入力

f:id:sugimomoto:20160103003949p:plain

[種類]1行テキスト

1行テキスト入力用のコントロールで、電話番号やクレジットカード番号などを入力する際にマスク(入力制限・バリデーション)を有効化することができます。

マスクには、次の文字の組み合わせを使用できます。

0 - 数字

9 - 数字またはスペース

# - 数字、記号、またはスペース

L - 文字

l - 文字またはスペース

A - 英数字

a - 英数字またはスペース

< - この後の文字を小文字に変換

> - この後の文字を大文字に変換

| - 大文字小文字の変換を無効化

\ - 文字をエスケープしてリテラルに変換

その他すべて - リテラル

たとえば、数字のみ10桁入力させる場合は、[0000000000]

携帯番号などですと[000#0000#0000]などにします。

線形ゲージ

f:id:sugimomoto:20160103030936p:plain

[種類]整数(形式:なし)・通貨・浮動小数点・10進数

線形スライダーと似た形式の、数値入力系における新しい入力用コントロールです。

基本的な設定は線形スライダーなどと同じで、[最小][最大][ステップ]をそれぞれ指定します。

ブレットグラフ

f:id:sugimomoto:20160103031133p:plain

[種類]整数(形式:なし)・通貨・浮動小数点・10進数

少し特殊な数値系における新しいコントロールです。

ほかの線形スライダーなどとは違い、入力方法は標準のものとは変わらず、入力後の表示方式が上記ブレットグラフ形式で表示されるというものです。

設定項目は少し多く[最小][最大][有効][無効][対象]の5種類があります。

最小と最大はグラフの起点終点値を示し、有効と無効は背景色の範囲、対象が赤い棒線の目標部分を示しています。

f:id:sugimomoto:20160103031358p:plain

入力されている値の表示形式のみが変わりますので、ほかの業務ルールなどと合わせて、自動入力させ表示させるのが望ましいかもしれません。

有効、無効もほかの目標数値などのフィールドに依存させることで、動的なグラフとして扱えるものとなります。

アークノブ

f:id:sugimomoto:20160103032030p:plain

[種類]整数(形式:なし)・通貨・浮動小数点・10進数

[放射状ノブ]の半円版コントロールです。基本的な利用・設定方法は放射状ノブと変わりませんので割愛します。

カレンダーコントロール

f:id:sugimomoto:20160103032458p:plain

[種類]エンティティ

上記まで紹介してきた中でも少し特殊なのがカレンダーコントロールです。

ほかのコントロールがフィールドに設定するのに対して、カレンダーコントロールは[エンティティ]に対して設定するものとなっています。

このカレンダーコントロールを設定することで、モバイル・タブレットでこのエンティティに登録されたレコードを一覧化する際に、カレンダー形式のものを選択できるようになります。

設定個所は以下のように、エンティティのカスタマイズ画面に存在します。

f:id:sugimomoto:20160103032756p:plain

設定項目については、[予定]エンティティなどと同様に、開始日・終了日・期間・説明を入力するフィールドをあらかじめ作成し、指定する必要があります。

ここで設定したフィールドの値を元に、カレンダー上へ表示されます。

f:id:sugimomoto:20160103032853p:plain

ちなみに、スマートフォンでは以下のような形で表示できます。(ちょっとだけ面倒です)

対象エンティティのビューを表示している際に下部の[…]をタップし[ビジュアル化の変更]をタップします。

f:id:sugimomoto:20160103033526p:plain

[カレンダー]をタップします。

f:id:sugimomoto:20160103033605p:plain

これでカレンダー表示へ切り替えることができます。

f:id:sugimomoto:20160103033625p:plain

所感

現在実装されているコントロールは以上です。

現在のDynamics CRMにおけるスマートフォンタブレットへの力の入れ具合を鑑みると、今後このUIを意識したカスタマイズが必須になってくるかなぁと感じる次第です。

むしろ、このUIを最初から意識したエクスペリエンスデザインを心がけないといけないかなと。

また、これを調査する中でいくつかアプリの変更点がありましたので、後々取り上げていきたいと思います。