皆様、こんにちは!今日はDynamics 365 Business Centralのユーザーインターフェース(ビュー)の変更機能についてお話しましょう。
Dynamics 365 Business Centralのインターフェース変更は、カスタマイズを必要とせず、ユーザーが直接変更することができます。変更可能な内容には、パーツの非表示、アクション(リボン)の移動と削除、項目の追加と削除、列幅の増減などがあります。
それでは早速機能をご紹介しましょう。パーソナライズとデザインです。
パーソナライズは個人のユーザーインターフェース修正です。 自分が行った変更は、自分にのみ適用されます。 もちろん、これはProdution環境(いわゆる本番環境)で非常に価値のある機能であり、自分の作業習慣に合わせてワークスペースを最適化できます。
一方、デザインはその環境のすべてのユーザーに適用されます。 これは、開発者またはパワーユーザーが組織内のすべてのユーザーが使用する軽量の拡張機能を作成することを目的としています。 デザイナーによって作成された拡張機能は、(AL言語を通じて)可能性が無限であり、Visual Studio Codeで編集および追加開発もできます。 最後には、そのデザインの拡張機能を顧客の本番環境にインポートしてD365 Business Centralをカスタマイズしたりできます。
Sandbox環境:パーソナライズとデザイン両方ある
![](https://yzhums.com/wp-content/uploads/2020/08/01-10-1024x355.png)
本番環境:パーソナライズのみ
![](https://yzhums.com/wp-content/uploads/2020/08/02-8-1024x358.png)
パーソナライズのイメージ
![](https://yzhums.com/wp-content/uploads/2020/08/03-9-1024x519.png)
![](https://yzhums.com/wp-content/uploads/2020/08/04-9-1024x516.png)
デザインのイメージ
![](https://yzhums.com/wp-content/uploads/2020/08/05-8-1024x518.png)
![](https://yzhums.com/wp-content/uploads/2020/08/06-9-1024x516.png)
デザインとパーソナライズの違い:
見た目は似ていますが、デザインはパーソナライズより多くの機能があります。 ページの裏にテーブルがあることは皆様はご存知でしょうか。 標準ソースコードでは、これらは2つのオブジェクトです(テーブルオブジェクトとページオブジェクト)。パーソナライズは、項目の表示と非表示のために、元のページの表示プロパティのみを変更します。 テーブルにのみ存在し、ページには存在しない項目を表示することができません。
ただし、デザインは違って、裏のテーブルに項目が存在する限り、画面に表示できます。 だからデザインは少々危ないです。なお、パーソナライズされた内容を他の環境やユーザーに適用することはできませんが、デザインされた内容はエクスポートできます。
デザインではウェブビューだけではなく、タブレットビューと電話ビューも同じ画面で変更可能。
![](https://yzhums.com/wp-content/uploads/2020/08/07-8-1024x520.png)
項目数も多いです。
![](https://yzhums.com/wp-content/uploads/2020/08/08-8.png)
保存したら、エクステンションとして環境にインストールされます。(本番環境でこの機能がないのは多分これに関わる)
![](https://yzhums.com/wp-content/uploads/2020/08/10-8.png)
![](https://yzhums.com/wp-content/uploads/2020/08/11-7-1024x487.png)
それでは次の問題はSandbox環境でデザイン変更された内容はどうやって本番環境に適用するのか。(他のSandbox環境も可能です)まずは開発環境を準備しておきましょう。
参考:
Dynamics 365 Business Centralエクステンション開発 – Hello Worldまでの一連の流れ
Sandbox環境のエクステンションページでデザインのソースコードをダウンロードします。
![](https://yzhums.com/wp-content/uploads/2020/08/12-7-1024x571.png)
ダウンロードしたファイルを解凍します。
![](https://yzhums.com/wp-content/uploads/2020/08/13-7.png)
Visual Studio Codeを起動
![](https://yzhums.com/wp-content/uploads/2020/08/14-7.png)
Visual Studio Codeの拡張機能でAL Languageがインストールされていることを確認
![](https://yzhums.com/wp-content/uploads/2020/08/15-7.png)
ダウンロードして解凍したデザインソースコードのフォルダーをVisual Studio Codeで開く
「File->Open Folder」
![](https://yzhums.com/wp-content/uploads/2020/08/16-6.png)
コマンドパレットでSymbolファイルのダウンロードを実行
「Ctrl + Shift + Pキー」を同時に押し、コマンドパレットで「al: download symbols」を実行します。
![](https://yzhums.com/wp-content/uploads/2020/08/17-6.png)
認証
![](https://yzhums.com/wp-content/uploads/2020/08/18-6-1024x647.png)
![](https://yzhums.com/wp-content/uploads/2020/08/19-6-1024x651.png)
![](https://yzhums.com/wp-content/uploads/2020/08/20-6-1024x647.png)
Symbolファイルダウンロード完了
![](https://yzhums.com/wp-content/uploads/2020/08/21-6.png)
コマンドパレットでパッケージを実行
「Ctrl + Shift + Pキー」を同時に押し、コマンドパレットで「al: package」を実行します。
![](https://yzhums.com/wp-content/uploads/2020/08/22-6-1024x243.png)
Appファイルが生成されたことを確認
![](https://yzhums.com/wp-content/uploads/2020/08/23-6.png)
![](https://yzhums.com/wp-content/uploads/2020/08/24-6.png)
本番環境のExtensionページを開く
![](https://yzhums.com/wp-content/uploads/2020/08/25-6-1024x486.png)
「Manage->Upload Extension」をクリック
![](https://yzhums.com/wp-content/uploads/2020/08/26-6-1024x276.png)
先ほど生成されたAppファイルをアップロードします。
![](https://yzhums.com/wp-content/uploads/2020/08/27-6.png)
![](https://yzhums.com/wp-content/uploads/2020/08/28-6.png)
Deployment Statusページでデプロイの状況を確認できます。
![](https://yzhums.com/wp-content/uploads/2020/08/29-6-1024x331.png)
![](https://yzhums.com/wp-content/uploads/2020/08/30-6-1024x266.png)
インストール成功しました。
![](https://yzhums.com/wp-content/uploads/2020/08/31-5-1024x652.png)
以上
コメント