Світлофори або відображення іконок у View

Доволі часто, нам би хотілось відобразити поруч з даними на View (далі- Подання), якийсь графічний елемент – наприклад іконку. Це дуже зручно для відображення наприклад, статусів запису або їх приіоритету: Низький, Середній, Високий тощо.

Інколи, нам просто хочеться зробити так, щоб наше Подання не виглядало нудно, так би мовити – привнести, хоч якість кольори.
Для прикладу візьмемо сьогодні середовище в PowerApps, в якому вже розгорнутий Project Accelerator (завантажити рішення можна за посиланням https://github.com/OfficeDev/Project-Accelerator).

Зараз на цьому поданні ми бачимо стовпець “Пріоритет“, наша мета в цій статті – зробити світлофор або додати іконки, які б показувались в залежності від статусу.

Перший крок, який нам необхідно зробити, це власне знайти іконки, бажано в форматі svg. Я рекомендую додати в Вибрані сайт https://www.svgrepo.com/, шукаємо потрібну нам іконку, написавши в пошуку наприклад “Red circle“.

Переходимо за адресою make.powerapps.com, я попередньо створив Рішення (Solution), всередині свого рішення чи в рішенні за замовчанням, створюємо веб-ресурс та додаємо попередньо завантажені іконки.

Додали 3 іконки з відповідними кольорами.

Тепер ми можемо відобразити їх після публікації (памʼятаємо, що тільки команда публікації – робить наші зміни доступними).

Далі, нам треба створити такий же елемент – веб ресурс, єдине, що його тип має бути JScript, зручніше це робити з класичного інтерфейсу.

Створюємо новий веб-ресурс, заповнюємо всі поля та тиснемо Text Editor

В редакторі вставляємо, шматочок коду, в якому вам потрібно буде замінити значення на власні, такі як:
Function= назва функції, яку ми будемо викликати у Поданні.
coldata1= назва вашого списку (Choice), з якого будуть братися значення
case= значення у списку (цифрові наприклад 493 680 001).
imgName1= назва вашого веб-ресурсу з відповідною іконкою.

function PRView(rowData1, userLCID1) {
    
    var str1 = JSON.parse(rowData1);
    var coldata1 = str1.proj_priority_Value;
    var imgName1 = "";
    var tooltip1 = "";

    switch (coldata1) {
        case 189330001: 
            imgName1 = "leo_red_icon";
            tooltip1 = "High";
            break;
        case 189330002:
            imgName1 = "leo_yellow_icon";
            tooltip1 = "Moderate";
            break;
        case 189330003:
            imgName1 = "leo_green_icon";
            tooltip1 = "Low";
            break;
    }
    var resultarray1 = [imgName1, tooltip1];
    return resultarray1;
}

ВАЖЛИВО:   var coldata1 = str1.proj_priority_Value;
Після назви вашого Списку вкажіть _Value.

Зберігаємо наш новий веб-ресурс та публікуємо зміни.
Наступний крок – нам необхідно, застосувати функцію, яку ми вказали в коді, в моєму випадку, це PRView у відповідному Поданні таблиці Project Request.

Оскільки я працюю в рішенні, яке я спеціально створив – то, мені необхідно додати вже існуючу таблицю і її Подання в своє рішення.

Відкриваємо в тому ж класичному інтерфейсі, Подання в моєму випадку Active Project Request. В класичному інтерфейсі, час відповіді, часто буває довгим – тому, періодично ви зможете ходити і робити собі каву ☕️ 🤦🏻‍♂️.

Після відкриття Подання – натискаємо 2 рази на потрібному нам стовпчику або виділяємо його та натискаємо “Change Properties”.
За допомогою пошуку в полі Web resource знаходимо по назві, створений нами веб-ресурс із шматочком коду, в поле Function Name вписуємо імʼя нашої функції.

При збереженні, дуже часто буває повідомлення про помилку, я його ігнорую. Хто з вас розбирався, чому вона виникає – напишіть в коментарях.

Публікуємо зміни та оновлюємо сторінку з відповідним Поданням.

Вітаю нас – все вийшло, 🚦 працює!

P.S. У Microsoft є стаття, по точно такій же темі)
https://docs.microsoft.com/en-us/power-apps/maker/data-platform/display-custom-icons-instead