캔버스 앱용 일정 화면 템플릿

아티클
03/16/2023

캔버스 앱에서 사용자에게 Office 365 Outlook 계정의 예정된 일정을 보여주는 일정 화면을 추가합니다. 사용자는 일정에서 날짜를 선택하고 해당 날짜의 이벤트 목록을 스크롤할 수 있습니다. 목록에 표시되는 세부 사항을 변경하고 각 이벤트에 대한 세부 사항을 표시하는 두 번째 화면을 추가하고 각 이벤트의 참석자 목록을 표시하고 기타 사용자 지정을 만들 수 있습니다.

Office 365의 여러 데이터를 보여주는 다른 템플릿 기반 화면을 추가할 수도 있습니다(예: 이메일, 조직 내 연락처, 회의에 초대하고 싶은 사람들의 참석 여부).

이 개요는 다음을 설명합니다.

기본 일정 화면을 사용하는 방법.
수정 방법.
앱에 통합하는 방법.

이 화면의 기본 기능에 대해 자세히 알아 보려면 일정 화면 참조를 참조하십시오.

필수 구성 요소

Power Apps에서 앱을 만들려면 화면 및 기타 컨트롤을 추가하고 구성하는 방법을 알아야 합니다.

기본 기능

템플릿에서 일정 화면을 추가하는 방법:

Power Apps에 로그인하고 Power Apps Studio에서 앱을 생성하거나 기존 앱을 엽니다.

이 토픽은 전화 앱을 보여주지만 동일한 개념이 태블릿 앱에도 적용됩니다.
리본 탭의 홈 탭에서 새 화면 > 일정을 선택합니다.

기본적으로 화면은 다음과 유사합니다.
데이터를 표시하려면 화면 상단 근처의 드롭다운 목록에서 옵션을 선택합니다.

유용한 참고 사항:

오늘 날짜는 기본적으로 선택되며 오른쪽 상단 모서리에 있는 일정 아이콘을 선택하여 쉽게 돌아올 수 있습니다.
다른 날짜를 선택하면 원이 그 주위를 둘러싸고 밝은 색의 사각형(기본 테마가 적용된 경우 파란색)이 오늘의 날짜를 둘러 쌉니다.
특정 날짜에 하나 이상의 이벤트가 예약된 경우 일정에서 해당 날짜 아래에 색을 가진 작은 원이 나타납니다.
하나 이상의 일정이 예약된 날짜를 선택하면 일정 아래의 목록에 일정이 나타납니다.

화면 수정

몇 가지 일반적인 방법으로 이 화면의 기본 기능을 수정할 수 있습니다.

화면을 더 수정하려면 가이드로 일정 화면 참조를 참조하십시오.

일정 지정하기

사용자가 볼 일정를 이미 알고 있다면 앱을 게시하기 전에 해당 일정을 지정하여 화면을 단순화할 수 있습니다. 이렇게 변경하면 일정 드롭다운 목록이 필요하지 않으므로 제거할 수 있습니다.

앱의 OnStart 속성을 다음 수식으로 설정합니다.

Set( _userDomain, Right( User().Email, Len( User().Email ) - Find( "@", User().Email ) ) );
Set( _dateSelected, Today() );
Set( _firstDayOfMonth, DateAdd( Today(), 1 - Day( Today() ), Days ) );
Set( _firstDayInView, 
    DateAdd( _firstDayOfMonth, -( Weekday( _firstDayOfMonth) - 2 + 1 ), Days )
);
Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) );
Set( _calendarVisible, false );
Set( _myCalendar, 
    LookUp(Office365Outlook.CalendarGetTablesV2().value, DisplayName = "{YourCalendarNameHere}" )
);
Set( _minDate, 
    DateAdd( _firstDayOfMonth, -( Weekday(_firstDayOfMonth) - 2 + 1 ), Days )
);
Set( _maxDate, 
    DateAdd(
        DateAdd( _firstDayOfMonth, -( Weekday(_firstDayOfMonth) - 2 + 1 ), Days ),
        40, 
        Days 
    )
);
ClearCollect( MyCalendarEvents, 
Office365Outlook.GetEventsCalendarViewV3(_myCalendar.name, 
    Text( _minDate, UTC),
    Text( _maxDate, UTC)
).value
);
Set( _calendarVisible, true )

참고

이 수식은 일정 선택에 대한 드롭다운 목록의 OnSelect 속성의 기본 값에서 약간 수정되었습니다. 해당 컨트롤에 대한 자세한 내용은 일정 화면 참조에서 해당 컨트롤 섹션을 참조하십시오.

