DetailsList 제어

아티클
05/01/2023

데이터 집합을 표시하는 데 사용되는 컨트롤입니다.

노트

GitHub 코드 구성 요소 리포지토리에서 전체 설명서 및 소스 코드를 확인할 수 있습니다.

DetailsList 컨트롤.

Description

세부 정보 목록(DetailsList)는 정보가 풍부한 항목 컬렉션을 표시하고 사람들이 콘텐츠를 정렬, 그룹화 및 필터링할 수 있도록 하는 강력한 방법입니다. 정보 밀도가 중요한 경우 DetailsList를 사용합니다.

DetailsList 코드 구성 요소를 사용하면 캔버스 앱 및 사용자 정의 페이지 내부에서 유창한 UI DetailsList 구성 요소를 사용할 수 있습니다.

Dataverse 데이터 세트 또는 로컬 컬렉션에 바인딩할 수 있습니다.
유연성을 위해 원본 데이터 세트에서 제공하는 열 메타데이터와 별도로 구성 가능한 열을 지원합니다.
링크, 아이콘, 확장/축소 및 하위 텍스트 셀의 셀 유형.
페이징 지원.
Dataverse 정렬 또는 구성 가능한 SortBy 속성을 사용한 정렬 지원.

속성

키 속성

Property	Description
`Items`	렌더링할 행이 포함된 데이터 세트입니다. `Records`로도 표시됩니다. 아래 항목 속성 표를 참조하세요.
`Columns`	열에 대한 옵션 메타데이터가 포함된 데이터 세트입니다. 이 데이터 세트가 제공되면 레코드 데이터 세트에 제공된 열을 완전히 대체합니다. 아래 열 속성 표를 참조하세요.
`SelectionType`	선택 유형(없음, 단일, 다중)
`PageSize`	페이지당 로드할 레코드 수를 정의합니다.
`PageNumber`	표시된 현재 페이지를 출력합니다.
`HasNextPage`	다음 페이지가 있으면 true를 출력합니다.
`HasPreviousPage`	이전 페이지가 있으면 true를 출력합니다.
`TotalRecords`	사용 가능한 총 레코드 수를 출력합니다.
`CurrentSortColumn`	현재 정렬에 사용되는 것으로 표시할 열의 이름
`CurrentSortDirection`	현재 사용 중인 정렬 열의 방향

`Items` 속성

관련 기능을 활성화하려면 이러한 특성을 데이터 원본에서 사용할 수 있어야 합니다. Power Fx 수식 AddColumns()를 사용하여 이러한 값을 원래 데이터 원본에 추가할 수 있습니다.

Property	Description
`RecordKey`	(선택 사항) - 고유한 키 열 이름입니다. 레코드가 업데이트될 때 선택 항목을 유지하고 `OnChange` 이벤트가 발생한 후 `EventRowKey`에 행 인덱스 대신 ID를 포함하려는 경우 이를 제공합니다.
`RecordCanSelect`	(선택 사항) - 행을 선택할 수 있는지 여부를 정의하는 `boolean` 값을 포함하는 열 이름입니다.
`RecordSelected`	(선택 사항) - 행이 기본적으로 선택되는지와 `SetSelection`을 포함하도록 `InputEvent`를 설정할 때 정의하는 `boolean` 값을 포함하는 열 이름입니다. 아래 `Set Selection`의 섹션을 참조하세요.

`Columns` 속성

