캔버스 구성 요소 속성(실험적)

캔버스 구성 요소를 사용하면 제작자는 구성 요소와 구성 요소를 호스팅하는 앱 간에 값이나 논리를 전달하는 다양한 유형의 속성을 생성할 수 있습니다. 속성은 대화형 및 재사용 가능한 구성 요소를 만드는 데 필수적인 부분입니다.

속성 유형

제작자가 사용할 수 있는 속성에는 네 가지 유형이 있습니다.

1. 데이터 속성: 데이터 속성은 색상이나 텍스트 값과 같은 데이터와 관련이 있습니다. 데이터 속성은 구성 요소가 앱에 데이터를 제공하는지(출력) 또는 앱이 데이터를 구성 요소에 제공하는지(입력)를 나타내는 입력 또는 출력으로 설정할 수 있습니다. 데이터 속성은 앱 데이터 흐름에 참여하는 유일한 속성입니다.
2. 함수 속성: 함수 속성은 특정 매개 변수를 기반으로 계산을 수행하거나 텍스트를 변경하는 것과 같은 논리와 관련됩니다. 함수 속성은 구성 요소가 앱이 호출할 수 있는 함수를 제공하는지(출력) 또는 앱이 구성 요소가 호출할 수 있는 함수를 제공하는지(입력)를 나타내는 입력 또는 출력으로 설정할 수 있습니다. 함수 속성은 앱의 데이터 흐름에 참여하지 않으며 구성 요소 또는 앱 변수를 사용할 수 없습니다.
3. 작업 속성: 작업 속성은 논리를 처리하고 Output 함수처럼 작동하는 속성 유형입니다. 따라서 구성 요소에는 정의된 논리가 있으며 해당 논리는 연결된 식을 사용하고 컬렉션 또는 변수("동작")를 조작할 수 있습니다. 예를 들어 Clear() 작업 속성은 앱이 구성 요소의 일부 값을 지우기 위해 호출할 수 있는 기능을 제공하거나 데이터 소스를 업데이트하는 Save() 작업 속성을 제공할 수 있습니다.
4. 이벤트 속성: 이벤트 속성은 논리와 함수를 Input 함수로 포함하는 속성의 범주입니다. 따라서 앱은 구성 요소가 호출할 수 있고 해당 논리가 연결된 식을 사용하고 컬렉션 또는 변수("동작")를 조작할 수 있는 논리를 정의합니다. 일반적으로 이러한 속성의 이름은 OnSelect 또는 OnChanged와 같은 이벤트를 반영합니다.

데이터 속성

데이터 속성의 사용법은 상상하기 쉽습니다. 앱의 표준 컨트롤에는 일반적으로 기본값, 텍스트 색상, 크기 등을 설정하기 위한 여러 데이터 속성이 있습니다. 호스팅 앱에서 사용할 수 있는 구성 요소 내의 컨트롤 속성을 만들고자 하는 간단한 예를 살펴보겠습니다. 이 예에서 구성 요소의 이름은 Component1입니다. 구성 요소 내부에 슬라이더 컨트롤을 배치합니다. 소비하는 앱에서 색상을 지정하는 입력 속성과 구성 요소가 슬라이더의 현재 값을 앱에 알릴 수 있는 출력 속성이 있습니다. 다음 예에서는 구성 요소에 Slider라는 이름의 슬라이더 컨트롤이 포함되어 있다고 가정합니다.

1. 구성 요소의 속성 창에서 새 사용자 지정 속성을 선택합니다.
2. 새 사용자 지정 속성 창에 표시 이름 Slider Color를 입력합니다.
3. 데이터의 속성 유형을 선택하고 속성 정의 값 입력을 선택합니다.
4. 마지막으로 데이터 형식 드롭다운에서 색상을 선택합니다.
5. 만들기를 클릭합니다.

다음으로 Slider1 슬라이더 컨트롤을 선택합니다. ValueFill 속성을 찾고 수식 입력줄에 Component1.SliderColor를 입력합니다. Component1는 구성 요소의 이름을 나타내고 SliderColor는 이전에 추가한 속성의 이름입니다.

이제 구성 요소에는 소비 앱에서 설정할 수 있는 SliderColor 속성이 있으며, 이를 통해 구성 요소에 색상을 전달하여 슬라이더의 ValueFill 속성을 설정할 수 있습니다.

또한 소비하는 앱에 슬라이더의 값을 제공하고자 합니다. 이를 위해 출력 속성을 ​​추가할 것입니다.