표시하려는 일정 이름과 함께 중괄호를 포함하여 {YourCalendarNameHere} 일정 이름을 바꿉니다(예: 일정).

중요

다음 단계에서는 앱에 일정 화면을 하나만 추가했다고 가정합니다. 둘 이상을 추가한 경우 컨트롤 이름(예: iconCalendar1)은 다른 숫자로 끝나므로 수식을 알맞게 조정해야 합니다.
iconCalendar1 컨트롤의 Y 속성을 다음 식으로 설정합니다.

RectQuickActionBar1.Height + 20
LblMonthSelected1 컨트롤의 Y 속성을 다음 식으로 설정합니다.

iconCalendar1.Y + iconCalendar1.Height + 20
LblNoEvents1 컨트롤의 텍스트 속성을 다음 식으로 설정합니다.

"No events scheduled"
LblNoEvents1의 Visible 속성을 다음 수식으로 설정합니다.

CountRows(CalendarEventsGallery1.AllItems) = 0 && _calendarVisible
다음 컨트롤을 삭제합니다.
- dropdownCalendarSelection1
- LblEmptyState1
- iconEmptyState1
일정 화면이 기본 화면이 아닌 경우 기본 화면에서 일정 화면으로 이동하는 버튼을 추가하여 앱을 테스트할 수 있습니다.

예를 들어, 빈 앱에서 만든 앱에 화면을 추가한 경우 Screen1에서 Screen2로 이동하는 단추를 추가합니다.
앱을 저장한 다음 브라우저나 모바일 디바이스에서 테스트합니다.

이벤트에 대한 여러 세부 사항 표시

기본적으로 일정 아래의 갤러리는 CalendarEventsGallery라는 이름을 가지고 시작 시간, 기간, 주제 및 각 이벤트의 위치를 보여줍니다. 갤러리는 Office 365 커넥터가 지원하는 주최자와 같은 모든 필드를 표시하도록 구성할 수 있습니다.

CalendarEventsGallery에서 새로운 또는 기존 레이블의 Text 속성을 ThisItem(마침표 있음)으로 설정합니다.

IntelliSense는 선택할 수 있는 필드가 나열됩니다.
원하는 필드를 선택합니다.

레이블에는 지정한 정보 유형이 표시됩니다.

비 차단 이벤트 숨기기

많은 사무실에서 팀 구성원은 사무실을 떠나있을 때 서로에게 알리기 위해 모임 요청을 보냅니다. 모든 사람의 일정을 차단하지 않기 위해 요청을 보내는 사람이 참석 여부를 가능으로 설정합니다. 몇 가지 속성을 업데이트하여 일정과 갤러리에서 이러한 이벤트를 숨길 수 있습니다.

2CalendarEventsGallery의 항목속성을 이 수식으로 설정합니다.
```
SortByColumns(
    Filter(
        MyCalendarEvents,
        Text( Start, DateTimeFormat.ShortDate ) = 
            Text( _dateSelected, DateTimeFormat.ShortDate ),
        ShowAs <> "Free"
    ),
    "Start"
)
```
이 수식에서 필터 기능은 선택한 날짜 이외의 날짜로 예약된 이벤트뿐만 아니라 참석 여부가 가능으로 설정된 이벤트도 숨깁니다.
일정에서 Circle 컨트롤의 Visible 속성을 다음 수식으로 설정합니다.
```
CountRows(
    Filter(
        MyCalendarEvents,
        DateValue( Text(Start) ) = DateAdd( _firstDayInView, ThisItem.Value, TimeUnit.Days ),
        ShowAs <> "Free"
    )
) > 0 && !Subcircle1.Visible && Title2.Visible
```
이 수식에는 이전 수식과 동일한 필터가 포함되어 있습니다. 따라서 이벤트 표시 원은 선택된 날짜에 있고 참석 여부가 가능으로 설정되지 않은 하나 이상의 이벤트가 있는 경우에만 날짜 아래에 나타납니다.

화면을 앱에 통합

일정 화면은 자체적으로 강력한 컨트롤 번들이지만 일반적으로 더 크고 다양한 앱의 일부로 가장 잘 작동합니다. 다음 옵션 추가를 포함하여 여러 가지 방법으로 이 화면을 더 큰 앱에 통합할 수 있습니다.

이벤트 세부 정보 보기

사용자가 CalendarEventsGallery에서 이벤트를 선택하면 해당 이벤트에 대한 자세한 정보를 표시하는 다른 화면을 열 수 있습니다.

