내용

PowerApps 앱에서 로딩 이미지를 보고 처리 중인 보기를 고급스럽게 만듭니다.

LoadingSpinner 프로퍼티는 스크린에 존재합니다만, 아직 구현되어 있지 않기 때문에(2018/9/12) 구현된 경우는 그쪽을 이용하는 편이 좋을 것입니다.

필요한 것

365 계정

로딩 gif 이미지

이 사이트에서 gif 이미지를 얻을 수 있습니다.
아 돈 g. 이오
적당한 이메일 주소로 가입하고 원하는 gif 이미지를 만들어 download를 실시해 주세요.

구현 방법

1. 이미지 등록

PowerApps 앱에 가져온 gif 이미지를 등록합니다.

보기 → 미디어 → 참조에서 이미지를 등록합시다.

2. 이미지와 라벨 배치

gif를 표시하려는 화면에 라벨과 이미지를 추가합니다.
삽입 → 미디어 → 이미지에서 추가합니다.




Label의 매개변수는 다음 설정입니다.


이름
value


Width
Parent.Width

Height
Parent.Height

텍스트

x
0

y
0


추가한 라벨과 이미지를 알기 쉬운 이름으로 변경하세요.
이번에는 'Load_Cover'와 'Load_Gif'라는 이름으로 만들었습니다.
※ 같은 이름이 이미 앱 내에 설정되어 있는 경우에는 설정할 수 없습니다.

2-1.Label의 색 변경

취향에 상관없기 때문에 라벨의 색을 변경합니다.
이번에는 Fill의 값을 RGBA(0,0,0,0.7)로 설정했습니다.

2-2. 이미지 경로 설정

2로 설정한 이미지에 대해 1로 등록한 gif 이미지를 설정합니다.

Load_Gif의 Image에 등록한 파일명을 입력합니다.
이번에 추가한 gif의 파일명은 ''Spinner-1s-200px''이므로 이것을 입력합니다.


이름
value


이미지
'Spinner-1s-200px'

2-3.Visible 전역 변수 설정

이번에는 모든 화면에서 사용할 수 있도록 전역 변수에 대해 Visible을 설정합니다.
만약, 스크린(페이지)내에서만 이용하고 싶은 경우는 문맥 변수(UpdateContext)를 이용해 주세요.

화면 (페이지)의 OnStart에서 전역 변수를 만듭니다.



이름
value


OnStart
Set(IsLoading,0)

2-4. 각 Visible 설정

여기까지 오면 조금입니다.
Load_Cover와 Load_Gif의 Visible에 대해 이전에 설정한 IsLoading을 설정합니다.



여기에서 모든 설정이 종료됩니다.

사용방법

각 프로세스의 시작과 끝에서 IsLoading 변수에 대해 0,1을 설정하기 만하면됩니다.



IsLoading이 1이면 표시되고 0이면 표시되지 않습니다.

요약

이상으로 로딩의 구현은 완료입니다.
쉽게 구현할 수 있고 앱이 고급스러워지므로 구현하는 것이 좋습니다.
다만, 이 방법은 어디까지나 LoadingSpinner가 구현되어 있지 않기 위한 대안입니다. 또한, 독자적인 로딩 이미지를 사용하고 싶은 경우 등은 이 방법을 이용해도 좋다.

최종 설정값은 다음과 같습니다.

Load_Cover

이름
value


Width
Parent.Width

Height
Parent.Height

텍스트

x
0

y
0

Visible
IsLoading

Load_Gif

이름
value


이미지
'Spinner-1s-200px'

Visible
IsLoading

스크린

이름
value


OnStart
Set(IsLoading,0)