Property	Description
`ColDisplayName`	(필수) - 헤더에 표시할 열의 이름을 제공합니다.
`ColName`	(필수) - 항목 컬렉션에 있는 열의 실제 필드 이름을 제공합니다.
`ColWidth`	(필수) - 열의 절대 고정 너비를 픽셀 단위로 제공합니다.
`ColCellType`	렌더링할 셀의 유형입니다. 가능한 값: `expand`, `tag`, `indicatortag`, `image`, `clickableimage`, `link`. 자세한 내용은 다음 섹션을 참조하십시오.
`ColHorizontalAlign`	`ColCellType`이 `image` 또는 `clickableimage` 유형인 경우 셀 콘텐츠의 정렬입니다.
`ColVerticalAlign`	`ColCellType`이 `image` 또는 `clickableimage` 유형인 경우 셀 콘텐츠의 정렬입니다.
`ColMultiLine`	사용 가능한 너비에 맞지 않는다면 셀 텍스트의 텍스트를 래핑해야 할 경우 True입니다.
`ColResizable`	열 머리글 너비를 조정할 수 있어야 하는 경우 True입니다.
`ColSortable`	열을 정렬할 수 있어야 하는 경우 True입니다. 데이터 세트가 직접 Dataverse 연결을 통한 자동 정렬을 지원하는 경우 데이터가 자동으로 정렬됩니다. 그렇지 않으면 `SortEventColumn` 및 `SortEventDirection` 출력이 설정되고 레코드 Power FX 바인딩 표현식에서 사용해야 합니다.
`ColSortBy`	열이 정렬될 때 `OnChange` 이벤트에 제공할 열의 이름입니다. 예를 들어 날짜 열을 정렬하는 경우 열에 표시된 서식이 지정된 텍스트가 아닌 실제 날짜 값을 기준으로 정렬하려고 합니다.
`ColIsBold`	데이터 셀 데이터가 굵게 표시되어야 하는 경우 True
`ColTagColorColumn`	셀 유형이 태그인 경우 텍스트 태그의 16진수 배경색으로 설정합니다. `transparent`로 설정할 수 있습니다. 셀 유형이 태그가 아닌 경우 표시기 원 태그 셀로 사용할 16진수 색상으로 설정합니다. 텍스트 값이 비어 있으면 태그가 표시되지 않습니다.
`ColTagBorderColorColumn`	텍스트 태그의 테두리 색상으로 사용할 16진수 색상으로 설정합니다. `transparent`로 설정할 수 있습니다.
`ColHeaderPaddingLeft`	열 머리글 텍스트(픽셀)에 여백을 추가합니다
`ColShowAsSubTextOf`	이것을 다른 열의 이름으로 설정하면 열이 해당 열의 자식으로 이동합니다. 아래의 하위 텍스트 열을 참조하십시오.
`ColPaddingLeft`	자식 셀(픽셀)의 왼쪽에 여백 추가
`ColPaddingTop`	자식 셀(픽셀)의 상단에 여백 추가
`ColLabelAbove`	하위 텍스트 열로 표시되는 경우 레이블을 자식 셀 값 위로 이동합니다.
`ColMultiValueDelimiter`	이 구분 기호와 함께 다중 값 배열 값을 결합합니다. 다중값 열에서 아래를 참조하십시오.
`ColFirstMultiValueBold`	다중값 배열 값을 표시할 때 첫 번째 항목은 굵게 표시됩니다.
`ColInlineLabel`	문자열 값으로 설정하면 열 이름과 다를 수 있는 셀 값 내부에 레이블을 표시하는 데 사용됩니다. 예를 들면
`ColHideWhenBlank`	true인 경우 셀 값이 비어 있으면 모든 셀 인라인 레이블 및 여백이 숨겨집니다.
`ColSubTextRow`	하위 텍스트 셀에 여러 셀을 표시할 때 행 인덱스로 설정합니다. 0은 기본 셀 내용 행을 나타냅니다.
`ColAriaTextColumn`	셀(예: 아이콘 셀)에 대한 아리아 설명이 포함된 열입니다.
`ColCellActionDisabledColumn`	셀 작업(예: 아이콘 셀)이 비활성화되었는지 여부를 제어하는 부울 플래그가 포함된 열입니다.
`ColImageWidth`	아이콘/이미지 크기(픽셀)입니다.
`ColImagePadding`	아이콘/이미지 셀 주변의 여백입니다.
`ColRowHeader`	다른 셀(12px가 아닌 14px)보다 크게 렌더링할 열을 정의합니다. 일반적으로 열 세트당 행 헤더가 하나만 있습니다.

스타일 속성

Property	Description
`Theme`	유창한 UI 테마 디자이너에서 생성되고 내보낸 유창한 UI 테마 JSON입니다. 설정 방법은 테마 설정을 참고하세요.
`Compact`	컴팩트 스타일을 사용해야 할 경우 True
`AlternateRowColor`	대체 행에 사용할 행 색상의 16진수 값입니다.
`SelectionAlwaysVisible`	선택 라디오 버튼은 행을 가리킬 때만 표시되는 것이 아니라 항상 표시되어야 합니다.
`AccessibilityLabel`	테이블 아리아 설명에 추가할 레이블

이벤트 속성

