Поділитися через

Довідкова інформація про шаблон екрана календаря для компонованих програм

Отримайте розуміння того, як кожен суттєвий елемент керування на шаблоні екрана календаря впливає на загальну функціональність екрана за замовчуванням для компонованих програм у Power Apps. Цей детальний огляд містить формули поведінки і значення інших властивостей, що визначають реакцію елементів керування на дані, що вводяться користувачем. Обговорення функціональності цього екрана за замовчуванням на високому рівні шукайте у розділі Огляд екрана календаря.

У цьому розділі описуються деякі важливі елементи керування і пояснюються вирази або формули, в яких задаються різні властивості (наприклад, Елементи і 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 завжди повертає перший день місяця.
    • _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: установіть тут поточне значення елемента керування розкривний список календаря, щоб отримувалися події з правильного календаря.
    • _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 буде скинуто до останнього дня поточного місяця.

    У розділі Розкривний календар цього документа ці змінні описуються більш детально.

Шеврон попереднього місяця

Елемент керування 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 число поточного місяця. (Коли 1 березня припадає на суботу, _firstDayInView для березня буде 23 лютого.) Це означає, що якщо користувач ще не вибирав цей місяць, _minDate більше, ніж нове значення _firstDayOfMonth, і функція If повертає значення True. Код виконується, а колекція і змінна оновлюються.

    • MyCalendarEvents отримує події з вибраного календаря за допомогою операції Office365Outlook.GetEventsCalendarViewV2. Діапазон дат між _firstDayInView і _minDate - 1. Оскільки MyCalendarEvents вже містить події для дати _minDate, 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 число наступного місяця. (Коли 1 лютого припадає на неділю, і рік не високосний, суботу, _maxDate буде 13 березня, тобто, _firstDayInView + 40 днів.) Це означає, що якщо користувач ще не вибирав цей місяць, _maxDate більше, ніж нове значення _lastDayOfMonth, і функція If повертає значення True. Код виконується, а колекція і змінна оновлюються.

    • MyCalendarEvents отримує події з вибраного календаря за допомогою операції Office365Outlook.GetEventsCalendarViewV2. Діапазон дат між _maxDate + 1 день і _firstDayInView + 40 днів. Оскільки MyCalendarEvents вже містить події для дати _minDate, 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]

    Для елементів у галереї календаря використовується набір із чисел від 0 до 41, оскільки в найгіршому випадку в поданні календаря потрібно буде відображати 42 повних дні. Це відбувається, коли перший день місяця припадає на суботу, а останній день місяця — неділя. У цьому випадку в календарі відображається шість днів попереднього місяця в рядку, що містить перший день місяця, і шість днів наступного місяця в рядку, що містить останній день місяця. Це 42 унікальних значення, з яких 30 — для вибраного місяця.

  • Властивість: WrapCount
    Значення: 7

    Це значення відображає тиждень з семи днів.

Елемент керування "Заголовок" в галереї календаря

Елемент керування «Заголовок MonthDayGallery».

  • Властивість: 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 року, місяць, який починається з суботи і закінчується у неділю. У цьому випадку в календарі відображаються числа з 26 до 31 серпня і 1 вересня в першому рядку, і Abs(Title.Text - ThisItem.Value) = 26 до 1 вересня. Далі Abs(Title.Text - ThisItem.Value) = 5. Воно залишатиметься рівним 5 до останнього рядка в календарі, в якому відображається 30 вересня і дні з 1 до 6 жовтня. У цьому рядку Abs(Title.Text - ThisItem.Value) буде 5 для 30 вересня, але 35 для жовтневих дат.

      Це правило: для днів, що відображаються з попереднього місяця, Abs(Title.Text - ThisItem.Value) завжди буде дорівнювати значенню Title.Text першого дня на дисплеї. Для днів, що відображаються в наступному місяці, Abs(Title.Text - ThisItem.Value) завжди буде дорівнювати значенню елемента MonthDayGallery першої клітинки цього місяця (у цьому випадку 1-го жовтня) мінус 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
    Значення: функція Set, який встановлює для змінної _dateSelected значення дати з вибраної клітинки.

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

Елемент керування "Коло" в галереї календаря

Елемент керування "Коло MonthDayGallery".

  • Властивість: Visible
    Значення: формула, яка визначає, чи заплановані будь-які події на вибрану дату, і чи є видимими елементи керування Вкладене коло і Заголовок.

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

    Елемент керування Коло видимий, якщо поле Початок для будь-якої події рівнозначне даті цієї клітинки, якщо елемент керування Заголовок видимий, і якщо елемент керування Вкладене коло не видимий. Інакше кажучи, цей елемент керування видимий, якщо в цей день відбувається принаймні одна подія, і цей день не вибрано. Якщо вибрати цей день, то події на цей день відображаються в елементі керування CalendarEventsGallery.

Елемент керування "Вкладене коло" в галереї календаря

Елемент керування "Вкладене коло MonthDayGallery".

  • Властивість: Visible
    Значення:

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

    Елемент керування Вкладене коло видимий, якщо значення _dateSelected рівнозначне даті клітинки, а елемент керування Заголовок видимий. Інакше кажучи, цей елемент керування відображається, якщо клітинка — це дата, що наразі вибрана.

Галерея подій

Елемент керування CalendarEventsGallery.

  • Властивість: Items
    Значення: формула, яка сортує та фільтрує галерею подій.

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

    Колекція MyCalendarEvents містить усі події між _minDate і _maxDate. Щоб відобразити події лише для вибраної дати, до MyCalendarEvents застосовується фільтр, який відображає події, дата початку яких дорівнює \ _dateSelected. Потім елементи сортуються за датою початку, щоб розташувати їх послідовно.

Наступні кроки

Примітка

Розкажіть нам про свої уподобання щодо мови документації? Візьміть участь в короткому опитуванні. (зверніть увагу, що це опитування англійською мовою)

Проходження опитування займе близько семи хвилин. Персональні дані не збиратимуться (декларація про конфіденційність).