クライアント API フォーム、タブ、セクション

Power Pagesクライアント API フォーム、タブ、セクション、およびコントロールを使用して、ページ要素を検査および管理します。 このリファレンスでは、表示、値、およびマルチステップ ナビゲーションを制御するために使用できるコレクション、プロパティ、メソッドについて説明します。

$pages.currentPage.forms

$pages.currentPage.forms コレクションには、ページ上のフォーム要素を操作するメソッドが含まれています。

$pages.currentPage.forms メソッド

これらのメソッドを使用して、フォームを一覧表示し、特定のフォーム インスタンスを取得します。

Method 返品 説明
getAll IForm[] 現在のページに追加されたすべてのフォームを返します。
getFormById(id: string) IForm HTML 要素 ID でフォームを取得します。
getFormByName(name: string) IForm フォームを名前で取得します。

$pages.currentPage.forms メソッドの例

これらの例では、すべてのフォームを取得し、ID または名前で特定のフォームを取得する方法を示します。

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    let forms = $pages.currentPage.forms.getAll();
    let form1 = $pages.currentPage.forms.getFormById('form_#1');
    let form2 = $pages.currentPage.forms.getFormByName('form_name')
});

IForm インターフェイス

IForm インターフェイスは、コントロールとタブのコンテナーを表します。

IForm プロパティ

次のプロパティは、フォームとその含まれるコントロールとタブについて説明します。

Property タイプ 説明
id 文字列 フォームの ID。
name 文字列 フォームの名前。
controls コントロール[] フォーム上のすべてのコントロール。
tabs タブ[] フォーム上のすべてのタブ。
isMultiStep boolean フォームが複数ステップの場合は True。それ以外の場合は false。 マルチステップ フォームを参照してください。

IForm メソッド

これらのメソッドを使用して、フォームの可視性に対してクエリを実行し、表示するかどうかを切り替えます。

Method 返品 説明
getVisible boolean フォームが表示されている場合は true を返します。それ以外の場合は false。
setVisible(isVisible: boolean) void フォームの表示設定を設定します。
getHtmlElement HTMLElement フォームの基になる HTML 要素を返します。
getControlByLogicalName(logicalName: string) コントロール | undefined 列スキーマ名など、指定した論理名を持つフォーム上のコントロールを返します。 コントロールが一致しない場合は未定義を返します。

IForm の例

次の例では、ID でフォームを取得し、その可視性、コントロールの数、タブをログに記録します。

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    let form = $pages.currentPage.forms.getFormById('form_#1');

    console.log(`Form id: ${form.id} has ${form.controls.length} controls.`);

    if (form.getVisible()) {
        console.log('Form is currently visible.');
    }
    let tabs = form.tabs;
    console.log(`Form has ${tabs.length} tabs.`);

    // Look up a control by its logical name.
    let nameControl = form.getControlByLogicalName('fullname');
    if (nameControl) {
        nameControl.setValue('Jane Doe');
    }
});

マルチステップ フォーム

マルチステップ フォームは、複数の基本フォームを保持するコンテナーです。

マルチステップ フォームのプロパティ

次のプロパティは、マルチステップ フォーム コンテナーに適用され、現在アクティブな手順で使用できる内容について説明します。

Property タイプ 説明
id 文字列 複数のステップのフォームの ID。
controls コントロール[] 現在のステップのすべてのコントロール。
tabs タブ[] 現在のステップのすべてのタブ。
isMultiStep boolean フォームが複数ステップの場合は True。それ以外の場合は false。
nextButton JQuery 要素 次のボタン (存在しない場合は空のオブジェクト) を表します。
previousButton JQuery 要素 前のボタン (存在しない場合は空のオブジェクト) を表します。

複数ステップのフォーム メソッド

これらのメソッドを使用して、可視性を確認し、複数ステップのフォームのステップ間を移動します。

Name 返品 説明
getVisible boolean フォームが表示されている場合は true を返します。それ以外の場合は false。
setVisible(isVisible: boolean) void フォームの表示設定を設定します。
hasNextStep boolean 次のステップが存在する場合は true を返します。それ以外の場合は false。
hasPreviousStep boolean 前の手順が存在する場合は true を返します。それ以外の場合は false。
goToNextStep void 次の手順に移動します。は、次の手順が存在しない場合にフォームを送信します。
goToPreviousStep void 前の手順に移動します。存在しない場合は例外をスローします。
getControlByLogicalName(logicalName: string) コントロール | undefined 列スキーマ名など、指定した論理名を持つ現在のステップのコントロールを返します。 コントロールが一致しない場合は未定義を返します。

マルチステップ フォームの例

この例では、複数ステップのフォームを取得し、それを検査し、次の手順に進む方法を示します。

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    let form = $pages.currentPage.forms.getFormById('multiform_#1');
    console.log(`Form id: ${form.id} has ${form.controls.length} controls.`);

    if (form.getVisible()) {
        console.log('Form is currently visible.');
    }

    let tabs = form.tabs;
    console.log(`Form has ${tabs.length} tabs.`);

    form.goToNextStep();
});

Tab

Tabには、フォーム内に 1 つ以上のセクションが含まれています。

Tab Sections プロパティ

タブ内の セクションの 配列。

Tab メソッド

これらのメソッドを使用して、タブの表示状態を確認し、その名前を取得し、表示されているかどうかを切り替えます。

Method 返品 説明
getVisible boolean タブが表示されている場合は true を返します。それ以外の場合は false。
getName string タブの名前を返します。
setVisible(isVisible: boolean) void タブの表示設定を設定します。

タブの例

次の使用例は、フォームを取得し、そのタブを列挙し、最初のタブの名前をログに記録します。

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    let form = $pages.currentPage.forms.getFormById('form_#1');
    let tabs = form.tabs;
    console.log(`Form has ${tabs.length} tabs.`);
    console.log(`First tab is named: ${tabs[0].getName()}`);
});

セクション

セクションは、タブ内のコントロールをグループ化します。

Section Controls プロパティ

セクション内 のコントロールの 配列。

Section メソッド

これらのメソッドを使用して、セクションの名前を読み取り、その可視性を制御します。

Method 返品 説明
getVisible boolean セクションが表示されている場合は true を返します。それ以外の場合は false。
getName string セクション名を返します。
setVisible(isVisible: boolean) void セクションの可視性を設定します。

セクションの例

次の使用例は、フォームの最初のタブからセクションを取得し、基本的な詳細をログに記録します。

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    let form = $pages.currentPage.forms.getFormById('form_#1');
    let sections = form.tabs[0].sections;
    console.log(`Tab has ${sections.length} section(s).`);
    console.log(`First section is named: ${sections[0].getName()}`);
});

制御

Controlは、個々のフォーム要素を表します。 一般的な制御メソッドを使用して、その値、可視性、必要な状態、および無効な状態を取得または更新し、クライアント側の検証を追加します。 値の型と追加のメンバーは 、コントロールの型によって異なります。

  • 最終更新: