갤러리로 데이터 표시하기

Power Apps 입문

Luise Freese

Azure & Power Platform Architect

SharePoint로 데이터 소스 추가하기

 

  • 데이터 패널 → + 데이터 추가 → SharePoint
  • 사이트를 선택한 다음 목록을 선택하세요
  • 목록이 데이터 소스로 표시됩니다

SharePoint를 검색한 Power Apps 데이터 패널, SharePoint 커넥터가 최상위 결과로 표시됨

Power Apps 입문

가변 높이 갤러리

$$

제목과 부제목이 있는 작업 행 3개를 보여주는 Power Apps 갤러리, 각 행이 콘텐츠에 맞게 자동 크기 조정됨

 

  • 행이 콘텐츠에 맞게 자동으로 커집니다
  • 제목이나 상태 표시가 잘리지 않습니다
  • 최신 캔버스 앱의 기본 설정입니다
Power Apps 입문

템플릿 커스터마이징

 

  • 템플릿 행(맨 위 카드)을 선택하세요
  • 템플릿의 각 컨트롤은 ThisItem.Column을 사용합니다
  • 한 번만 수정하면 모든 행이 업데이트됩니다

$$

템플릿 편집 모드의 Power Apps 갤러리에서 제목 레이블이 선택되고 수식 입력줄에 ThisItem.Title이 표시되어 각 행마다 고유한 작업 제목이 나타남

Power Apps 입문

Text()로 값 읽기

 

Text(ThisItem.DueDate, "[$-en-US]mmm d")
  • 객체 뒤에 .을 입력하면 속성과 열을 확인할 수 있습니다
  • 값에는 타입이 있습니다: Text, Number, Boolean, Date/Time, Record, Table
  • ThisItem.DueDate는 Date 타입이므로 Text()가 이를 Jun 15로 표시합니다
  • [$-en-US]는 언어를 설정하고, mmm d는 패턴을 설정합니다
Power Apps 입문

조건부 서식

 

  • 컨트롤의 색상은 행 데이터에 따라 달라질 수 있습니다
  • 레이블의 Color 속성에 If()를 사용하세요
  • 예를 들면:

If(ThisItem.Priority = "High", Color.Red, Color.Gray)

 

If(ThisItem.Priority = High, Red, Gray)로 색이 지정된 우선순위 레이블이 있는 Power Apps 갤러리, 두 행에서 High가 빨간색으로, Medium이 회색으로 표시됨

Power Apps 입문

DueDate 강조 표시

 

  • 날짜도 같은 방식으로 서식을 지정하세요:

If(ThisItem.DueDate < Today(), Color.Red, Color.Black)

  • 기한이 지난 행이 바로 눈에 띕니다

If(ThisItem.DueDate < Today(), Red, Black)로 색이 지정된 기한 레이블이 있는 Power Apps 갤러리, 지난 날짜는 빨간색으로, 미래 날짜는 검은색으로 표시됨

Power Apps 입문

빈 상태

친근한 커피잔 아이콘과 화면 중앙에 "일치하는 작업 없음" 메시지가 표시된 빈 상태 화면

 

  • 갤러리가 비어 있을 때 친근한 메시지를 표시하세요
  • 플레이스홀더 레이블에 Visible = IsEmpty(Gallery1.AllItems)를 사용하세요
  • 데이터가 없을 때와 필터 결과가 0개일 때 모두 작동합니다
Power Apps 입문

지금은 컬렉션, 실무에서는 커넥터

 

  • 이 연습 문제에서는 행이 컬렉션에 저장됩니다
  • 실무에서는 SharePoint 목록과 같은 곳을 참조하게 됩니다
  • 갤러리 개념은 모두 동일한 방식으로 작동합니다

$$

$$

다이어그램: SharePoint 목록과 앱 내 컬렉션이 모두 하나의 Power Apps 갤러리에 데이터를 공급하는 모습, 소스와 관계없이 갤러리가 동일하게 작동함을 보여줌

Power Apps 입문

연습해 봅시다!

Power Apps 입문

Preparing Video For Download...