Пользовательский визуальный элемент в LuckyTemplates: узнайте, как управлять свойствами шрифта в DAX

Для этой записи блога я хочу сегодня уделить немного времени и познакомить вас с пользовательским визуальным элементом в LuckyTemplates, который я начал использовать и который обеспечивает большую гибкость и возможности, недоступные в собственных визуальных элементах LuckyTemplates. Вы можете посмотреть полное видео этого урока в нижней части этого блога.

Я знаю, что в последнее время мы много говорили о Денебе и не без оснований, но этот также обеспечивает большую гибкость. Использование этих двух вместе делает довольно мощную пару. Пользовательский визуальный элемент, о котором я говорю, называется средством просмотра HTML и CSS от K Team Solutions .

возник вопрос о том, как управлять как цветом, так и атрибутами форматирования форматированного текста визуальной карты на основе меры DAX. Цвет, конечно, не проблема; это то, что мы можем сделать довольно легко с помощью условного форматирования в LuckyTemplates.

Управление атрибутами текста, такими как выделение полужирным шрифтом и курсивом, с помощью показателей DAX — это то, что вы не можете сделать с помощью собственного LuckyTemplates, но это довольно легко сделать с помощью этого средства просмотра HTML CSS. Вы также можете использовать визуализацию для создания некоторых визуальных эффектов и комплексного подхода к карточке KPI.

Давайте посмотрим на сообщение на форуме. По сути, у участника была простая карточка, основанная на показателе, и он хотел изменить атрибуты текста.

Мы перейдем к LuckyTemplates, чтобы воссоздать этот сценарий. Мы установим меру на основе набора практических данных из внешнего инструмента, который мы используем для создания макетов.

Мы установим его таким образом, что если общий годовой объем продаж превысит 40 миллионов, он будет выделен жирным шрифтом и красным цветом.

А если меньше, то будет синим, а не жирным.

Оглавление

• Скачивание пользовательского визуального элемента HTML CSS Viewer в LuckyTemplates
• Изменение свойств шрифта с помощью пользовательского визуального элемента в LuckyTemplates
• Использование пользовательского приложения по-разному
• Добавление анимации и GIF-файлов в отчет
• Заключение

Скачивание пользовательского визуального элемента HTML CSS Viewer в LuckyTemplates

Я покажу вам, как это можно сделать. Первое, что нужно сделать, это получить визуальное представление. Перейдите в AppSource и введите HTML CSS Viewer.

Это будет платный визуал, а пока вы можете получить бесплатную пробную лицензию на их веб-сайте до конца сентября 2022 года. У вас есть пара месяцев, чтобы протестировать это бесплатно.

После того, как мы загрузили его в LuckyTemplates, мы можем увидеть его на панели визуальных элементов. Мы можем закрепить его как постоянный визуальный элемент, если будем часто его использовать.

Изменение свойств шрифта с помощью пользовательского визуального элемента в LuckyTemplates

Если мы посмотрим на текстовое поле, то увидим, что здесь используются две основные меры: мера HTML и мера CSS. HTML обеспечивает общую структуру веб-страницы, а CSS обеспечивает форматирование.

Здесь у нас есть HTML-тег, а ID=container — это обратный вызов CSS. Основной основной частью этого является только заголовок в текстовом поле.

А затем, если мы перейдем к CSS, тогда все станет немного сложнее.

Общая структура, которую я использую, — это стиль 1 в качестве переменной, а затем стиль 2 в качестве переменной.

За этим следует простой оператор if , в котором говорится: «Если общий объем продаж превышает 40 миллионов, используется второй стиль; если нет, то используется стиль 1». Единственная тяжелая работа, которую мы делаем, — это определение этих двух стилей.

Использование пользовательского приложения по-разному

Приложение также поставляется с очень подробным отчетом, который показывает вам множество различных вещей, которые вы можете сделать с этим визуальным элементом.

