Лучший пользовательский визуал, о котором вы никогда не слышали

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

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

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

Поэтому я пошел на рынок AppSource и искал пользовательские визуальные эффекты, которые могут выполнять горизонтальную временную шкалу. Я нашел что-то под названием Query On Timeline .

В нем есть то, что я искал — полоса с датами и графикой, а также возможность включать некоторую дополнительную информацию под строкой, например даты заказа на поставку, даты коносамента и даты счета-фактуры.

Есть и другие способы его использования, например, стиль Канбан.

Вы также можете использовать уменьшенную версию без визуальных эффектов.

Или выберите стиль водопада.

Вы даже можете выбрать стиль «картинка в линию».

Есть много способов сделать это. Когда я начал исследовать это, я обнаружил, что нет никакой документации по этому поводу. На удивление ничего об этом не было в сообществе Microsoft, где почти всегда можно найти что-то, что ответит на ваш вопрос.

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

Это была моя запись для Challenge # 7 с использованием визуального элемента «Запрос на временной шкале».

Нижний левый визуальный элемент имеет этот ключ: оранжевый — даты заказа на поставку, средний синий — дебиторская задолженность, а темно-синий — даты счетов-фактур.

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

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

Если вы нажмете на любой из этих значков, вы попадете на их страницу. Например, если вы нажмете на счет-фактуру…

… это приведет вас к макету шаблона счета.

И точно так же, если вы перейдете к заказу на покупку, вы перейдете к шаблону заказа на покупку. То же самое происходит с поставками и коносаментами.

Оглавление

• Ключевые шаги для создания одного из лучших настраиваемых визуальных элементов для LuckyTemplates
• Подготовка ваших визуальных эффектов
• Подготовка модели данных
• Форматирование пользовательских визуальных элементов для LuckyTemplates
• Заключение

Ключевые шаги для создания одного из лучших настраиваемых визуальных элементов для LuckyTemplates

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

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

Вам также необходимо настроить дополнительный URL-адрес , который в данном случае представляет собой фиктивные шаблоны, которые мы связали со значками.

Затем вам нужно настроить модель данных таким образом, чтобы она соответствовала требованиям Query on Timeline .

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

Вы должны принять это во внимание заранее, а затем настроить сам визуал. Он имеет множество настроек, некоторые из которых не интуитивно понятны.

Подготовка ваших визуальных эффектов

Давайте начнем с шага 1. Я использую сайт под названием Flat Icon для своих визуальных эффектов.

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

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

После того, как вы настроите свои фотографии, изображения или значки, загрузите их и загрузите на сайт хостинга изображений. Опять же, есть много хороших. Тот, который я использую, называется ImgBB , это бесплатный и простой в использовании сайт.

Значки, которые я использовал в своей записи для Query On Timeline, — это значки оранжевого, среднего синего и темно-синего цветов.

Ключевым моментом здесь является выбор нужных значков и выбор «Получить коды для встраивания» .

Это позволит вам видеть ссылки Viewer .

Нажмите на кнопку раскрывающегося списка и перейдите к Прямые ссылки.

Затем скопируйте эти ссылки в блокнот. Ключевым моментом здесь является получение URL-адресов этих общедоступных изображений.

Это похоже на то, что вы сделаете для дополнительных URL-адресов. В данном случае сайт, с которого я брал, называется Template Labs .

Я скопировал URL-адреса заказа на покупку, коносамента и шаблонов счетов-фактур в блокнот. Мы будем обрабатывать их так же, как и URL-адреса значков.

Подготовка модели данных

Следующее, что нужно сделать, это подготовить нашу модель данных. Я покажу вам, как большинство участников челленджа справились со своими моделями данных. Это представление Мудассира Али, и он подготовил прекрасную запись для этого испытания. Я действительно призываю вас взглянуть на это.

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

Это был хороший способ провести расчеты и получить необходимые аналитические выводы. Но эта модель не поддерживает подход временной шкалы.

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

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

Если мы посмотрим на таблицу транзакций, у нас есть несколько дат: дата заказа на покупку, дата счета-фактуры, дата дебиторской задолженности и другие расчетные даты.

Что необходимо для Query On Timeline, так это один столбец даты. Итак, после объединения этой единственной таблицы транзакций я удалил ее, а затем связал несводную версию со своей моделью данных. Обратите внимание, что в заголовке написано «поворот», но на самом деле это не поворот.

Если мы еще раз взглянем на таблицу транзакций, мы увидим столбец категории «Дата» и один столбец «Дата» .

Столбец «Категория дат» был разделен на три основные категории: « Заказано» , « Получено » и «Оплачено» . Но там также есть локальные и глобальные максимумы и минимумы.

У нас также есть URL-адрес заказа на покупку (URL-адрес заказа).

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

Мы делаем тот же аналогичный оператор SWITCH для назначения шаблона, который также основан на поле «Категория даты».

Вот как я назначил правильный значок и шаблон для каждой из записей.

Если мы вернемся к несводной таблице, мы увидим один столбец даты , категорию даты и два поля URL для заказов на покупку и шаблонов.

Это все, что нам нужно, чтобы правильно настроить временную шкалу.

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

Дата /время может быть одной из двух вещей: датой таблицы фактов в несводной версии или подтвержденной датой в таблице дат. Любой из них работает здесь.

Необязательный URL-адрес — это URL-адрес шаблона, связанный с щелчком значка.

Необязательное изображение — это поле URL-адреса заказа на покупку.

Теперь, если мы посмотрим на это поле URL-адреса PO, нам нужно установить категорию данных в URL-адрес изображения, поскольку по умолчанию он автоматически будет текстовым. Если вы сохраните его как текст, изображения не будут отображаться должным образом.

Если вы установите его в поле URL, изображения будут правильно поступать с сайта хостинга изображений.

Эти шаги в основном показывают, как вы можете правильно настроить основные поля на визуальном элементе.

Форматирование пользовательских визуальных элементов для LuckyTemplates

Теперь я просто хочу показать вам некоторые форматы, которые я сделал для отчета. Первый из них — Stagger Text , создающий каскадный эффект.

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

Функция « Текст сверху» позволяет перемещать каскадный текст снизу вверх над строкой.

Жирные заголовки позволяют выделить заголовок жирным шрифтом. Есть также некоторое форматирование даты, которое вы можете сделать на оси X. Вы можете показывать или не показывать даты на оси.

Переключатели даты ручного масштабирования также важны, поскольку при их включении начальная и конечная точки остаются постоянными.

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

Если мы отключим это, последняя точка данных в каждом заказе на поставку станет конечной точкой этой строки. Как видите, конечная точка — март.

В этом случае мы хотим включить ручное масштабирование и начать его 1 января, что является началом набора данных, и завершить его 30 июня, что является концом набора данных.

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

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

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

Настройки изображения позволяют масштабировать размер ваших изображений и поддерживать правильный интервал.

Стиль позволяет выбрать один из нескольких стилей: стиль полосы, стиль линии, стиль водопада и стиль канбан .

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

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

Он также имеет возможность загружать даты в виде файла календаря из Календаря Google или Outlook.

Заключение

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

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

Пожалуйста, подпишитесь на LuckyTemplates TV, если вы еще этого не сделали. У нас скоро появится много нового видеоконтента.