クライアント API の一覧

Power Pages クライアント API リストを使用して、従来のリストと最新のリストにアクセスしてカスタマイズします。このリファレンスでは、行、列、セル、可視性、およびリストイベントを操作する方法について説明します。

$pages.currentPage.lists

Lists コレクションには、ページ上の従来のリスト要素とモダンリスト要素を操作するメソッドが用意されています。

$pages.currentPage.lists メソッド

これらのメソッドを使用して、ページ上のすべてのリストを列挙し、HTML 要素 ID で特定のリストを取得します。

Method	返品	Description
`getAll`	Ilist`[]`	現在のページのすべてのリストを返します。
`getListById(id: string)`	IList	HTML 要素 ID でリストを取得します。

$pages.currentPage.lists の例

これらの例では、ページ上のすべてのリストを列挙し、HTML 要素 ID で特定のリストを取得する方法を示します。

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    let lists = $pages.currentPage.lists.getAll();
    let list = $pages.currentPage.lists.getListById('list_#1');
});

IList インターフェイス

リストは、表形式またはグリッドに似たデータコンポーネントを表します。

IList プロパティ

これらのプロパティは、リストを識別し、モダンレンダリングモデルを使用するかどうかを示します。

Property	タイプ	Description
`id`	文字列	リストの一意識別子。
`isModern`	boolean	最新のリストの場合は true、それ以外の場合は false のブール値。
`rows`	IRow`[]`	リストが現在発行している行。このプロパティを読み取るたびに最新のデータが返されるため、 `loaded` イベントハンドラーで読み取り、データが使用可能であることを確認します。
`columns`	IColumn`[]`	リストの現在のビューの列。

Note

rowsプロパティとcolumnsプロパティ、getColumn、on、およびoffメソッド、および返されるすべてのプロパティは、最新のリストでのみサポートされます。ここで、isModernは true です。従来のリストでは、呼び出しても安全ですが、何もしません。 rows と columns は空の配列を返し、 getColumn は未定義を返し、 on と off 何もしません。リストデータにアクセスする前に isModern 確認するか、従来のリストでは発生しない loaded イベントを使用します。

IList メソッド

これらのメソッドを使用して、リストの可視性を確認し、表示されているかどうかを切り替え、基になる HTML 要素にアクセスし、列とイベントを操作します。

Method	返品	Description
`getVisible`	`boolean`	リストが表示されている場合は true を返します。
`setVisible(isVisible: boolean)`	`void`	リストの可視性を設定します。
`getHtmlElement`	`HTMLElement`	リストの基になる HTML 要素を返します。
`getColumn(logicalName: string)`	IColumn \| `undefined`	指定した論理 (スキーマ) 名を持つ列を返します。一致する列がない場合は undefined を返します。
`on(event: string, handler: function)`	`void`	ハンドラーをリストイベントにサブスクライブします。イベントの一覧表示を参照してください。同じハンドラーを同じイベントに複数回サブスクライブしても効果はありません。
`off(event: string, handler: function)`	`void`	`on`に登録されたハンドラーの登録を解除します。 `on`に渡したのと同じ関数参照を渡します。別の参照では、ハンドラーのサブスクライブを解除しません。

IList の例

次の例では、ID でリストを取得し、その可視性の状態をログに記録し、グリッドの読み込み時にそのデータを読み取ります。

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    let list = $pages.currentPage.lists.getListById('list_#1');
    console.log(`List id: ${list.id}`);
    if (list.getVisible()) {
        console.log('List is currently visible.');
    }

    // Modern list data is available only after the grid loads, so read it in a `loaded` handler.
    if (list.isModern) {
        list.on('loaded', () => {
            console.log(`List has ${list.rows.length} rows and ${list.columns.length} columns.`);
        });
    }
});

IRow インターフェイス

IRow インターフェイスは、モダンリスト内の 1 つの行を表します。 list.rows プロパティまたはリストイベントペイロードから行を取得します。

getで始まるメソッドは、グリッドが発行したデータを返します。他のメソッドは、スタイル、クラス名、表示設定など、行の表示方法を設定します。グリッドは、行をレンダリングするときにこれらの設定を適用します。行を非表示にすると、行の表示方法のみが変更されます。基になるデータは変更されません。

