Adaptive Cards Visual Builder / Editor / Designer Tool

Обо мне

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

Проблема, которую я хотел решить

Существующий адаптивный дизайнер карточек не имеет функций для простого добавления форм/вкладок/аккордеона в дизайнере.

Что такое Adaptive Cards Visual Builder / Editor / Designer?

Инструмент визуального редактора/конструктора/дизайнера для разработки адаптивных карт путем добавления/редактирования/удаления/дублирования узлов карты. Подробнее об адаптивных карточках

Стек технологий

Javascript/JQuery/JS-узел/JSON/PHP

Процесс сборки Adaptive Cards Visual Builder/Editor/Designer

Редактор будет использоваться для разработки адаптивных карт в формате html и изменения свойств контейнера / макета / столбца / стиля. Редактор покажет предварительный просмотр схемы json адаптивных карт путем анализа формата html, а также создаст предварительный просмотр адаптивных карт в формате html. Пользователи также могут скачать html/json адаптивных карточек.

Проблемы, с которыми я столкнулся

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

Основные выводы

Итерация DOM, фильтрация, парсинг json и т. д.,
Импорт/экспорт понимания адаптивных карт.
Парсер для преобразования из формата HTML в Adaptive Cards JSON.

Ниже представлен предварительный просмотр инструмента Adaptive Card Designer Tool.

Предварительный просмотр показывает предварительный просмотр адаптивной карты как в json, так и в html.