1. 구성 요소의 속성 창에서 새 사용자 지정 속성을 선택합니다.
2. 새 사용자 지정 속성 창에 표시 이름 Slider Value를 입력합니다.
3. 데이터의 속성 유형을 선택하고 속성 정의 값 출력을 선택합니다.
4. 마지막으로 데이터 형식 드롭다운에서 숫자를 선택합니다.
5. 만들기를 클릭합니다.

데이터 속성이 출력인 경우 구성 요소는 소비하는 앱에 값을 제공합니다. 이에 대한 수식을 설정하려면 구성 요소의 새로운 SliderValue 속성을 슬라이더의 값 속성으로 설정해야 합니다.

1. 구성 요소의 속성 창에서 Slider Value 속성을 클릭합니다.
2. 수식 입력줄에서 기본값 100을 Slider1.Value 수식으로 바꿉니다.

이제 구성 요소의 SliderValue 속성은 구성 요소 내부의 슬라이더 값을 반영하여 소비하는 앱에서 읽을 수 있습니다.

함수 속성

함수 속성에는 값을 반환하는 식이 포함됩니다. 일반적으로 함수는 반환할 값을 계산하거나 결정하는 데 사용하는 몇 가지 인수를 사용합니다.

Output 함수는 Power Apps용 사용자 지정 함수를 만드는 간단한 방법입니다. 구성 요소는 일부 인수를 사용하고 값을 반환하는 식으로 Output 함수를 정의합니다. 이 함수는 Component1.MyFunction(arg1, arg2)을 호출하여 구성 요소의 이름(예: Component1)을 사용하는 앱에서 사용할 수 있습니다.

Input 함수는 함수 포인터 또는 callback 함수와 유사하게 구성 요소에 논리를 제공하는 소비 앱을 위한 방법입니다. 예를 들어 구성 요소가 사람의 이름을 처리하고 firstname 및 lastname 인수가 있는 input 함수가 있고 문자열을 반환할 수 있습니다. 앱은 $"{firstname} {lastname}"을 반환하는 함수 식을 정의하거나 $"{lastname}, {firstname}"에 대한 식을 정의하도록 선택할 수 있습니다. 구성 요소는 앱 제작자가 제공한 함수를 호출하고 반환된 문자열을 사용할 수 있습니다.

작업 속성

작업 속성은 출력 유형의 함수 속성과 유사하지만 부작용 수식 및 식 연결을 허용합니다. 구성 요소에는 앱이 구성 요소 내부의 컬렉션에 레코드를 추가할 수 있도록 하는 AddRecord라는 작업 속성이나 구성 요소 내부의 변수 또는 컬렉션을 지우는 Reset 작업이 있을 수 있습니다.

앞서 데이터 속성에 사용된 슬라이더 예제의 예에서 ResetValue라는 작업 속성을 도입하여 슬라이더를 다시 기본값으로 설정할 수 있습니다. 이를 위해 Reset( Slider1 ) 수식을 사용할 수 있습니다. 이제 앱에 있는 구성 요소의 인스턴스는 Component1.ResetValue()를 호출하여 슬라이더를 다시 기본값으로 설정할 수 있습니다.

이벤트 속성

표준 컨트롤에는 많은 일반적인 이벤트 유형 속성이 있으며 효과적으로 입력 동작 함수 속성이 있습니다. 버튼 컨트롤의 OnSelect가 가장 확실한 예입니다. 구성 요소는 여러 이벤트 속성을 정의하고 이러한 이벤트를 함수처럼 호출할 수 있습니다. 예를 들어 버튼 컨트롤이 있는 구성 요소에는 OnButtonClicked라는 이벤트 속성이 있을 수 있습니다. 버튼 컨트롤의 OnSelect에서 구성 요소는 Component1.OnButtonClicked() 속성을 호출할 수 있습니다. 그런 다음 소비 앱은 이 속성에 대한 자체 논리를 정의하여 구성 요소 내부의 버튼을 누를 때 작동하도록 할 수 있습니다.

속성 또는 인수의 기본값

아무 것도 설정되지 않은 경우 기본값은 인수 또는 속성에 대한 기본값을 제공할 수 있습니다. 일부 유형의 속성에는 적합하지 않습니다. 그러나 경우에 따라 레코드에 대한 예상 스키마를 제공하는 데 사용할 수 있습니다. 기본 레코드를 제공하면 레코드 종류가 예상 스키마로 설정됩니다.

예를 들어 AddRecord라는 작업 속성은 로컬 컬렉션에 추가할 레코드를 허용합니다. 예상 레코드의 스키마를 제공하기 위해 제작자는 이 AddRecord 속성의 인수에 대한 기본값을 추가해야 합니다.