다음을 통해 공유

캔버스 앱의 일정 화면 템플릿에 대한 참조 정보

  • 아티클

Power Apps의 캔버스 앱에 대해 일정 화면 템플릿의 각 중요한 컨트롤이 화면의 전반적인 기본 기능에 어떻게 기여하는지 이해합니다. 이 심층 분석은 동작 수식과 컨트롤이 사용자 입력에 반응하는 방법을 결정하는 다른 속성의 값을 나타냅니다. 이 화면의 기본 기능에 대한 자세한 내용은 일정 화면 개요를 참조하십시오.

이 토픽에서는 몇 가지 중요한 컨트롤을 강조하고 이러한 컨트롤에서 설정된 다양한 속성(예: Items, OnSelect)에 대한 표현식이나 수식을 설명합니다.

필수 구성 요소

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

일정 드롭다운

dropdownCalendarSelection 컨트롤.

  • 속성: Items
    값: Office365.CalendarGetTables().value

    이 값은 앱 사용자의 Outlook 일정을 검색하는 커넥터 작업입니다. 이 작업이 검색하는 값을 볼 수 있습니다.

  • 속성: OnChange
    값: Select(dropdownCalendarSelection)

    사용자가 목록에서 옵션을 선택하면 컨트롤의 OnSelect 속성 함수가 실행됩니다.

  • 속성: OnSelect
    값: 다음 코드 블록과 코드 블록 이후 여러 추가적인 함수에서 나타나는 If 함수입니다.

    수식의 이 부분은 사용자가 앱을 연 후 드롭다운 목록에서 옵션을 처음 선택할 때만 실행됩니다.

    If( IsBlank( _userDomain ),
    UpdateContext( {_showLoading: true} );
    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) - 1), Days ) );
    Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) )  
);

    앞의 코드는 다음 변수를 정의합니다.

    • _userDomain: 사용자의 이메일 주소에 반영된 앱 사용자의 회사 도메인입니다.
    • _dateSelected: 오늘 날짜(기본). 일정 갤러리가 이 날짜를 강조 표시하고 이벤트 갤러리는 해당 날짜에 예약된 이벤트를 보여줍니다.
    • _firstDayOfMonth: 이번 달의 첫날. (Today + (1 - Today)) = Today - Today + 1 = 1 때문에 이 DateAdd 함수는 항상 매월 1일을 반환합니다.
    • _firstDayInView: 일정 갤러리가 표시 할 수 있는 첫 날입니다. 이 값은 해당 월이 일요일에 시작되지 않는 한 해당 월의 첫 날과 다릅니다. 전월의 전체 주를 표시하지 않으려면 _firstDayInView의 값은 _firstDayOfMonth - Weekday(_firstDayOfMonth) + 1 입니다.
    • _lastDayOfMonth: 현재 달의 마지막 날로, 다음 달의 첫 날과 동일하며 하루를 뺀 것입니다.

    If 함수 이후 함수는 사용자가 일정 드롭다운 목록에서 앱을 처음 열 때뿐만 아니라 옵션을 선택할 때마다 실행됩니다.

    Set( _calendarVisible, false );
