次の方法で共有


Dialog コントロール (実験段階)

[この記事はプレリリース ドキュメントであり、変更されることがあります。]

コンテンツをグループ化するために使用されるコントロールです。

Dialog コントロール。

重要

  • これは試験段階の機能です。
  • プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。 これらの機能を公式リリースの前に使用できるようにすることで、顧客が一足先にアクセスし、そこからフィードバックを得ることができます。

説明設定

ダイアログ ボックス (ダイアログ) は、ページまたはアプリから焦点を取得し、ユーザーが対話する必要がある一時的なポップアップ ウィンドウです。 これは主に、ファイルの削除やユーザーに選択を求めるといった操作を確認するために使用されます。

このキャンバス コンポーネントは、Fluent UI Dialog コントロールのスタイルと動作を模倣します。 ベスト プラクティスについては、ドキュメントを参照してください。

Creator Kit GitHub リポジトリのコンポーネントを表示する

プロパティ

重要なプロパティ

Property 説明設定
Buttons ボタンを定義するデータセット (詳細については、 Button のプロパティを参照してください)。
Title タイトル セクションに表示されるテキスト。
OverlayColor オーバーレイ領域に表示される色。
DialogWidth ダイアログの幅 (アプリの幅にまたがるコントロールの幅と混同しないでください)。
DialogHeight ダイアログの高さ (アプリの高さにまたがるコントロールの高さと混同しないこと)。
SubTitle タイトルの下に表示されるテキスト。

ボタンのプロパティ

Property 説明設定
Label ボタンで表示されるラベル。
ButtonType ボタンのスタイルを指定する列挙。 StandardPrimary のどちらかを選択します。
Table(
    {
        Label: "Cancel", 
        ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Standard 
    },{
        Label: "Ok", 
        ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Primary
    }
)

スタイル プロパティ

Property 説明設定
Theme テーマ オブジェクト。 テーマについて詳しくは、こちらをご覧ください。

[パネル] の [パネルコンテンツの書式設定] セクションで書式設定について説明 します

イベントのプロパティ

Property 説明設定
OnCloseSelect 閉じるボタンが選択されたときに実行されるアクション式。
OnButtonSelect アクション ボタンの 1 つが選択されたときに実行されるアクション式。

Behavior

ダイアログの表示方法を構成する

ブール型 (true/false) 変数が true に変更されたときに、 Dialog コントロール自体 (またはそのコントロール内にあるサーフェス) を表示します。 その変数をダイアログの visibility プロパティに割り当てます。 ダイアログが表示された後で非表示にするには、閉じるアイコンが選択されたときにトリガーされるリセット プロパティの変数を更新します。

アプリ内の別のコンポーネントのアクション式のダイアログを開く、Power Fx 式 (ボタンの OnSelect プロパティなど) は次のとおりです:

UpdateContext({ showHideDialog: true })

ダイアログの OnCloseSelect プロパティでダイアログを閉じるための Power Fx 式は次のとおりです:

UpdateContext({ showHideDialog: false })

ダイアログの Visible プロパティに変数をに割り当てます:

showHideDialog

ボタンのアクションを構成する

アクションを定義するには、ダイアログの OnButtonSelect プロパティで、If() のテキスト値に基づく Switch() または Self.SelectedButton.Label の条件のアクションを提供します。 アクションによっては、アクションの完了後にダイアログを閉じることも賢明な場合があります。

    If( Self.SelectedButton.Label = "Send", 
        Notify("Email Sent")
    );
    UpdateContext({ showHideDialog: false })

制限

このキャンバス コンポーネントは、キャンバス アプリとカスタム ページでのみ使用できます。