코드 구성 요소에 대한 Liquid 템플릿 태그

아티클
04/25/2023

참고

2022년 10월 12일부터 Power Apps 포털이 Power Pages가 됩니다. 추가 정보: Microsoft Power Pages는 이제 일반적으로 사용할 수 있습니다(블로그)
곧 Power Apps 포털 설명서를 마이그레이션하고 Power Pages 설명서와 병합할 예정입니다.

Power Apps component framework는 전문 개발자와 앱 제작자가 모델 기반 및 캔버스 앱을 위한 코드 구성 요소를 만들 수 있도록 합니다. 이런 코드 구성 요소는 양식, 보기, 대시보드에서 데이터 작업을 하는 사용자에게 많은 도움을 줍니다. 추가 정보: 포털에서 코드 구성 요소 사용하기

중요

코드 구성 요소에 대한 Liquid 템플릿 태그에는 포털 버전 9.3.10.x 이상이 필요합니다.

이번 릴리스에서는 웹 페이지에서 Liquid 템플릿 태그를 사용하여 코드 구성 요소를 추가하는 기능을 도입하고 포털의 양식에서 필드 수준 구성 요소에 대해 활성화된 웹 API를 사용하여 구성 요소를 사용 설정했습니다.

코드 구성 요소는 codecomponent Liquid 템플릿 태그를 사용하여 추가할 수 있습니다. 로드해야 하는 코드 구성 요소를 나타내는 키는 name 특성을 사용하여 전달됩니다. 키는 GUID(코드 구성 요소 ID) 또는 Microsoft Dataverse에 가져온 코드 구성 요소의 이름일 수 있습니다.

코드 구성 요소가 예상하는 속성 값은 ":"로 구분된 키/값 쌍으로 전달되어야 합니다. 여기서 키는 속성 이름이고 값은 JSON 문자열 값입니다.

{% codecomponent name: <ID or name> <property1:value> <property2:value> %}

예를 들어, controlValue라는 입력 매개 변수를 예상하는 코드 구성 요소를 추가하려는 경우 다음 Liquid 템플릿 태그를 사용합니다.

{% codecomponent name:abc_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value>%}

팁

이 예에서는 controlvalue와 controlApiKey라는 매개 변수를 사용하지만 귀하가 사용하는 구성 요소에는 다른 매개 변수 이름이 필요할 수 있습니다.

샘플 맵 컨트롤, 솔루션으로 코드 구성 요소 패키징을 포털과 함께 사용할 수 있습니다.

참고

커뮤니티에서 만든 리소스는 Microsoft에서 지원하지 않습니다. 커뮤니티 리소스와 관련하여 질문 또는 문제가 있으면 해당 리소스의 게시자에게 문의하세요. 이러한 리소스를 사용하기 전에 리소스가 Power Apps component framework 지침을 충족하는지 확인해야 하며 참조 목적으로만 사용해야 합니다.

자습서: Liquid 템플릿 태그가 있는 페이지에서 코드 구성 요소 사용

이 자습서에서는 구성 요소를 웹 페이지에 추가하도록 Power Apps 포털을 구성합니다. 그런 다음 포털 웹 페이지에서 구성 요소와 상호 작용합니다.

시작하기 전에

이 자습서에 사용된 샘플 코드 구성 요소를 사용하는 경우 시작하기 전에 먼저 샘플 솔루션을 환경으로 가져와야 합니다. 솔루션 가져오기에 대해 알아보려면 솔루션 가져오기로 이동하세요.

필수 항목

전제 조건을 확인하고 포털에서 지원되거나 지원되지 않는 코드 구성 요소를 살펴보려면 포털에서 코드 구성 요소 사용하기를 참조하십시오.

참고

이 튜토리얼은 Power Apps component framework를 사용하여 만든 샘플 코드 구성 요소를 사용하여 웹 페이지에서 지도 컨트롤을 보여줍니다. 기존 구성 요소나 새 구성 요소를 사용할 수도 있고 이 자습서의 다른 웹 페이지를 사용할 수도 있습니다. 이 경우 이 자습서의 단계를 수행할 때 구성 요소와 웹 페이지를 사용해야 합니다. 코드 구성 요소를 만드는 방법에 대한 자세한 내용은 첫 번째 구성 요소 만들기로 이동하세요.

1단계 Studio에서 웹 페이지에 코드 구성 요소 추가

Power Apps 포털 스튜디오에서 포털을 엽니다.
왼쪽 위 모서리에서 새 페이지를 선택합니다.
비어 있음을 선택합니다.
오른쪽의 속성 창에서 웹 페이지 이름을 업데이트합니다. 예: "맵 뷰어".
부분 URL을 업데이트합니다. 예: "mapviewer".
권한을 확장합니다.
모든 사용자가 페이지를 사용할 수 있음을 사용 중지합니다.
이 페이지에 대한 액세스를 허용해야 하는 웹 역할을 선택합니다.
Liquid 소스 코드를 편집하려면 페이지에서 편집 가능한 영역을 선택하십시오.
스튜디오 코드 편집기를 엽니다.
다음 구문을 사용하여 Liquid 템플릿 태그로 컨트롤을 추가합니다.
```
{% codecomponent name:abc\_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value> %}
```
팁

가져온 모든 구성 요소의 세부 정보를 검색하고 구성 요소 이름을 검색하려면 CustomControl 웹 API를 참조하세요.

예:
- 구성 요소를 검색하려면:
  
  https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$select=ContosoCustomControlName
- 구성 요소에 대한 입력 매개 변수를 검색하려면:
  
  https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$filter=name eq 'ContosoCustomControlName' &$select=manifest
코드 편집기를 저장하고 닫습니다.
오른쪽 위에서 웹사이트 탐색을 선택합니다.
이제 웹 페이지에 추가된 컨트롤이 표시됩니다.

다음 단계

개요: 포털에서 코드 구성 요소 사용하기

추가로 살펴봐야 하는 사항

Codecomponent Dataverse 엔터티 태그
Codecomponent 템플릿 태그
Power Apps component framework 개요
첫 번째 구성 요소 만들기
모델 기반 앱의 열 또는 테이블에 코드 구성 요소 추가
샘플 포털 웹 API 구성 요소 구현

참고

귀사의 설명서 언어 기본 설정에 대해 말씀해 주시겠습니까? 간단한 설문 조사에 응해주세요. (이 설문 조사는 영어로 되어 있습니다.)

이 설문 조사는 약 7분 정도 걸립니다. 개인 데이터는 수집되지 않습니다(개인정보처리방침).

다음을 통해 공유