PowerApps 컨트롤 - 그룹과 컨테이너

파워앱스 컨트롤 - 그룹과 컨테이너

파워 앱스로 프로젝트를 만들시 WPF나 여러 UI 시각화 툴을 이용한 프로젝트에서 컨트롤을 시각적으로 배치하는 것은 개발자 출신이 아닌 사람들이 잘하는 경우가 많다. 그래서 컨트롤 배치를 맡기는 경우가 많은데 문제는 용도별, 위치별로 그룹화 등을 하지않아 프로그래밍이 필요한 작업시 특정 컨트롤을 찾는데만 시간을 허비하는 경우가 생긴다. 파워 앱스의 경우 컨트롤이 트리뷰에 쌓이며 보여지는데 트리뷰에서 쉽게 원하는 컨트롤을 선택할 수 있도록 해 주는것이 그룹화와 컨테이너이다. 그룹화와 컨테이너의 간단한 설명 후 그 차이점을 알아본다.

상황 예시

1. 아래이미지와 같은 캔버스앱을 만든다 가정하다. 간단하게 텍스트상자에 숫자를 입력하면 더한 결과값을 보여주는 캔버스앱이다. 이 앱에서 제작시 상단에 사각형, 레이블 8개, 입력 텍스트 4 개가 존재하고 만약 더 꾸민다면 컨트롤이 계속 늘어나게 될 것이다.
   
   
   

2. 좌측의 트리 뷰로 가보자 아래이미지와 같이 각 컨트롤들이 나오지만 트리뷰만을 봐서는 어떤 컨트롤이 화면의 어느 위치에 존재하는 컨트롤인지 감을 잡을 수가 없고 FX 등을 사용할시 이름을 바로 확인하고 싶어도 컨트롤을 화면에서 직접 선택해서 이름을 다시 확인해야만 하는 경우가 생긴다. 이런 상황을 피하기 위해서라도 각 컨트롤을 쉽게 확인 가능하도록 만들어두어야 협업이 쉬워진다.
   
   

그룹

그룹은 각 컨트롤들을 트리뷰에서 한개의 그룹으로 모아서 볼 수 있도록 하고 그룹의 속한 컨트롤들을 한꺼번에 이동할 수 있도록 한다.

1. 그룹화를 하려는 컨트롤들을 화면에서 혹은 트리 뷰에서 컨트롤 키를 누르면서 선택하자 이러면 여러개의 컨트롤이 한꺼번에 선택된다.

2. 마우스 우클릭 혹은 트리 뷰에서 컨트롤 옆의 ...을 클릭하자

3. 여러 메뉴 중 그룹을 클릭하면 그룹화가 된다.
   
   

4. 그룹화가 됬다면 트리뷰에서 그룹화 할시의 이미지 옆의 Group이라는 것이 생겼을 것이다. 이것을 눌르면 그 아래에 선택했었던 컨트롤들이 존재하는것을 확인 할 수 있다.
   
   

5. 이제 그룹을 트리뷰에서 선택해서 어떤 컨트롤들의 그룹인지 이름을 바꿔주자. 이로써 컨트롤들의 그룹을 생성하였다.

컨테이너

컨테이너는 컨테이너 안의 컨트롤들을 배치하기 위한 컨트롤이다. 컨테이너에 속한 컨트롤들은 컨테이너가 이동하면 배치 그대로 이동하고 컨테이너가 작을시 보여지지 않는 컨트롤이 있을 것이다. 이점을 이용해 특정 컨트롤을 가리거나 할 수 있다.

1. 삽입 탭 -> 입력 -> 컨테이너 를 클릭
   
   

2. 아래 이미지와 비슷하게 컨테이너가 생길 것이다. 트리뷰에서도 생긴것을 확인 가능하다.
   )
   
   

3. 기존 컨트롤들을 전부 선택해 잘라내기(컨트롤 + X) 후 컨테이너를 선택하여 붙여넣기(컨트롤 + v)를 통해 컨트롤들을 옮기자(새로 삽입시에는 컨테이너 선택 후 삽입)

4. 컨트롤들이 컨테이너 안에 적당히 들어갔을 것이다. 일단 컨테이너의 크기와 위치를 조정 후 각 컨트롤들을 선택해 위치를 옮기자

5. 그 후 컨테이너의 이름을 변경해 어떤 컨테이너인지 이름을 지정하자.

그룹,컨테이너 사용후 트리 뷰 이미지

1. 그룹화를 통해 트리 뷰에서 화면에 위치한 컨트롤들이 어느 그룹과 컨테이너에 위치할 지 유추가 가능해진다.
   
   

차이점

1. 그룹은 개념이며 컨테이너는 컨트롤이다.

   • 그룹은 캔버스앱을 제작시 사용하는 개념이라 앱은 배포, 제작시 웹 검사를 실행해보면 그룹에 대한 것을 찾을 수 없을 것이다.
   • 컨테이너는 div를 통해 하나의 컨트롤이 생기며 그 속에 속한 컨트롤들도 그 안에 속해있는 것을 확인 가능하다.

2. 그룹안에 그룹을 생성할 수 없고 컨테이너는 컨테이너 안에 컨테이너를 생성할 수 있다.

   • 말 그대로 특정 그룹에 속한 컨트롤들은 그 안에서 그룹화를 할 수가 없다.
   • 컨테이너 안에서 다른 컨테이너를 생성하여 사용 가능하다.

3. 속성 값을 상속

   • 그룹안에 속한 컨트롤들은 속성을 상속받아서 사용 가능하다. 예를 들어 그룹을 선택 후 테두리 색을 변경해 보면 그룹안에 속한 모든 컨트롤들의 색이 변할것이다.
   • 컨테이너는 속성을 상속받지 않고 전부 일일히 변경해 주어야한다.

4. 위치 지정

   • 그룹안의 컨트롤의 위치값 X,Y 값을 변경해 보자 화면 가장 좌상단 기준으로 위치가 지정된다.
   • 컨테이너 안의 컨트롤의 위치값 X,Y 값을 변경해 보자 컨테이너의 좌상단 기준으로 위치가 지정된다.