キャンバス アプリをビルドする
Power Apps は、ビジネス アプリ向けの生産性の高いプラットフォームです。 Power Apps Studio で空白のキャンバスを利用して、カスタマイズされたピクセルパーフェクトなアプリのインターフェイスを作成できます。 ユーザーと共有するには、アプリをブラウザーでレンダリングするか、Teams や SharePoint サイトなどのさまざまなコンテナーに埋め込みます。
SAP Procurement テンプレートのソリューションの中核となるエンドユーザー エクスペリエンスは、キャンバス アプリを使用して構築されており、ローカル ビジネス要件をサポートするために簡単に拡張できます。 始めに、この記事のパターンとベスト プラクティスに従ってください。
ベスト プラクティスと標準に従ってください
すべてのアプリは、公開されているベスト プラクティスと標準を使用して開発されています。 新しいアプリを拡張または作成するときは、同じまたは類似のベスト プラクティスおよび標準を採用することをお勧めします。
Standard | Comments | 詳細情報 |
---|---|---|
機能の状態 | 既定でオンまたはオフになる機能。 実験的機能を除くプレビュー機能のサブセットが含まれます。 | キャンバス アプリの実験的機能、プレビュー 機能、廃止された機能を理解する |
応答性 | タブレットやモバイルなどの単一のデバイス タイプに対応します。 Microsoft Teams 内にアプリを埋め込むなど、アプリをさまざまな標準画面およびコンテナ サイズにスナップできるようにします。 自動レイアウトの応答性の高いコンテナー コントロールを広範囲に使用します。 | レスポンシブなキャンバスアプリの構築 |
ネーミングとコーディングの標準 | コントロール、変数、コレクション、Dataverse 命名標準に従って、検出とメンテナンスが容易になります。 | Power Apps キャンバス アプリのコーディング標準とガイドライン |
アクセシビリティ | アクセシビリティをサポートするプロパティです。 たとえば、アクセス可能なラベル、役割、ライブ、フォーカス境界線の太さ、色のコントラスト、タブの順序などです。 これらのプロパティは、アクセシビリティ要件をサポートしていない既知の設計パターンを回避します。 | アクセシビリティの高いキャンバス アプリを作成する および キャンバス アプリのアクセシビリティの制限 |
実績 | 既知のパフォーマンス制限を回避するベスト プラクティスに従います。 | キャンバス アプリのパフォーマンスを向上させるためのヒントとベスト プラクティス |
グローバル アプリのカラー テーマ
すべてのアプリはカスタム テーマに従い、組織の好みの配色に応じて変更できます。 グローバル変数 は、すべてのアプリにまたがる App.OnStart のプロパティに設定されます。 この変数は、アプリ内のすべてのコントロールにわたるほとんどの色関連プロパティで使用されます。 カラーのグローバルテーマ変数を 1 か所で変更すると、App.OnStart イベントを実行した後、アプリ全体に即効性があります。
重要
さまざまなカラー パレット プロパティを変更することは可能ですが、グローバル テーマ変数の主色のプロパティのみを変更することをお勧めします。
Set(
varThemeColors,
{
background: ColorValue("#FAF9F8"),
backgroundFill: ColorValue("#FFFFFF"),
backgroundFillDisabled: ColorValue("#F3F2F1"),
text: ColorValue("#201F1E"),
altText: ColorValue("#FFFFFF"),
disabledText: ColorValue("#A19F9D"),
primary: ColorValue("#0078D4"),
secondary: ColorValue("#EFF6FC"),
tertiary: ColorValue("#005A9E"),
primaryGray: ColorValue("#8A8886"),
secondaryGray: ColorValue ("#C8C6C4"),
tertiaryGray: ColorValue("#605E5C"),
requiredRed: ColorValue("#A80000"),
lookupBlue: ColorValue("#0078D4")
}
)
企業ロゴを追加する
アプリに企業ロゴを追加するには、まず企業ロゴの画像ファイルをアプリにアップロードし、それを ScreenHeader コンポーネントに追加します。
詳細: キャンバス アプリでマルチメディア ファイルを使用する
ローカライズとグローバル アプリのサポート
すべてのキャンバス アプリは、英語をサポートしています。 しかし、どのアプリも ローカライズされること を想定しているため、より多くの言語に対応できるよう管理することが可能です。 展開するために選択した言語に応じて、コントロール幅プロパティを直接変更する必要がある場合があります。
文字列ローカライズ パターン
- アプリ起動時の最初の画面の OnVisible プロパティで、ユーザーのブラウザの言語設定を読み取り、対応する ISO 言語コード の選択肢値を決定します。
Set(
varISOUserLanguageCode,
Switch(
Left(
Language(),
2
),
"ar",
'ISO Language Code'.ar,
"de",
'ISO Language Code'.de,
"en",
'ISO Language Code'.en,
"es",
'ISO Language Code'.es,
"fr",
'ISO Language Code'.fr,
"he",
'ISO Language Code'.he,
"it",
'ISO Language Code'.it,
"ja",
'ISO Language Code'.ja,
"pt",
'ISO Language Code'.pt,
"zh",
'ISO Language Code'.zh,
'ISO Language Code'.en
)
)
注意
ラベルと入力コントロールのプロパティは、ローカライズされたテキスト値の幅を予測しようとしますが、計算が複雑であるため、常に成功するとは限りません。 したがって、ローカライズされた文字列や変更が行われた後は、常にテストしてアプリに軽微な編集を加えることが推奨されます。
チップ
SAP Base ソリューションに含まれる ISO 言語コード コンポーネントにさらに値を追加することで、追加の言語を追加しサポートすることができます。
アプリは、ログインしているユーザーの言語ごとにローカライズされた文字列をSAP ローカライズ Dataverse エンティティに問い合わせ、ローカルにコレクションとしてキャッシュします。
ClearCollect(
colUserLocalizedStrings,
Filter(
'SAP Localizations',
Language = varISOUserLanguageCode,
'SAP Localizations (Views)'.'Active SAP Localizations'
)
)
Text、HintText、Accessible Label、InputTextPlaceholder、NoSelectionText、ToolTips などのさまざまなコントロール内のすべてのテキスト関連プロパティには、同等のローカライズされた文字列を最初に検索する式があります。 同等のものが見つからない場合は、With ブロック内の Text プロパティで設定されている English を既定とします。
With(
{Text: "Vendor name"},
If(
IsBlank(
LookUp(
colUserLocalizedStrings,
'English Value' = Text
).'Localized Value'
),
Text,
LookUp(
colUserLocalizedStrings,
'English Value' = Text
).'Localized Value'
)
)
SAP 値リスト テーブルから値をフィルター処理する コンボ ボックス コントロールでは、ユーザーのブラウザの設定からマップされた ISO 言語コード が常にフィルター基準に適用され、ユーザーの言語に対して値のリストが管理されていない場合は既定が英語になります。
Sort(
Filter(
'SAP List of Values',
Status = 'Status (SAP List of Values)'.Active,
Domain = 'Domain (SAP List of Values)'.Country,
Language = varISOUserLanguageCode
),
'Display Value'
)
ブラウザーのロケール設定
キャンバス アプリのすべての数値、日付、および時刻のフィールドは、既定でユーザーのブラウザのロケール設定に従います。 たとえば、ロケール設定にアメリカ合衆国を使用しているユーザーには 3/23/2023 と表示される日付が、ロケール設定にドイツを使用しているユーザーには 23.03.2023 と表示されます。
詳細情報: キャンバス アプリにグローバル サポートを組み込む
コンポーネント
コンポーネントは、アプリの開発とメンテナンスのプロセスを簡素化し、パフォーマンスの向上に役立つ優れた方法です。
内部またはアプリ間で共通のユーザー エクスペリエンスが必要な領域では、コンポーネントが構成されます。 アプリ スコープや埋め込みクラウド フローへのアクセスなどをサポートするコンポーネント ライブラリに制限があるため、ローカル コンポーネントはすべてのアプリで使用でき、その後、他のアプリにインポートできます。
たとえば、VendorSearch コンポーネントは調達から支払いまでのプロセスをサポートするすべてのアプリで使用されており、主に SAP Vendor Management アプリ内で構築され、他の調達から支払いまでのアプリ内で使用するためにインポートされたものです。
警告
ローカル アプリ コンポーネントとコンポーネント ライブラリを併用することの弊害として、変更を決定した場合、そのコンポーネントをすでにインポートしているすべてのアプリで変更を行う必要があることが挙げられます。
アプリ全体で使用される共通コンポーネント:
コンポーネント | Description |
---|---|
ScreenHeader | すべての画面に共通のヘッダー |
LeftNavigation | メニュー項目 Dataverse ソースで駆動する他のアプリに素早くアクセスできるメイン ナビゲーション |
CommandBar | 作成、偏向、保存、キャンセル、検索、直近の検索、高度な検索 オブジェクトの一般的なコントロールのリストです |
ScreenTabs | 論理コンポーネントのグループがタブにまとめられ、ナビゲーションが容易になります |
NoItemsDisplay | レコードが存在しない場合、アイテムはグリッドに表示されます |
ObjectNameSearch | SAP の共通オブジェクト検索コンポーネントは、使用される適切なアプリに含まれており、必要に応じて他のアプリにインポートすることができます。 例: VendorSearch、GLAccountSearch、MaterialSearch、RequisitionSearch |
詳細情報: キャンバス アプリ コンポーネントの概要
その他の SAP フィールド
SAP の実装はそれぞれ異なり、ビジネス プロセスをサポートする独自のフィールドを追加することが完全に期待されています。 したがって、必要なフィールドを簡単に追加できるように、十分な画面スペースと設計上の考慮事項が実装されました。
共通コントロールコンテナ
ほとんどのコントロールは、ラベルと入力コントロールの両方で構成されるコンテナー内に含まれています。 たとえば、SAP Vendor Management アプリ内のベンダー名を取得するフィールドは、次のスクリーンショットに示すように、ラベルとテキスト入力コントロールで構成されます。 新しいフィールドを追加するには、既存のコンテナー コントロールをコピーし、適切な応答コンポーネントに貼り付けて、名前、テキスト、および最終的にマップされたフィールドを更新します。
注意
コンボボックス、日付ピッカー、ボタンなどの他のタイプの入力コントロールにも同様のコンテナーがあります。
レスポンシブ コンテナ
アプリは、次のスクリーンショットに示すような垂直および水平のコンテナー コントロールを使用して、タブレット/デスクトップ デバイスの種類に応答するように設計されています。 これらのコンテナは、height、width、LayoutMinHeight、LayoutMinWidth、Wrap などのプロパティの開始点を持つように設定されています。 これらのコンテナにフィールドを追加するときは、応答性を適切に処理し続けるために、これらのプロパティも更新されていることを確認してください。
詳細情報: 自動レイアウト コンテナー
他のデータに接続する
キャンバス アプリの利点は、ネイティブ コネクタ ライブラリを使用して、数百の他のシステムやアプリケーションのいずれかに安全に簡単に接続できることです。
たとえば、SAP Procurement の発注書プロセスを完了するためにCRMに存在する上流のプリセールス案件からのデータが必要な場合、Salesforce または Dataverse コネクタを使用して Dynamics 365 と統合すると、ボタンを選択するだけでそのデータを SAP Purchase Order アプリに簡単に追加できます。
さらに、社内の独自システムやネイティブ コネクタのないシステムがある場合は、IT チームと協力してカスタム コネクタを作成し、サポートされている API を通じて Power Apps がそのシステムと簡単にインターフェースできるようにすることができます。
詳細情報:
アプリのエラー処理
すべての組み込みフロー呼び出しは、既定でフローから送り返される応答ステータスフィールドを評価し、Notify 関数を通じてメッセージを発生させることで処理します。 詳細については、エラー処理 をご覧ください。
If(
!IsBlank(FirstError.Message),
Patch(
'SAP Integration Errors',
Defaults('SAP Integration Errors'),
{
Action: FirstError.Source,
'Additional Information': App.ActiveScreen.Name,
'Error Message': FirstError.Message,
Name: "SAP Vendor Management",
'Source Type': 'Source Type (SAP Integration Errors)'.'Power App',
'Workflow Status': 'Workflow Status (SAP Integration Errors)'.Failed
}
);
Trace(FirstError.Message);
Error(FirstError);
)
アプリによって生成されたすべての予期しない例外は、App.OnError プロパティ SAP ソリューション テンプレートのエラー レコードは、エラーが再スローされて追跡される前に作成されます。 管理者は、エラーの詳細を確認し、アプリの未処理例外を警告するトリガーを設置することができます (エラーの監視 のドキュメントを参照)。
詳細情報: OnError プロパティ
関連するコンテンツ
- キャンバス アプリとは何ですか?
- 理解する Power Apps Studio
- ソリューション内からキャンバス アプリを作成する
- コンポーネント フレームワークとキャンバス アプリ コンポーネントを使用して再利用可能なUIを構築する Power Apps
- 管理する Microsoft Power Platform
- エンタープライズ開発者、パートナー、ISV向けのキャンバス アプリ