Power Apps을 만들다 보면 매번 화면 디자인에 대한 고민을 하게 됩니다.
여기서는 제가 구성한 화면에 대한 설명을 정리해 놓았으니 참고하시기 바랍니다.
여기서는 Title 화면을 예시로 Header Component를 추가하는 소스를 공개하였으니 복사하여 사용하는 방법을 안내하고 있습니다.
전체 화면
아래는 화면 샘플 예시이다.
컨테이너 이름 구성
하나의 화면은 3개의 컨테이너로 구성되어 있다.
이름 규칙은 아래와 같이 구성했다.
컨테이너의 약자 3자 con
HomeScreen 약자인 HS
각 영역의 의미 부여 본문 Content, 머리글 Header, 왼쪽 메뉴 LeftMenu
이걸 조합하여 화면에 3개의 컨테이너가 동일 이름이 생성되지 않게 구성하였다.
구성 요소
Header 와 LeftMenu의 내용은 구성요소로 추가하여 값이 수정하였을 때 전체 화면에 동시에 적용할 수 있게 구성
1. 구성 요소 이름은 구성요소 (Component)의 약자 3자와 이름으로 구성
2. 구성 요소의 내용 표시
3. 사용자 지정 속성으로 각 화면에 변경될 값을 변수로 설정하여 각 화면에서 값만 넣어 적용 할 수 있게 구성
Header Component 설정 방법
아래 소스를 메모장에 복사하면 제일 마지막 줄에 출처가 붙어 있으니 마지막 줄을 삭제 후 다시 복사하시어 사용하시기 바랍니다.
내용을 드래그하여 복사, 메모장에 붙여 넣은 후 마지막 줄의 출처를 지운 후 사용하세요.
ComponentDefinitions:
com_Header:
DefinitionType: CanvasComponent
CustomProperties:
Desc:
PropertyKind: Input
DisplayName: Desc
Description: 사용자 지정 속성
DataType: Text
Default: ="홈 화면 입니다."
Description:
PropertyKind: Input
DisplayName: Description
Description: 사용자 지정 속성
DataType: Text
Default: ="홈 화면 입니다."
ScreenSize:
PropertyKind: Input
DisplayName: ScreenSize
Description: 사용자 지정 속성
DataType: Number
Default: =700
Title:
PropertyKind: Input
DisplayName: Title
Description: 사용자 지정 속성
DataType: Text
Default: ="홈"
bgColor:
PropertyKind: Input
DisplayName: bgColor
Description: 사용자 지정 속성
DataType: Color
Default: |
=RGBA(39, 113, 194, 1)
//RGBA(149, 149, 149, 1)
txtColor:
PropertyKind: Input
DisplayName: txtColor
Description: 사용자 지정 속성
DataType: Color
Default: =Color.White
Properties:
Fill: |
=com_Header.bgColor
Height: =75
Width: =com_Header.ScreenSize
Children:
- img_cH_Logo_1:
Control: Image@2.2.3
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =75
Image: =GSLogo
PaddingLeft: =20
PaddingRight: =10
Visible: =com_Header.ScreenSize >= 700
Width: =If(IsBlank(Self.Image) Or Parent.Width < 700,0, 120)
- img_cH_User_1:
Control: Image@2.2.3
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =75
Image: =User().Image
PaddingBottom: =10
PaddingLeft: =10
PaddingRight: =10
PaddingTop: =10
Width: =75
X: =Parent.Width - Self.Width
- con_cH_User_1:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Height: =75
LayoutDirection: =LayoutDirection.Vertical
LayoutJustifyContent: =LayoutJustifyContent.End
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Width: =If(Parent.Width < 700,0,190)
X: =img_cH_User_1.X - Self.Width
Children:
- lbl_cH_U_Name_1:
Control: Label@2.5.1
Properties:
Align: =Align.Right
AlignInContainer: =AlignInContainer.Stretch
BorderColor: =RGBA(0, 18, 107, 1)
Color: =com_Header.txtColor
Font: =Font.'Open Sans'
PaddingLeft: =20
Size: =10
Text: =Office365사용자.UserProfileV2(User().Email).displayName
VerticalAlign: =VerticalAlign.Bottom
- lbl_cH_U_Mail_1:
Control: Label@2.5.1
Properties:
Align: =Align.Right
AlignInContainer: =AlignInContainer.Stretch
BorderColor: =RGBA(0, 18, 107, 1)
Color: =com_Header.txtColor
Font: =Font.'Open Sans'
Height: =35
PaddingLeft: =20
Size: =10
Text: =User().Email
VerticalAlign: =VerticalAlign.Top
- con_cH_Title_1:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Height: =75
LayoutDirection: =LayoutDirection.Vertical
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Width: =Parent.Width - img_cH_User_1.Width - If(img_cH_Logo_1.Visible,310,0)
X: |+
=img_cH_Logo_1.Width
Children:
- lbl_cH_T_Title_1:
Control: Label@2.5.1
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderColor: =RGBA(0, 18, 107, 1)
Color: =com_Header.txtColor
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
PaddingLeft: =20
Size: =12
Text: =com_Header.Title
VerticalAlign: =VerticalAlign.Bottom
- lbl_cH_Description_1:
Control: Label@2.5.1
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderColor: =RGBA(0, 18, 107, 1)
Color: =com_Header.txtColor
Font: =Font.'Open Sans'
Height: =35
PaddingLeft: =20
Size: =10
Text: =com_Header.Desc
VerticalAlign: =VerticalAlign.Top
구성 요소는 처음에는 하나도 없음으로 아래와 같이 새 구성 요소를 눌러 새로운 구성 요소를 만든 후 ... 을 눌러 붙여 넣기 하면 아래와 같이 자동으로 구성 요소가 생성 된다. com_Header가 새로 생성된 구성 요소
구성 요소가 추가되고 2개의 오류가 발생하는 것을 알 수 있다.
1. 로고 파일이 없어 발생하는 문제
2. 사용자 이름을 Office 365 사용자 정보를 검색할 수 없어서 나타나는 문제
1. 로고 파일이 없어 발생하는 문제
로고가 없으면 아래 2번 GSLogo 텍스트를 지우면 오류는 사라진다.
만약 로고를 추가 하고 싶으면 이미지를 추가하면 3번 업로드로 이미지를 추가하면 원하는 이미지를 해당 위치에 로그를 추가할 수 있다.
2. 사용자 이름을 Office 365 사용자 정보를 검색할 수 없어서 나타나는 문제
아래 Office 365 사용자를 추가하면 사용자 이름에 대한 오류가 사라지고 이름이 나타나게 된다.
구성 요소 추가된 화면
컨테이너 추가
Screen1의 이름을 HomeScreen으로 변경
HomeScreen에 컨테이너를 추가할 수 있다. 아래의 소스로 높이 75의 컨테이너를 추가 할 수 있다.
메모장으로 붙여 넣은 후 참조 제거 후 다시 복사
내용을 드래그하여 복사, 메모장에 붙여 넣은 후 마지막 줄의 출처를 지운 후 사용하세요.
- con_HS_Header:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
Height: =75
Width: =Parent.Width
아래 자동으로 컨테이너가 만들어지는 것을 확인 할 수 있다.
구성 요소를 화면에 추가하는 방법
구성 요소는 모든 화면에 원하는 위치에 추가할 수 있다.
구성 요소를 클릭하면 왼쪽 메뉴에 원하는 바탕색, 글자색, 제목, 설명을 수정 할 수 있다.
ScreenSize의 값을 700에서 Parent.Width로 변경한다.
이제 화면의 크기가 변경되면 넓이가 700px 보다 작으면 로그나 사용자 정보가 나타나지 않게 된다.
내용을 드래그하여 복사, 메모장에 붙여 넣은 후 마지막 줄의 출처를 지운 후 사용하세요.
Parent.Width
댓글