IRow メソッド

これらのメソッドを使用して、行のデータを読み取り、行の表示方法を変更します。

Method	返品	Description
`getId`	`string`	行の Dataverse レコード ID を GUID 文字列として返します。
`getValue(logicalName: string)`	`string` \| `number` \| `boolean` \| `Date` \| `null`	指定された論理 (スキーマ) 名を持つ列の生の文字列、数値、ブール値、有効な日付、または数値のオプション値を返します。列が行に含まれていない場合、またはその生の値がサポートされていない複合値 (参照形式のオブジェクトを含む) である場合、null を返します。生の複合値を使用できない場合は、 `getDisplayValue` を使用します。
`getDisplayValue(logicalName: string)`	`string`	現在のロケールに対して書式設定された列の値を返します。列が行にない場合は、空の文字列を返します。
`getPrivileges`	`object` \| `undefined`	レコードに対してサーバーが評価した特権 ( `canRead`、 `canWrite`、 `canDelete`、 `canAppend`、および `canAppendTo`) を返します。サーバーが提供しない場合は未定義を返します。セキュリティを適用するのではなく、これらの値を使用してデータの表示方法を変更します。
`getState`	`object` \| `undefined`	レコードの `stateCode` 値と `statusCode` 値を返します。サーバーが提供しない場合は未定義を返します。
`setStyle(style: object)`	`void`	インライン CSS スタイルを行にマージします。各呼び出しは、既に設定されているスタイルに追加されます。
`setClassName(className: string)`	`void`	行の CSS クラス名を、指定したスペース区切りのクラス名に置き換えます。
`addClassName(className: string)`	`void`	行に 1 つ以上のスペース区切りの CSS クラス名を追加します。
`removeClassName(className: string)`	`void`	行から 1 つ以上のスペース区切りの CSS クラス名を削除します。
`setVisible(visible: boolean)`	`void`	行を表示または非表示にします。このメソッドは、行の表示方法のみを変更します。
`getCell(logicalName: string)`	ICell	行のセルの表示方法を変更するために使用するハンドルを返します。

IRow の例

次の使用例は、取り消されたレコードを強調表示し、非アクティブなレコードを非表示にします。

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    const list = $pages.currentPage.lists.getListById('list_#1');

    list.on('loaded', () => {
        list.rows.forEach((row) => {
            // Highlight canceled records where statuscode is 6.
            if (row.getValue('statuscode') === 6) {
                row.setStyle({ backgroundColor: '#fde7e9', color: '#a80000' });
            }
            // Hide inactive records where statecode is 1.
            if (row.getValue('statecode') === 1) {
                row.setVisible(false);
            }
        });
    });
});

IColumn インターフェイス

IColumn インターフェイスは、モダンリスト内の 1 つの列を表します。 list.columns プロパティまたは list.getColumn メソッドから列を取得します。ヘッダー、可視性、およびツールヒントは、互いに独立して設定できます。

get メソッドは、設定した値ではなく、ソースデータを返します。たとえば、 getDisplayName は、 setHeaderを呼び出した後も構成済みの表示名を返します。 row.getDisplayValue は、 cell.setDisplayTextを呼び出した後でもサーバーが書式設定した値を返すのと同様です。この動作により、 loaded ハンドラーはリストがデータをフェッチ、並べ替え、フィルター、またはページデータするたびに再実行されるため、コードを複数回実行しても安全です。たとえば、 column.setHeader(column.getDisplayName() + ' *') では、アスタリスクを追加するのではなく、毎回同じ結果が生成されます。ソース値を読み取り、設定した値を派生させます。

IColumn メソッド

これらのメソッドを使用して、列の名前を読み取り、列の表示方法を変更します。