UpdateContext( {_showLoading: true} );
Set( _myCalendar, dropdownCalendarSelection2.Selected );
Set( _minDate, 
    DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days )
);
Set(_maxDate, 
    DateAdd(
        DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days ), 
        40, 
        Days
    )
);
ClearCollect( MyCalendarEvents, 
    Office365Outlook.GetEventsCalendarViewV2( _myCalendar.Name, 
        Text( _minDate, UTC ), 
        Text( _maxDate, UTC )
    ).value
);
UpdateContext( {_showLoading: false} );
Set( _calendarVisible, true )

    앞의 코드는 이러한 변수와 하나의 컬렉션을 정의합니다.

    • _calendarVisible: false로 설정하여 새 선택이 로드되는 동안 일정이 나타나지 않도록합니다.
    • _showLoading: true로 설정하여 새로운 선택이 로드되는 동안 로드 표시기가 나타납니다.
    • _myCalendar: calendar drop-down 컨트롤의 현재 값을 설정하여 올바른 일정의 이벤트가 검색되도록 합니다.
    • _minDate: _firstDayInView와 동일한 값으로 설정합니다. 이 변수는 Outlook에서 이미 검색되어 앱에 캐시된 이벤트를 결정합니다.
    • _maxDate: 일정에서 마지막으로 볼 수있는 요일로 설정합니다. 수식은 _firstDayInView + 40 입니다. 일정에는 최대 41일이 표시되므로 _maxDate 변수는 항상 마지막으로 볼 수 있는 날을 반영하고 Outlook에서 이미 검색되어 앱에 캐시된 이벤트를 결정합니다.
    • MyCalendarEvents: 선택한 일정에서 _minDate에서 _maxDate 사이의 사용자의 이벤트 컬렉션으로 설정합니다.
    • _showLoading: false로 설정하고 다른 모든 것이 로딩된 후 _calendarVisible을 true로 설정합니다.

색상 속성

일반적인 색상 속성에 대해서는 Power Apps의 색 및 테두리 속성을 참조하십시오.

일정 드롭다운 컨트롤을 위한 고유한 색상 속성:

  • ChevronBackground - 일정 드롭다운의 배경색입니다.
  • ChevronDisabledBackground - 비활성화된 일정 드롭다운의 배경색입니다.
  • ChevronFill - 일정드롭 다운의 채우기 색상입니다.
  • ChevronDisabledFill - 비활성화된 일정 드롭다운의 채우기 색상입니다.
  • ChevronHoverBackground - 사용자가 마우스 포인터를 올려 놓을 때의 일정 드롭다운의 배경색입니다.
  • ChevronHoverFill - 사용자가 마우스 포인터를 올려 놓을 때의 일정 드롭다운의 채우기 색입니다.

일정 아이콘

iconCalendar 컨트롤.

  • 속성: OnSelect
    값: 일정 갤러리를 오늘 날짜로 재설정하는 네 개의 Set 함수:

    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 ) )

    위의 코드는 올바른 일정 보기를 표시하는 데 필요한 모든 날짜 변수를 재설정합니다.

    • _dateSelected는 오늘로 재설정합니다.
    • _firstDayOfMonth는 현 달의 첫 날로 재설정합니다.
    • _firstDayInView는 현 달을 선택하면 볼 수 있는 첫날로 재설정됩니다.
    • _lastDayOfMonth는 현 달의 마지막 날로 재설정합니다.

    이 토픽의 일정 드롭다운 섹션에서 이러한 변수에 대해 자세히 설명합니다.

이전 달 chevron으로 이동합니다.

iconPrevMonth 컨트롤.

  • 속성: OnSelect
    값: 일정 갤러리에서 이전 달을 보여주는 네 개의 Set 함수와 If 함수:

    Set( _firstDayOfMonth, DateAdd( _firstDayOfMonth, -1, Months ) );
