キャンバスアプリをビルドする

[アーティクル]
01/02/2024

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 プロパティ

次の手順

モデル駆動型アプリと Dataverse を拡張する

参照

SAP Procurement テンプレートを使い始める

次の方法で共有

キャンバスアプリをビルドする

ベストプラクティスと標準に従ってください

グローバルアプリのカラーテーマ

企業ロゴを追加する

ローカライズとグローバルアプリのサポート

文字列ローカライズパターン

ブラウザーのロケール設定

コンポーネント

その他の SAP フィールド

共通コントロールコンテナ

レスポンシブコンテナ

他のデータに接続する

アプリのエラー処理

次の手順

参照

その他のリソース

次の方法で共有

キャンバス アプリをビルドする

ベスト プラクティスと標準に従ってください

グローバル アプリのカラー テーマ

企業ロゴを追加する

ローカライズとグローバル アプリのサポート

文字列ローカライズ パターン

ブラウザーのロケール設定

コンポーネント

その他の SAP フィールド

共通コントロールコンテナ

レスポンシブ コンテナ

他のデータに接続する

アプリのエラー処理

関連するコンテンツ

次の手順

参照

その他のリソース

キャンバスアプリをビルドする

ベストプラクティスと標準に従ってください

グローバルアプリのカラーテーマ

ローカライズとグローバルアプリのサポート

文字列ローカライズパターン

レスポンシブコンテナ