모델기반앱에 캔버스앱 삽입 3 - 사용자 지정 페이지에서 삽입

모델기반앱에 캔버스앱 삽입 2 - 사용자 지정 페이지에서 삽입

모델기반앱에서 사용자 지정 페이지를 만들어 삽입이 가능하다 하지만 페이지를 완전히 새로 만들어야하지 기존 앱을 집어넣는것은 아직 지원하지 않는다. 여기서는 새로운 페이지를 만들고 그 안에 HTML과 IFrame을 이용해 집어넣는 방법을 설명한다.

캔버스 앱 웹 링크 확인

1. Power Apps의 '앱' 메뉴에서 삽입하려는 앱을 선택. 우상단 자세히 를 클릭 혹은 ... -> 자세히 클릭
   
   
   
2. '웹 링크' 항목의 값을 복사한다.
   
   
   

iframe 입력 가능한 코드 구성요소 다운

여기서는 코드 기반 구성요소(PCF) 중 PCF갤러리의 iframe4Canas를 사용한다. 만약 다른 iframe을 가져오는 구성요소가 있다면 그것을 사용하자.

1. PCF 갤러리에서 iframe4Canvas로 이동한다. 다운로드 Git
2. 단순히 사용만 할 것이니 해당 사이트의 가장 아래의 'managed'를 클릭해 솔루션을 다운받는다.(만약 수정등이 필요하면 Fork를 따서 수정하자)
3. 솔루션을 업로드 한다. 참조

사용자 지정 페이지 추가

1. 모델 기반 앱 편집창(프리뷰)에서 + 페이지 추가 클릭
   
   
   
2. 사용자 지정 선택 후 다음 클릭
   
   
   
3. 코드 기반 구성요소 iframe4Canvas를 추가한다. 코드기반 구성요소 추가방법
   
   
   
4. iframe4canvas를 최좌상단에 위치시킨다. 'src' 속성값에는 '앱 웹 링크' 입력. 'width' 속성값에는 {스크린이름}.Width 입력. 'height' 속성값에는 Screen1.Height 입력. 만약 다른 요소를 추가하고 싶으면 위치갑과 가로세로의 값을 변경해 추가한다.
   
   
   
5. '저장(ctrl + s)' 후 만약 첫 버전이 아니라면 '게시(ctrl + shift + p)' 한다.

6. 그 후 모델 기반 앱을 저장 및 게시한다.
   
   
   
7. 게시가 완료된 후 새로고침을 하면 확인이 가능하다.

사용자 지정 페이지 주의점

1. 현재 모델 기반 앱은 사용자 지정 페이지가 게시된 후 다시 게시되어야 한다. 그렇지 않으면 모델 기반 앱은 이전에 게시된 사용자 지정 페이지를 계속 사용
2. 캔버스 디자이너에서 사용자 지정 페이지에 변경 사항을 저장한 후 먼저 캔버스 디자이너가 사용자 지정 페이지를 게시해야 한다. 그런 다음 해당 사용자 지정 페이지를 참조하는 모든 모델 기반 앱을 게시해야 한다.