참고

이 절차는 동적 콘텐츠가 있는 갤러리의 이벤트 세부 사항을 표시하지만 다른 방법을 사용하여 유사한 결과를 얻을 수 있습니다. 예를 들어, 일련의 레이블을 대신 사용하여 더 많은 디자인 컨트롤을 얻을 수 있습니다.

비어있는 유연한 높이의 갤러리와 일정 화면으로 다시 이동하는 단추가 포함된 EventDetailsScreen라는 이름으로 빈 화면을 추가합니다.
연한 높이의 갤러리에서 레이블 컨트롤과 HTML 텍스트 컨트롤을 추가하고 두 자동 높이 속성을 true로 설정합니다.

참고

Power Apps는 각 이벤트의 메시지 본문을 HTML 텍스트로 검색하므로 해당 콘텐츠를 HTML 텍스트 컨트롤에서 표시해야 합니다.
HTML 텍스트 컨트롤의 Y 속성을 다음 식으로 설정합니다.

Label1.Y + Label1.Height + 20
스타일 요구에 맞게 추가 속성을 조정합니다.

예를 들어, HTML 텍스트 컨트롤 아래에 구분선을 추가할 수 있습니다.
유연한 높이의 갤러리 컨트롤의 항목 속성을 이 수식으로 설정합니다.
```
Table(
    { Title: "Subject", Value: _selectedCalendarEvent.Subject },
    { 
        Title: "Time", 
        Value: _selectedCalendarEvent.Start & " - " & _selectedCalendarEvent.End 
    },
    { Title: "Body", Value: _selectedCalendarEvent.Body }
)
```
이 수식은 사용자가 CalendarEventsGallery 컨트롤에서 이벤트를 선택할 때마다 설정되는 필드 값 _selectedCalendarEvent으로 설정된 동적 데이터 갤러리를 만듭니다. 레이블을 추가하여 더 많은 필드를 포함하도록 갤러리를 확장할 수 있지만 이 세트는 좋은 시작점을 제공합니다.
갤러리 항목을 제자리에 놓고 레이블 컨트롤의 Text 속성을 ThisItem.Title로 설정하고 HTML 텍스트 컨트롤의 HtmlText 속성을 ThisItem.Value로 설정합니다.
CalendarEventsGallery에서 Title 컨트롤의 OnSelect 속성을 다음 수식으로 설정합니다.
```
Set( _selectedCalendarEvent, ThisItem );
Navigate( EventDetailsScreen, None )
```
참고

_selectedCalendarEvent 변수 대신 선택된 CalendarEventsGallery를 사용할 수 있습니다.

이벤트 참석자 표시

Office365.GetEventsCalendarViewV2 작업은 세미콜론으로 구분된 필수 및 선택적 참석자 세트를 포함하여 각 이벤트에 대한 다양한 필드를 검색합니다. 이 절차에서는 각 참석자 집합을 구문 분석하고 조직에 있는 참석자를 결정하고 Office 365 프로필을 검색합니다.

앱에 Office 365 사용자 커넥터가 없다면 추가합니다.

회의 참석자의 Office 365 프로필을 검색하려면 CalendarEventsGallery에서 Title 컨트롤의 OnSelect 속성을 이 수식으로 설정합니다.

Set( _selectedCalendarEvent, ThisItem );
ClearCollect( AttendeeEmailsTemp,
    Filter(
        Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ),
        !IsBlank( Result )
    )
);
ClearCollect( AttendeeEmails,
    AddColumns( AttendeeEmailsTemp, 
        "InOrg",
        Upper( _userDomain ) = Upper( Right( Result, Len( Result ) - Find( "@", Result ) ) )
    )
);
ClearCollect( MyPeople,
    ForAll( AttendeeEmails, If( InOrg, Office365Users.UserProfile( Result ) ) ) 
);
Collect( MyPeople,
    ForAll( AttendeeEmails,
        If( !InOrg, 
            { DisplayName: Result, Id: "", JobTitle: "", UserPrincipalName: Result }
        )
    )
)

이 목록은 각 ClearCollect 작업의 역할을 설명합니다.