Set( _firstDayInView, 
    DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days )
);
Set( _lastDayOfMonth, DateAdd(DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) );
If( _minDate > _firstDayOfMonth,
    Collect( MyCalendarEvents,
        Office365Outlook.GetEventsCalendarViewV2( _myCalendar.Name,
            Text( _firstDayInView, UTC ), 
            Text( DateAdd( _minDate, -1, Days ), UTC )
        ).value
    );
    Set( _minDate, _firstDayInView )
)

    참고

    _firstDayOfMonth, _firstDayInView, _lastDayOfMonth의 정의는 이 토픽의 일정 드롭다운 섹션과 거의 동일합니다.

    이전 코드의 처음 세 줄은 사용자가 이전 달 셰브론을 선택할 때마다 실행됩니다. 이 코드는 적절한 일정 보기를 표시하는 데 필요한 변수를 설정합니다. 나머지 코드는 사용자가 이전에 선택한 일정에 대해 이번 달을 선택하지 않은 경우에만 실행됩니다.

    만일 이 경우라면, _minDate는 이전 달이 표시될 때 나타나는 첫 번째 날입니다. 사용자가 아이콘을 선택하기 전에 _minDate는 최소값 현재 달의 23일을 가집니다. (3월 1일이 토요일이면 3월의 _firstDayInView은 2월 23일입니다.) 사용자가 이번 달을 아직 선택하지 않은 경우, _minDate는 새로운 _firstDayOfMonth 보다 크며 If 함수는 true를 반환합니다. 코드가 실행되고 컬렉션과 변수가 업데이트됩니다.

    • MyCalendarEvents는 Office365Outlook.GetEventsCalendarViewV2 작업으로 선택한 일정에서 이벤트르 검색합니다. 기간은 _firstDayInView 날짜와 _minDate - 1 사이입니다. MyCalendarEvents에 이미 이벤트가 포함되어 있기 때문에 _minDate 날짜 1은 새 날짜 범위의 최대 값에 대해 해당 날짜에서 1을 뺍니다.

    • _minDate는 현재의 _firstDayInView로 설정되는데 이는 이벤트가 검색된 첫 날짜이기 때문입니다. 이전 달 셰브론을 선택하여 사용자가 이 날짜로 돌아오면 If 함수는 false를 반환하는데 이 보기의 이벤트가 이미 MyCalendarEvents에 캐시되어 있기 때문에 코드가 실행되지 않습니다.

다음 달 셰브론

iconNextMonth 컨트롤.

  • 속성: OnSelect
    값: 일정 갤러리에서 다음 달을 보여주는 네 개의 Set 함수와 If 함수:

    Set( _firstDayOfMonth, DateAdd( _firstDayOfMonth, 1, Months ) );
Set( _firstDayInView, 
    DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days ) );
Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) );
If(_maxDate < _lastDayOfMonth, 
Collect(MyCalendarEvents,
        Office365Outlook.GetEventsCalendarViewV2(_myCalendar.Name,
            Text(DateAdd(_maxDate, 1, Days), UTC),
            Text(DateAdd(_firstDayInView, 40, Days))
        ).value
);
Set(_maxDate, DateAdd(_firstDayInView, 40, Days))
)

    참고

    _firstDayOfMonth, _firstDayInView, _lastDayOfMonth의 정의는 이 토픽의 일정 드롭다운 섹션과 거의 동일합니다.

    사용자가 다음 달 셰브론을 선택할 때 실행되는 앞의 코드의 처음 세 줄은 적절한 일정 보기를 표시하는 데 필요한 변수를 설정합니다. 나머지 코드는 사용자가 이전에 선택한 일정에 대해 이번 달을 선택하지 않은 경우에만 실행됩니다.

    만일 이 경우라면, _maxDate는 이전 달이 표시될 때 나타나는 마지막 날입니다. 사용자가 다음 달 셰브론을 선택하기 전에 _maxDate는 다음 달 13일의 최대 값을 갖습니다. (2월 1일이 윤년이 아닌 일요일이면 _maxDate는 3월 13일이며 _firstDayInView + 40일 입니다.) 사용자가 이번 달을 아직 선택하지 않은 경우, _maxDate는 새로운 _lastDayOfMonth 보다 크며 If 함수는 true를 반환합니다. 코드가 실행되고 컬렉션과 변수가 업데이트됩니다.

    • MyCalendarEvents는 Office365Outlook.GetEventsCalendarViewV2 작업으로 선택한 일정에서 이벤트르 검색합니다. 기간은 _maxDate + 1일과 _firstDayInView + 40일 사이입니다. MyCalendarEvents에 이미 이벤트가 포함되어 있기 때문에 _minDate 날짜 1은 새 날짜 범위의 최소 값에 대해 해당 날짜에서 1을 더합니다. _firstDayInView + 40은 _maxDate에 대한 수식이며 범위 내의 두 번째 날짜는 새로운 _maxDate입니다.

    • _maxDate는 현재의 _firstDayInView+ 40일로 설정되는데 이는 이벤트가 검색된 마지막 날짜이기 때문입니다. 다음 달 셰브론을 선택하여 사용자가 이 날짜로 돌아오면 If 함수는 false를 반환하는데 이 보기의 이벤트가 이미 MyCalendarEvents에 캐시되어 있기 때문에 코드가 실행되지 않습니다.