Как я упоминал ранее, вот карты KPI , которые вы можете использовать.

У вас также есть возможность создавать подробные таблицы при использовании этого визуального элемента.

Вы также можете создать визуальный элемент с преобладанием текста.

На целевой странице вы также можете использовать текстовый скроллер с параметрами шрифта и фона.

Если мы пройдемся по большей части CSS-кода «Изменение текста», он будет очень интуитивным. Мы можем внести изменения в вес шрифта, размер шрифта и цвет шрифта.

Мы можем скопировать это в шаблон, а затем использовать его в качестве основы для второго показателя. Если мы вернемся к нашему файлу, у нас есть CSS-заголовок карты, который управляет форматированием.

Мы вставили скопированный код, поэтому у нас есть синий цвет и самый легкий шрифт для стиля 1. Затем тот же шрифт в стиле 2 с красным цветом и самым тяжелым шрифтом для создания эффекта полужирного шрифта.

Мы помещаем это в оператор IF, и в зависимости от значения меры он выбирает стиль. Мы просто возьмем эти две меры, а затем поместим HTML и CSS в эти слоты.

С помощью этого метода у вас будет возможность легко форматировать атрибуты форматированного текста с помощью HTML и CSS.

Добавление анимации и GIF-файлов в отчет

Помимо возможности использовать пользовательские шрифты, у нас также есть возможность использовать анимацию и GIF-файлы. Я придумал простую меру, в которой я использовал HTML для пользовательского заголовка.

Затем я использовал этот файл CSS для создания трех стилей с разными пользовательскими шрифтами.

Это просто шрифты истинного типа или шрифты открытого типа, которые я скачал бесплатно. Стиль используется по умолчанию, что означает, что в слайсере ничего не выбрано.

В дополнение к этому у меня есть мера GIF. Я включил три GIF-файла, которые загрузил на сайт imgbb , затем использовал прямые URL-адреса и поместил их в тег HTML, используя формат примера отчета для визуального элемента HTML CSS.

Затем я использовал простую меру SWITCH TRUE, чтобы выбрать правильный GIF. Если ничего не выбрано, он просто выбирает пустой.

Вот как это выглядит, если в слайсере ничего не выбрано.

И тогда, если мы делаем выделение в слайсере, мы видим вот что.

Используя этот пользовательский визуальный элемент, мы теперь можем выбирать пользовательские шрифты. Мы также можем добавить GIF-файлы, а затем сделать эти GIF-файлы зависимыми от выбора слайсера и мер DAX. Они будут динамически меняться в зависимости от выбора в вашем слайсере.

Однако есть одно важное ограничение. Когда вы публикуете это в службе, шрифт должен быть установлен на локальном компьютере, чтобы пользователь мог его увидеть.

Если шрифт установлен на локальном компьютере, он будет правильно отображаться в средстве просмотра HTML при публикации в службе LuckyTemplates. Если шрифт не загружен на локальный компьютер, он вернется к семейству шрифтов по умолчанию.

Бегущая строка KPI в отчете LuckyTemplates
Создание пользовательского визуального элемента для LuckyTemplates с помощью
пользовательских значков Deneb LuckyTemplates | Техника визуализации PBI

Заключение

Средство просмотра HTML и CSS от K Team Solutions — это отличный настраиваемый визуальный элемент в LuckyTemplates, который предоставляет настраиваемый и интересный способ изменения визуальных элементов в ваших отчетах. Я определенно рекомендую вам загрузить это приложение и поиграть с ним.

Также не забудьте подписаться на телеканал LuckyTemplates. У нас есть огромное количество контента, который постоянно выходит от меня и ряда создателей контента, и все они посвящены улучшению того, как вы используете LuckyTemplates и Power Platform.

Наконец, посетите веб-сайт LuckyTemplates, чтобы получить дополнительные ресурсы и дополнительные знания, к которым вы можете легко получить доступ.