ClearCollect(AttendeeEmailsTemp)
```
ClearCollect( AttendeeEmailsTemp,
    Filter(
        Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ), 
        !IsBlank( Result)
    )
);
```
이 수식은 필수 및 선택 참석자를 단일 문자열로 연결한 다음 해당 문자열을 각 세미콜론의 개별 주소로 분할합니다. 그런 다음 이 수식은 해당 집합에서 빈 값을 필터링하고 다른 값을 AttendeeEmailsTemp라는 이름을 가진 컬렉션에 추가합니다.
ClearCollect(AttendeeEmails)
```
ClearCollect( AttendeeEmails,
    AddColumns( AttendeeEmailsTemp, 
        "InOrg",
        Upper( _userDomain ) = Upper( Right( Result, Len(Result) - Find("@", Result) ) )
    )
);
```
이 수식은 대략적으로 참석자가 조직에 있는지 여부를 결정합니다. _userDomain의 정의는 단순히 앱을 실행하는 사람의 이메일 주소에 있는 도메인 URL입니다. 이 줄은 AttendeeEmailsTemp 컬렉션에서 InOrg라는 이름을 가진. 추가적인 true/false 열을 만듭니다. 만약 userDomain이 AttendeeEmailsTemp의 특정 행에 있는 이메일 주소 도메인 URL과 같으면 이 열은 true를 가집니다.

이 방법은 항상 정확하지는 않지만 꽤 정확합니다. 예를 들어 조직의 특정 참석자는 Jane@OnContoso.com와 같은 이메일 주소를 가질 수 있지만 _userDomain은 Contoso.com입니다. 앱 사용자와 Jane은 같은 회사에서 근무하지만 이메일 주소에 약간의 차이가 있을 수 있습니다. 이러한 경우 다음 수식을 사용할 수 있습니다.

Upper(_userDomain) in Upper(Right(Result, Len(Result) - Find("@", Result)))

그러나 이 수식은 Jane@NotTheContosoCompany.com와 같은 이메일 주소를 Contoso.com과 같은 _userDomain과 일치시키고 이러한 사람들은 같은 회사에서 일하지 않습니다.

ClearCollect(MyPeople)

ClearCollect( MyPeople,
    ForAll( AttendeeEmails, 
        If( InOrg, 
            Office365Users.UserProfile( Result )
        )
    )
);
Collect( MyPeople,
    ForAll( AttendeeEmails,
        If( !InOrg, 
            { 
                DisplayName: Result, 
                Id: "", 
                JobTitle: "", 
                UserPrincipalName: Result
            }
        )
    )
);

Office 365 프로필을 검색하려면 Office365Users.UserProfile 또는 Office365Users.UserProfileV2 작업을 사용해야 합니다. 이러한 작업은 먼저 사용자 조직에 있는 참석자의 모든 Office 365 프로필을 수집합니다. 그런 다음 조직 외부의 참석자에게 대한 몇 가지 필드를 추가합니다. ForAll 반복이 순서를 보장하지 않기 때문에 이 두 항목을 별도의 작업으로 분리했습니다. 따라서, ForAll은 먼저 조직 외부의 참석자를 수집할 수 있습니다. 이 경우, MyPeople에 대한 스키마는 DisplayName, Id, JobTitle, UserPrincipalName만을 포함합니다. 그러나 UserProfile 작업은 그보다 훨씬 풍부한 데이터를 검색합니다. 그래서 MyPeople 컬렉션이 다른 프로필 이전에 Office 365 프로필을 추가하도록 강제합니다.

참고

ClearCollect 함수만으로 동일한 결과를 얻을 수 있습니다.

ClearCollect( MyPeople, 
    ForAll(
        AddColumns(
            Filter(
                Split(
                    ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, 
                    ";"
                ), 
                !IsBlank( Result )
            ), 
            "InOrg", _userDomain = Right( Result, Len( Result ) - Find( "@", Result ) )
        ), 
        If( InOrg, 
            Office365Users.UserProfile( Result ), 
            { 
                DisplayName: Result, 
                Id: "", 
                JobTitle: "", 
                UserPrincipalName: Result, 
                Department: "", 
                OfficeLocation: "", 
                TelephoneNumber: ""
            }
        )
    )
)

이 연습을 마치려면:

Items 속성이 MyPeople로 설정된 갤러리가 포함된 화면을 추가합니다.
CalendarEventsGallery 안에 Title 컨트롤의 OnSelect 속성에서 전 단계에서 만든 화면에 탐색 함수를 추가합니다.

다음 단계

참고

귀사의 설명서 언어 기본 설정에 대해 말씀해 주시겠습니까? 간단한 설문 조사에 응해주세요. (이 설문 조사는 영어로 되어 있습니다.)

이 설문 조사는 약 7분 정도 걸립니다. 개인 데이터는 수집되지 않습니다(개인정보처리방침).

다음을 통해 공유