MonthDayGallery 컨트롤.

  • 속성: Items
    값: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19, 20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41]

    최악의 시나리오에서는 일정 보기가 최대 42일을 표시해야 하기 때문에 일정 갤러리의 항목에는 0에서 41까지의 집합이 사용됩니다. 이것은 달의 첫 번째가 토요일이고 마지막 달이 일요일인 경우 발생합니다. 이 경우 일정은 해당 월의 첫 번째가 포함된 행에 전월의 6일을 표시하고 마지막 달이 포함된 행에 다음 달의 6일을 표시합니다. 이 값은 42 개의 고유한 값이며 그 중 30은 선택한 달에 해당됩니다.

  • 속성: WrapCount
    값: 7

    이 값은 일주일 내내 반영됩니다.

MonthDayGallery Title 컨트롤.

  • 속성: Text
    값: Day( DateAdd( _firstDayInView, ThisItem.Value, Days ) )

    _firstDayInView은 (_firstDayOfMonth - 평일 값) + 1로 정의됩니다. 이것은 _firstDayInView는 항상 일요일이고 _firstDayOfMonth는 항상 MonthDayGallery의 첫 번째 행에 있음을 의미합니다. 이 두 가지 사실 때문에 _firstDayInView는 항상 MonthDayGallery의 첫 번째 셀에 있습니다. ThisItem.Value은 MonthDayGallery 항목 속성에서 해당 셀에 대한 숫자입니다. 그래서, _firstDayInView를 시작점으로, 각 셀은 _firstDayInView + 해당 셀 값을 표시합니다.

  • 속성: Fill
    값: 하나의 If 함수:

    If( DateAdd( _firstDayInView, ThisItem.Value ) = Today() && 
            DateAdd( _firstDayInView, ThisItem.Value ) = _dateSelected, 
        RGBA( 0, 0, 0, 0 ),
    DateAdd( _firstDayInView, ThisItem.Value) = Today(), 
        ColorFade( Subcircle.Fill, 0.67 ),
    Abs( Title.Text - ThisItem.Value) > 10,
        RGBA( 200, 200, 200, 0.3 ),
    RGBA( 0, 0, 0, 0 )
)

    Text 속성의 설명에서 논의된 바와 같이, DateAdd(_firstDayInView, ThisItem.Value)는 보이는 셀의 요일을 나타냅니다. 이를 고려하여 앞의 코드는 다음 비교를 수행합니다.

    1. 셀 값이 오늘 날짜이고 이 셀이 _dateSelected와 동일하다면 채우기 값은 필요 없습니다.

    2. 셀 값이 오늘 날짜이고 이 셀이 _dateSelected와 동일하지 않다면 ColorFade 채우기가 필요합니다.

    3. 마지막 비교는 명확하지 않습니다. 셀의 실제 텍스트 값과 셀 항목의 값(표시된 숫자 및 항목 번호)을 비교한 것입니다.

      이를 더 잘 이해하려면 토요일에 시작하여 일요일에 끝나는 2018년 9월을 참고 하십시오. 이 경우 일정은 8월 26일부터 31일까지, 9월 1일은 첫 번째 행에 표시되며 9월 1일까지 Abs(Title.Text - ThisItem.Value) = 26 입니다. 그 다음 Abs(Title.Text - ThisItem.Value) = 5. 9월 30일과 10월 1일부터 6일까지 표시되는 일정의 마지막 행까지 5에 유지됩니다. Abs(Title.Text - ThisItem.Value)는 9월 30일에는 여전히 5가 되지만 10월에는 35가됩니다.

      이 패턴입니다. 전월에 표시되는 요일의 경우 Abs(Title.Text - ThisItem.Value)는 항상 표시되는 첫날의 Title.Text 값과 같습니다. 다음 달에 날짜가 표시되면 Abs(Title.Text - ThisItem.Value)는 항상 그 달 첫번째 셀의 MonthDayGallery 항목 값 - 1입니다. 그리고 가장 중요한 것은 현재 선택한 달에 표시된 요일에 대해 Abs(Title.Text - ThisItem.Value)는 이전 예에서 볼 수 있듯이 해당 월의 첫 번째 항목에서 1을 뺀 값과 항상 같으며 절대 5를 초과하지 않습니다. 따라서 수식을 Abs(Title.Text - ThisItem.Value) > 5로 쓰는 것이 유효합니다.

      이 문은 날짜 값이 현재 선택한 월을 벗어났는지 확인합니다. 그렇다면 Fill은 부분적으로 불투명한 회색입니다.

    참고

    이 마지막 비교의 유효성을 직접 확인하기 위해 레이블 컨트롤을 갤러리에 삽입하고 Text 속성을 다음 값으로 설정합니다.
    Abs(Title.Text - ThisItem.Value).

  • 속성: Visible
    값:

    !(
    DateAdd( _firstDayInView, ThisItem.Value, Days ) - 
        Weekday( DateAdd( _firstDayInView, ThisItem.Value,Days ) ) + 1 
    > _lastDayOfMonth
)

    위의 명령문은 셀이 현재 선택된 달의 날짜가 없는 행에 있는지 확인합니다. 날짜 값에서 요일 값을 빼고 1을 더하면 해당 날짜가 있는 행의 첫 번째 항목이 항상 반환됩니다. 따라서 이 문은 행의 첫 날이 조회 가능한 달의 마지막 날 이후인지 확인합니다. 그렇다면 전체 행에 다음 달의 일이 포함되어 있기 때문에 나타나지 않습니다.

  • 속성: OnSelect
    값: _dateSelected 변수를 선택된 셀의 날짜로 설정하는 A Set 함수:

    Set( _dateSelected, DateAdd( _firstDayInView, ThisItem.Value, Days ) )