Property	Description
`RaiseOnRowSelectionChangeEvent`	행이 선택/선택 취소되면 `OnChange` 이벤트가 발생합니다. (아래 참조)
`InputEvent`	하나 이상의 입력 이벤트(문자열 연결을 사용하여 함께 결합할 수 있음). 가능한 값 `SetFocus`, `SetFocusOnRow`, `SetFocusOnHeader`, `ClearSelection`, `SetSelection`. 이벤트가 트리거되도록 하려면 임의의 문자열 요소가 뒤에 와야 합니다. 이벤트를 결합할 수 있습니다. 예를 들어 `SetFocusClearSelection`은 포커스를 지우고 동시에 설정합니다. `SetFocusOnRowSetSelection` 행에 포커스를 두고 동시에 선택 항목을 설정합니다.
`EventName`	`OnChange`가 트리거될 때 이벤트를 출력합니다. 가능한 값 - `Sort`, `CellAction`, `OnRowSelectionChange`
`EventColumn`	`CellAction`이 호출될 때 사용되는 출력 이벤트 열 필드 이름
`EventRowKey`	이벤트가 호출된 행의 인덱스 또는 `RecordKey` 속성이 설정된 경우 행 키를 보유하는 출력 이벤트 열입니다.
`SortEventColumn`	`OnChange` 정렬 이벤트를 트리거한 열의 이름
`SortEventDirection`	`OnChange` 정렬 이벤트를 트리거한 정렬 방향

기본 사용법

DetailsList에 표시되는 열을 결정하려면 DetailsList의 다음 속성을 구성합니다.

전지. 오른쪽의 컨트롤 플라이아웃 메뉴에서 편집 옵션을 선택하여 원하는 필드를 추가합니다(사전 정의된 데이터 카드 수정을 위해 동일한 인터페이스 사용).
기둥. Columns 속성에서 열과 필드 간의 특정 매핑을 제공합니다.

예:

다음 수식을 사용하여 Dataverse 계정 시스템 테이블에 매핑:

Table(
    {
        ColName: "name",
        ColDisplayName: "Name",
        ColWidth: 200,
        ColSortable: true,
        ColIsBold: true,
        ColResizable: true
    },{
        ColName: "address1_city",
        ColDisplayName: "City:",
        ColShowAsSubTextOf: "name"
    },{
        ColName: "address1_country",
        ColDisplayName: "Country:",
        ColShowAsSubTextOf: "name"
    },{
        ColName: "telephone1",
        ColDisplayName: "Telephone",
        ColWidth: 100,
        ColSortable: true,
        ColResizable: true
    },{
        ColName: "primarycontactid",
        ColDisplayName: "Primary Contact",
        ColWidth: 200,
        ColSortable: true,
        ColSortBy: "_primarycontactid_value",
        ColResizable: true,
        ColCellType: "link"
    }
)

하위 텍스트 열

ColShowAsSubTextOf 열 속성은 다른 열의 값 아래에 표시되는 열을 정의합니다. 보조 정보 및 확장 가능한 콘텐츠를 표시하는 데 사용할 수 있습니다(아래 참조).

다음과 같이 정의된 컬렉션이 있는 경우:

ClearCollect(colAccounts,
{id:"1",name:"Contoso",city:"Redmond",country:"U.S.",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",expand:false},
{id:"2",name:"Litware, Inc",city:"Dallas",country:"U.S.",description:"Donec vel pellentesque turpis.",expand:false});

열을 다음과 같이 정의할 수 있습니다.

Table(
    {
        ColName: "name",
        ColDisplayName: "Account Name",
        ColWidth: Self.Width-100,
        ColIsBold:true
    },
    {
        ColName: "city",
        ColDisplayName: "City:",
        ColShowAsSubTextOf:"name",
        ColLabelAbove:false,
        ColIsBold:true,
        ColSubTextRow: 1
    },
    {
        ColName: "country",
        ColDisplayName: "Country:",
        ColShowAsSubTextOf:"name",
        ColLabelAbove:false,
        ColIsBold:true,
        ColSubTextRow: 1
    },
    {
        ColName: "description",
        ColDisplayName: "",
        ColShowAsSubTextOf:"name",
        ColLabelAbove:false,
        ColIsBold:false,
        ColSubTextRow: 2
    }
)

결과는 다음과 같은 테이블이 됩니다.

셀 유형

ColCellType 열 속성이 허용하는 값: expand, tag, image, indicatortag, clickableimage, link

확장/축소

'하위 텍스트' 행에 확장/축소 아이콘이 있어야 하는 경우 추가 열을 열 데이터 세트에 추가할 수 있으며 열 정의 ColCellType이 expand도 설정합니다.

{ColName:"expand",ColDisplayName:"",ColWidth:32,ColResponsive:false, ColRightAligned:true, ColCellType:"expand"}

RecordKey 속성이 index 열로 설정되어 있다고 가정하면 OnChange 이벤트는 행을 확장/축소하기 위해 다음을 포함할 수 있습니다.

If(Self.EventName="CellAction" && Self.EventColumn="expand",
    With(LookUp(colExpand,index=Self.EventRowKey) As Row,
        Patch(colExpand,Row,{expand:!Row.expand})
        )
);

인덱스를 사용하여 셀 작업이 호출된 행을 검색한 다음(RecordKey가 설정되지 않은 경우 EventRowKey에 행 번호가 포함됨) 확장 값을 토글합니다.

그러면 다음과 같은 결과가 나타납니다.

태그 및 표시기 태그

셀 유형의 tag 또는 indicatortag를 사용하여 인라인 색상 태그를 생성하여 셀 내용을 표시할 수 있습니다.

tag - 이렇게 하면 색상이 있는 배경과 테두리가 있는 태그 상자가 표시됩니다.
tagindicator - 색상이 있는 원형 표시기가 있는 태그 상자를 표시합니다.

색상은 행별로 다를 수 있으므로 열 메타데이터 데이터 세트는 단순히 태그의 색상을 보유하는 열의 이름을 제공합니다.

데이터 세트를 고려하십시오.

ClearCollect(
    colAccounts,
    {
        name: "Contoso",
        city: "Redmond",
        country: "U.S.",
        TagColor: "rgb(0, 183, 195)",
        TagBorderColor: "rgb(0,137,147)"
    },
    {
        name: "Litware, Inc",
        city: "Dallas",
        country: "U.S.",
        TagColor: "rgb(255, 140, 0)",
        TagBorderColor: "rgb(194,107,0)"
    }
);

그런 다음 열 메타데이터를 추가하여 하나는 태그로 표시되고 다른 하나는 태그 표시기로 표시되는 두 개의 열을 추가할 수 있습니다. 각각은 TagColor 및 TagBorderColor 열을 사용하여 색상을 결정합니다.

{
        ColName: "country",
        ColDisplayName: "Country",
        ColCellType:"tag",
        ColWidth: 60,
        ColTagColorColumn: "TagColor",
        ColTagBorderColorColumn: "TagBorderColor"
},
{
        ColName: "country",
        ColDisplayName: "Country",
        ColCellType:"indicatortag",
        ColWidth: 60,
        ColTagColorColumn: "TagColor",
        ColTagBorderColorColumn: "TagBorderColor"
}

그러면 다음과 같은 결과가 나타납니다.

이미지 및 클릭 가능한 이미지

image 또는 clickableimage의 셀 유형을 사용하여 OnChange 작업을 발생시키기 위해 선택적으로 선택할 수 있는 인라인 이미지를 구성할 수 있습니다.

이미지 콘텐츠는 다음 접두사로 정의할 수 있습니다.

https: 외부 이미지에 대한 연결. 예: https://via.placeholder.com/100x70
icon: 다음 중 하나를 사용하여 유창한 UI 아이콘 예를 들어, icon:SkypeCircleCheck
data: 인라인 SVG 이미지 데이터 사용: 예를 들어, data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%2020...

이미지가 clickableimage 유형인 경우 OnChange 이벤트는 아이콘을 선택하면 CellAction의 EvenName, 이미지 열의 이름을 제공하는 EventColumn 및 행의 RecordKey인 EventRowKey로 시작됩니다.(RecordKey가 설정되지 않은 경우 EventRowKey에 행 번호가 포함됨).

예를 들어 행 데이터를 고려하십시오.

{
        id: "1",
        name: "Contoso",
        city: "Redmond",
        country: "U.S.",
        ImageColor: "rgb(0, 183, 195)",
        externalimage: "https://via.placeholder.com/100x70",
        iconimage: "icon:SkypeCircleCheck"
    },
    {
        id: "2",
        name: "Litware, Inc",
        city: "Dallas",
        country: "U.S.",
        ImageColor: "rgb(255, 140, 0)",
        externalimage: "https://via.placeholder.com/100x70",
        iconimage: "icon:SkypeCircleCheck"
    }

그리고 열 메타데이터를 고려하십시오.

 {
        ColName: "externalimage",
        ColDisplayName: "Image",
        ColCellType:"image",
        ColWidth: 60,
        ColImageWidth: 60,
        ColImagePadding: 8,
        ColVerticalAlign: "Top"
},
{
        ColName: "iconimage",
        ColDisplayName: "Clickable Image",
        ColCellType:"clickableimage",
        ColWidth: 60,
        ColImageWidth: 60,
        ColImagePadding: 8,
        ColVerticalAlign: "Top"
}

결과는 다음과 같습니다.

clickableimage 열의 경우 OnChange 이벤트는 사용자가 다음을 사용하여 (마우스 또는 키보드) 및 아이콘(비활성화되지 않은 것으로 가정)을 선택할 때 처리할 수 있습니다.

If(Self.EventName="CellAction",
	Notify("CellAction " & Self.EventColumn & " " & Self.EventRowKey)
)

EventRowKey는 RecordKey 속성으로 정의된 열 값으로 채워집니다.

링크

열은 링크로 렌더링될 수 있으며, 이는 위에서 설명한 클릭 가능한 이미지가 작동하는 방식과 유사한 방식으로 링크가 선택될 때 OnChange 이벤트를 발생시킵니다.

링크에 대한 열 메타데이터는 다음과 같이 구성됩니다.

  {
        ColName: "name",
        ColDisplayName: "Account Name",
        ColWidth: 150,
        ColIsBold:true,
        ColCellType: "link"
    }

이렇게 하면 셀 내용이 다음과 같이 렌더링됩니다.

OnChange 이벤트는 링크를 클릭하면 다시 실행되며, EventColumn은 링크를 포함하는 열의 이름이고, EventRowKey은 RecordKey 속성으로 정의된 열 값으로 채워집니다.

다중값 열

열 값이 테이블/컬렉션으로 설정하여 여러 값을 가질 수 있는 경우. 그러면 값이 여러 셀 값으로 렌더링됩니다. 예:

 {
        id: "1",
        name: "Contoso",
        tags:["#PowerApps","#PowerPlatform"]
    },

그러면 열 메타데이터는 다음과 같을 수 있습니다.

 {
        ColName: "tags",
        ColDisplayName: "Tags",
        ColWidth: 250,
        ColFirstMultiValueBold :true,
        ColMultiValueDelimiter:" "
    }

그러면 다음과 같은 테이블이 표시됩니다.

동작

정렬 이벤트

열은 ColSortable 속성을 true로 설정하여 정렬 가능한 것으로 정의됩니다. 열에 필요한 정렬 순서와 다른 텍스트 값이 표시되면(예: 형식이 지정된 날짜 또는 상태 열) ColSortBy 속성을 사용하여 다른 정렬 열을 지정할 수 있습니다.

그런 다음 정렬은 두 가지 방식으로 처리됩니다.

Dataverse 데이터 원본에 연결되면 자동으로.
컬렉션을 사용할 경우 수동으로.

자동 정렬

항목 데이터 세트가 기본 Dataverse 데이터 세트인 경우 열이 정렬 가능한 것으로 표시되면 자동으로 정렬됩니다. AddColumn을 사용하거나 컬렉션에 데이터를 저장하여 Dataverse 컬렉션의 모양이 변경된 경우 자동 정렬이 더 이상 작동하지 않으며 수동 정렬을 구현해야 합니다.

수동 정렬

Dataverse 연결에 연결되지 않은 경우 사용자 지정 커넥터 지원 및 로컬 컬렉션 정렬을 허용하기 위해 구성 요소 외부에서 수동 정렬이 지원됩니다. 열은 정렬 가능 여부를 정의할 수 있습니다. 열 정렬을 선택하면 열과 방향을 제공하는 OnChange 이벤트가 발생합니다. 그런 다음 앱은 이러한 값을 사용하여 바인딩된 컬렉션을 정렬된 레코드로 업데이트할 테이블로 변경해야 합니다.

열 컬렉션에서 정렬 가능한 부울 열을 추가합니다
정렬 가능한 열의 이름을 Columns.ColSortable 속성에 추가

테이블의 OnChange 이벤트 안에 다음 코드를 추가합니다.

If(Self.EventName="Sort", 
UpdateContext({
                ctxSortCol:Self.SortEventColumn,
                ctxSortAsc:If(Self.SortEventDirection='PowerCAT.FluentDetailsList.SortEventDirection'.Ascending,true,false)
 })
);

Sort Column 속성을 ctxSortCol로 설정

Sort Direction 속성을 다음과 같이 설정합니다.

If(ctxSortAsc,
    'PowerCAT.FluentDetailsList.CurrentSortDirection'.Ascending,
    'PowerCAT.FluentDetailsList.CurrentSortDirection'.Descending)

위에서 설정한 컨텍스트 변수를 사용하여 정렬하도록 입력 항목 컬렉션을 설정합니다.
```
SortByColumns(colData,ctxSortCol,If(ctxSortAsc,SortOrder.Ascending,SortOrder.Descending))
```

사용자가 열 헤더를 선택하여 정렬을 변경한 후 OnChange 이벤트가 발생하면 제공된 새 정렬 정보를 사용하여 정렬 컨텍스트 변수가 업데이트되어 입력 데이터 세트가 다시 정렬되고 그에 따라 테이블이 업데이트됩니다.

페이징

페이징은 구성 요소에서 내부적으로 처리되지만 뒤로/앞으로 이동하는 버튼은 호스팅 앱에서 생성해야 하며 이벤트는 구성 요소로 전송됩니다.

다음 속성은 페이징을 제어하는 데 사용됩니다.

PageSize - 페이지당 로드할 레코드 수를 정의합니다.
PageNumber - 현재 표시된 페이지를 출력합니다.
HasNextPage - 다음 페이지가 있는지 여부를 출력합니다.
HasPreviousPage - 이전 페이지가 있으면 true를 출력합니다.
TotalRecords - 사용 가능한 총 레코드 수를 출력합니다.

페이징 버튼은 다음과 같이 정의할 수 있습니다.

첫 번째 페이지 로드
- OnSelect: UpdateContext({ctxGridEvent:"LoadFirstPage" & Text(Rand())})
- DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
이전 페이지 로드
- OnSelect: UpdateContext({ctxGridEvent:"LoadPreviousPage" & Text(Rand())})
- DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
다음 페이지 로드
- OnSelect: UpdateContext({ctxGridEvent:"LoadNextPage" & Text(Rand())})
- DisplayMode: If(grid.HasNextPage,DisplayMode.Edit,DisplayMode.Disabled)

레코드 레이블 수는 다음과 유사한 표현식으로 설정할 수 있습니다.

grid.TotalRecords & " record(s)  " & Text(CountRows(grid.SelectedItems)+0) & " selected"

다음 페이지의 상단 표시

이는 'SetFocusOnRow' 이벤트를 사용하여 구현됩니다. ctxGridEvent에 바인딩된 InputEvent 속성이 있는 경우 다음 페이지 버튼의 OnSelect 속성에서 UpdateContext({ctxGridEvent:"LoadNextPageSetFocusOnRow" & Text(Rand())});를 사용합니다.

입력 이벤트

InputEvent 속성은 다음 중 하나 이상으로 설정할 수 있습니다.

SetFocus - 그리드의 첫 번째 행에 초점을 맞춥니다.
ClearSelection - 모든 선택을 취소하고 기본 선택으로 돌아갑니다.
SetSelection - 선택 사항을 정의된 대로 설정합니다. RowSelected 열.
LoadNextPage - 다음 페이지가 있으면 로드합니다.
LoadPreviousPage - 이전 페이지가 있으면 로드합니다.
LoadFirstPage - 첫 번째 페이지를 로드합니다.

입력 이벤트가 선택되도록 하려면 임의의 값으로 충분해야 합니다. 예: SetSelection" & Text(Rand())

자세한 내용은 아래를 참조하십시오.

선택한 항목 및 행 작업

구성 요소는 단일, 다중 또는 없음 선택 모드를 지원합니다.

항목을 선택하면 SelectedItems 및 Selected 속성이 업데이트됩니다.

SelectedItems - 테이블이 다중 선택 모드에 있는 경우, 여기에는 Items 컬렉션의 레코드가 하나 이상 포함됩니다.
Selected - 테이블이 단일 선택 모드인 경우, 여기에는 선택된 레코드가 포함됩니다.

사용자가 두 번 클릭하거나 입력 또는 선택한 행을 눌러 행 작업을 호출하면 OnSelect 이벤트가 발생합니다. Selected 속성에는 호출된 레코드에 대한 참조가 포함됩니다. 이 이벤트는 자세한 기록을 표시하거나 다른 화면으로 이동하는 데 사용할 수 있습니다.

RaiseOnRowSelectionChangeEvent 속성이 활성화된 경우 선택한 행이 변경되면 EventName이 OnRowSelectionChange로 설정된 상태에서 OnChange 이벤트가 발생합니다. 앱이 행 더블 클릭이 아닌 단일 행 선택에 응답해야 하는 경우 OnChange는 다음과 유사한 코드를 사용하여 이를 감지할 수 있습니다.

If(
    Self.EventName = "OnRowSelectionChange",
        If(!IsBlank(Self.EventRowKey),
        	// Row Selected
        )
);

현재 선택한 항목 지우기

선택한 레코드를 지우려면 InputEvent 속성을 다음으로 시작하는 문자열로 설정해야 합니다

예를 들면

UpdateContext({ctxTableEvent:"ClearSelection"&Text(Rand())})

그러면 컨텍스트 변수 ctxTableEvent을 InputEvent 속성에 바인딩할 수 있습니다.

행 선택 설정

특정 레코드 집합을 프로그래밍 방식으로 선택해야 하는 시나리오가 있는 경우 레코드의 RecordSelected 속성 설정과 함께 InputEvent 속성을 SetSelection 또는 SetFocusOnRowSetSelection으로 설정할 수 있습니다.

예를 들어 다음과 같은 데이터 세트가 있는 경우:

{RecordKey:1, RecordSelected:true, name:"Row1"}

첫 번째 행을 선택하고 선택하려면 InputEvent를 "SetFocusOnRowSetSelection"&Text(Rand()) 또는 "SetSelection"&Text(Rand())로 설정할 수 있습니다

"변경 시" 동작 구성

구성 요소에서 제공하는 EventName을 기반으로 특정 작업을 구성하려면 구성 요소의 OnChange 속성에 다음 수식을 추가하고 수정합니다.

사용자가 선택한 행을 변경할 때 이벤트 트리거: 구성 요소에서 OnRowSelectionChange 이벤트 발생 속성을 활성화합니다.
링크 동작 구성: ColCellType 값은 링크로 설정됩니다.

/* Runs when selected row changes and control property 'Raise OnRowSelection event' is true */
If( Self.EventName = "OnRowSelectionChange",
    Notify( "Row Select " & Self.EventRowKey )
);

/* Runs when a user selects a column with ColCellType set to 'link' */
If( Self.EventName = "CellAction",
    Notify( "Open Link " &  Self.EventColumn & " " & Self.EventRowKey )
)

제한 사항

이 코드 구성 요소는 캔버스 앱 및 사용자 정의 페이지에서만 사용할 수 있습니다.

다음을 통해 공유

DetailsList 제어

Description

속성

키 속성

`Items` 속성

`Columns` 속성

스타일 속성

이벤트 속성

기본 사용법

하위 텍스트 열

셀 유형

확장/축소

태그 및 표시기 태그

이미지 및 클릭 가능한 이미지

링크

다중값 열

동작

정렬 이벤트

자동 정렬

수동 정렬

페이징

다음 페이지의 상단 표시

입력 이벤트

선택한 항목 및 행 작업

현재 선택한 항목 지우기

행 선택 설정

"변경 시" 동작 구성

제한 사항

피드백

추가 리소스

다음을 통해 공유

DetailsList 제어

Description

속성

키 속성

Items 속성

Columns 속성

스타일 속성

이벤트 속성

기본 사용법

하위 텍스트 열

셀 유형

확장/축소

태그 및 표시기 태그

이미지 및 클릭 가능한 이미지

링크

다중값 열

동작

정렬 이벤트

자동 정렬

수동 정렬

페이징

다음 페이지의 상단 표시

입력 이벤트

선택한 항목 및 행 작업

현재 선택한 항목 지우기

행 선택 설정

"변경 시" 동작 구성

제한 사항

피드백

추가 리소스

`Items` 속성

`Columns` 속성