Power Pages 클라이언트 API 목록을 사용하여 기존 및 최신 목록에 액세스하고 사용자 지정합니다. 이 참조에서는 행, 열, 셀, 표시 유형 및 목록 이벤트를 사용하는 방법을 설명합니다.
$pages.currentPage.lists
목록 컬렉션은 페이지의 기존 및 최신 목록 요소를 사용하는 메서드를 제공합니다.
$pages.currentPage.lists 메서드
이러한 메서드를 사용하여 페이지의 모든 목록을 열거하고 HTML 요소 ID로 특정 목록을 가져옵니다.
| 메서드 | Returns | 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 | Type | Description |
|---|---|---|
id |
string | 목록의 고유 식별자입니다. |
isModern |
부울 | 최신 목록에 대해 true이고 그렇지 않으면 false인 부울 값입니다. |
rows |
IRow[] |
목록이 현재 게시하는 행입니다. 이 속성을 읽을 때마다 최신 데이터가 반환되므로 이벤트 처리기에서 loaded 읽어 데이터를 사용할 수 있는지 확인합니다. |
columns |
IColumn[] |
목록의 현재 보기에 있는 열입니다. |
메모
rows 반환하는 getColumn모든 항목 및 columns 속성, , on메서드 및 off 반환되는 모든 항목은 true인 최신 목록에서 isModern 만 지원됩니다. 기존 목록에서 호출은 안전하지만 아무 작업도 수행하지 rows 않습니다. 빈 배열을 반환하고 columns , getColumn 정의되지 않은 배열을 반환하고 onoff , 아무 작업도 수행하지 않습니다. 목록 데이터에 액세스하기 전에 확인 isModern 하거나 기존 목록에 대해 발생하지 않는 이벤트를 사용합니다 loaded .
IList 메서드
이러한 메서드를 사용하여 목록 표시 여부를 확인하고, 표시 여부를 전환하고, 기본 HTML 요소에 액세스하고, 열 및 이벤트를 사용할 수 있습니다.
| 메서드 | Returns | Description |
|---|---|---|
getVisible |
boolean |
목록이 표시되면 true를 반환합니다. |
setVisible(isVisible: boolean) |
void |
목록의 표시 유형을 설정합니다. |
getHtmlElement |
HTMLElement |
목록의 기본 HTML 요소를 반환합니다. |
getColumn(logicalName: string) |
IColumn | 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 최신 목록의 단일 행을 나타냅니다. 속성 또는 목록 이벤트 페이로드에서 행 list.rows 을 가져옵니다.
그리드에서 게시한 데이터를 반환하는 것으로 시작하는 get 메서드입니다. 다른 메서드는 스타일, 클래스 이름 및 표시 유형과 같이 행이 표시되는 방식을 설정합니다. 표는 행을 렌더링할 때 이러한 설정을 적용합니다. 행을 숨기면 행이 표시되는 방식만 변경됩니다. 기본 데이터는 변경되지 않습니다.
IRow 메서드
이러한 메서드를 사용하여 행의 데이터를 읽고 행의 표시 방식을 변경합니다.
| 메서드 | Returns | Description |
|---|---|---|
getId |
string |
행의 Dataverse 레코드 ID를 GUID 문자열로 반환합니다. |
getValue(logicalName: string) |
string | number | boolean | Date | null |
지정된 논리(스키마) 이름을 가진 열에 대한 원시 문자열, 숫자, 부울, 유효한 날짜 또는 숫자 옵션 값을 반환합니다. 열이 행에 없거나 해당 원시 값이 조회 모양의 개체를 포함하여 지원되지 않는 복합 값이면 null을 반환합니다. 원시 복합 값을 사용할 수 없는 경우에 사용합니다 getDisplayValue . |
getDisplayValue(logicalName: string) |
string |
현재 로캘에 대해 서식이 지정된 열의 값을 반환합니다. 열이 행에 없으면 빈 문자열을 반환합니다. |
getPrivileges |
object | undefined |
서버에서 레코드canRead에 대해 평가한 권한( , , canWritecanDelete및 canAppendcanAppendTo)을 반환합니다. 서버에서 제공하지 않는 경우 정의되지 않은 값을 반환합니다. 이러한 값을 사용하여 보안을 적용하는 것이 아니라 데이터가 표시되는 방식을 변경할 수 있습니다. |
getState |
object | undefined |
레코드의 stateCode 값과 statusCode 값을 반환합니다. 서버에서 제공하지 않는 경우 정의되지 않은 값을 반환합니다. |
setStyle(style: object) |
void |
인라인 CSS 스타일을 행에 병합합니다. 각 호출은 이미 설정된 스타일에 추가됩니다. |
setClassName(className: string) |
void |
행의 CSS 클래스 이름을 지정한 공백으로 구분된 클래스 이름으로 바꿉니다. |
addClassName(className: string) |
void |
행에 공백으로 구분된 CSS 클래스 이름을 하나 이상 추가합니다. |
removeClassName(className: string) |
void |
행에서 공백으로 구분된 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 최신 목록의 단일 열을 나타냅니다. 속성 또는 메서드에서 list.columnslist.getColumn 열을 가져옵니다. 헤더, 표시 유형 및 도구 설명을 서로 독립적으로 설정할 수 있습니다.
메서드는 get 설정한 값이 아니라 원본 데이터를 반환합니다. 예를 들어 getDisplayName 호출 후에도 구성된 표시 이름을 반환합니다. 호출 setHeaderrow.getDisplayValue 후에도 서버가 포맷한 cell.setDisplayText값을 반환합니다. 이 동작을 사용하면 목록이 데이터를 페치, 정렬, 필터 또는 페이지할 때마다 처리기가 다시 실행되므로 loaded 코드를 두 번 이상 안전하게 실행할 수 있습니다. 예를 들어 column.setHeader(column.getDisplayName() + ' *') 다른 별표 대신 매번 동일한 결과를 생성합니다. 원본 값을 읽은 다음 설정한 값을 파생합니다.
IColumn 메서드
이러한 메서드를 사용하여 열의 이름을 읽고 열의 표시 방식을 변경합니다.
| 메서드 | Returns | 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 행과 열의 교집합인 단일 셀을 나타냅니다. 메서드에서 셀을 가져옵니다 row.getCell . 셀은 의도적으로 쓰기 전용입니다. 셀 값을 읽으려면 셀이 getValue 포함된 행의 메서드 또는 getDisplayValue 메서드를 사용합니다.
ICell 메서드
이러한 메서드를 사용하여 셀의 텍스트와 스타일을 변경합니다.
| 메서드 | Returns | 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 } |
Important
둘 다 rowclick 및 cellclick 처리기가 등록된 경우 셀을 선택하면 처리기만 cellclick 호출됩니다.
rowclick 처리기는 동일한 선택에 대해 호출되지 않습니다.
목록 이벤트 예제
이 예제에서는 이벤트 및 cellclick 이벤트를 구독합니다rowclick.
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);
};
});
구독을 취소하려면 메서드에 전달한 메서드에 off 동일한 함수 참조를 on 전달합니다. 다른 참조는 처리기를 구독 취소하지 않습니다.