MonthDayGallery 서클 컨트롤.

  • 속성: Visible
    값: 선택한 날짜에 일정이 예약되어 있는지 여부와 Subcircle 및 Title 컨트롤이 표시됩니다.

    CountRows(
    Filter( MyCalendarEvents, 
        DateValue( Text( Start ) ) = DateAdd( _firstDayInView, ThisItem.Value, Days )
    )
) > 0 && !Subcircle.Visible && Title.Visible

    Circle 컨트롤은 이벤트에 대한 시작 필드가 해당 셀의 날짜와 동일하고 만약 Title 컨트롤이 표시되고 Subcircle 컨트롤이 보이지 않으면 보여집니다. 즉 ,이 컨트롤은 이 날에 하나 이상의 이벤트가 발생하고 이 날을 선택하지 않은 경우에 표시됩니다. 선택된 경우 해당 날짜의 이벤트가 CalendarEventsGallery 컨트롤에서 표시됩니다.

MonthDayGallery 서브서클 컨트롤.

  • 속성: Visible
    값:

    DateAdd( _firstDayInView, ThisItem.Value ) = _dateSelected && Title.Visible

    Subcircle 컨트롤은 _dateSelected가 셀의 날짜와 동일하고 Title 컨트롤이 보여질 때 보여집니다. 즉, 이 컨트롤은 셀이 현재 선택된 날짜일 때 나타납니다.

CalendarEventsGallery 컨트롤.

  • 속성: Items
    값: 이벤트 갤러리를 정렬하고 필터링하는 공식:

    SortByColumns(
    Filter( MyCalendarEvents,
        Text( Start, DateTimeFormat.ShortDate ) = Text( _dateSelected, DateTimeFormat.ShortDate )
    ),
    "Start"
)

    MyCalendarEvents 컬렉션은 _minDate 및 _maxDate 사이의 모든 이벤트가 포함되어 있습니다. 선택한 날짜의 이벤트만 표시하기 위해 MyCalendarEvents에 필터가 적용되여 이벤트의 시작 날짜가 \ _dateSelected와 동일한 경우를 표시합니다. 그런 다음 항목을 시작 날짜별로 정렬하여 순차적으로 정렬합니다.

다음 단계

참고

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

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