Method	返品	Description
`getLogicalName`	`string`	列の論理 (スキーマ) 名を返します。
`getDisplayName`	`string`	列の構成済みの表示名を返します。 `setHeader` では、この値は変更されません。
`setHeader(header: string)`	`void`	列ヘッダー内のテキストをオーバーライドします。
`setVisible(visible: boolean)`	`void`	列全体を表示または非表示にします。
`setTooltip(tooltip: string)`	`void`	列ヘッダーのヒントを設定します。ヒントは、他のユーザーがヘッダーの上にマウスポインターを置くと表示され、スクリーンリーダーはそれをヘッダーのアクセシビリティ対応の名前として使用します。

IColumn の例

次の使用例は、列のヘッダーテキストとヒントを設定します。

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    const list = $pages.currentPage.lists.getListById('list_#1');

    list.on('loaded', () => {
        const column = list.getColumn('name');
        if (column) {
            column.setHeader('Account name');
            column.setTooltip('The primary name of the account');
        }
    });
});

ICell インターフェイス

ICell インターフェイスは、行と列の積集合である 1 つのセルを表します。 row.getCell メソッドからセルを取得します。セルは設計上書き込み専用です。セルの値を読み取る場合は、セルを含む行のgetValueまたはgetDisplayValueメソッドを使用します。

ICell メソッド

これらのメソッドを使用して、セルのテキストとスタイルを変更します。

Method	返品	Description
`setDisplayText(text: string)`	`void`	セルに表示されるテキストを置き換えます。コードの代わりにわかりやすいテキストを表示したり、値をマスクしたり、バッジを表示したりするには、このメソッドを使用します。
`setStyle(style: object)`	`void`	インライン CSS スタイルをセルにマージします。各呼び出しは、既に設定されているスタイルに追加されます。

ICell の例

次の使用例は、各行のセルのテキストとスタイルを変更します。

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    const list = $pages.currentPage.lists.getListById('list_#1');

    list.on('loaded', () => {
        list.rows.forEach((row) => {
            const cell = row.getCell('statuscode');
            cell.setDisplayText('Active');
            cell.setStyle({ fontWeight: 'bold', backgroundColor: '#fff4ce' });
        });
    });
});

イベントを一覧表示する

最新のリストでは、 list.on メソッドを使用してサブスクライブするイベントが発生し、 list.off メソッドを使用してサブスクライブを解除します。これらのイベントは行オブジェクトを提供するため、行データの読み取りまたはスタイル設定を行う場合にも推奨されます。データは、 loaded イベントが発生した後に使用できます。

Event	発生した場合	ペイロード
`loaded`	リストがフェッチされ、その行データが発行された後。このイベントは、リストがデータを更新またはページするたびに再び発生します。	`{ rows: IRow[] }`
`rowclick`	誰かが行を選択します。	`{ row: IRow, event: MouseEvent }`
`cellclick`	誰かがセルを選択します。 `cellclick` ハンドラーが登録されると、その選択に対して`rowclick` イベントは発生しません。	`{ row: IRow, columnName: string, event: MouseEvent }`

重要

rowclickハンドラーとcellclick ハンドラーの両方が登録されている場合、セルを選択すると、cellclick ハンドラーのみが呼び出されます。 rowclick ハンドラーは、同じ選択に対して呼び出されません。

イベントの一覧表示の例

この例では、 rowclick イベントと cellclick イベントをサブスクライブします。

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    const list = $pages.currentPage.lists.getListById('list_#1');

    const onRowClick = (e) => {
        console.log('Selected row:', e.row.getId());
        e.row.setStyle({ outline: '2px solid #0078d4' });
    };

    list.on('rowclick', onRowClick);

    list.on('cellclick', (e) => {
        console.log('Selected cell:', e.row.getId(), 'column:', e.columnName);
        e.row.getCell(e.columnName).setStyle({ backgroundColor: '#e5f1fb' });
    });

    // Define a cleanup function, and call it when your code no longer needs
    // the events. Pass the same handler reference that you passed to the on method.
    const stopListening = () => {
        list.off('rowclick', onRowClick);
    };
});

サブスクライブを解除するには、on メソッドに渡したのと同じ関数参照を off メソッドに渡します。別の参照では、ハンドラーのサブスクライブを解除しません。

フィードバック

このページはお役に立ちましたか?

最終更新: 2026-09-21