Усовершенствования настраиваемых форм — CSS и сложные типы ввода
В выпуске vRealize Automation от марта 2020 г. (и vRealize Automation 8.1) есть два новых улучшения возможностей настраиваемых форм в Service Broker: настраиваемый CSS и сложные типы ввода. Пользовательский CSS позволяет импортировать таблицу стилей для настройки внешнего вида форм, что позволяет создать более богатый пользовательский интерфейс. Сложные типы входных данных позволяют создавать элементы каталога для рабочих процессов vRealize Orchestrator (vRO), которые имеют входные данные CompositeType.
Пользовательский CSS в формах Service Broker
Чтобы продемонстрировать эту новую возможность, я создал базовую схему Cloud Assembly с несколькими различными типами ввода и опубликовал новую версию в каталоге Service Broker. «Ванильная» форма запроса для этого элемента каталога показана ниже, и хотя мне нравится пользовательский интерфейс VMware Clarity, у некоторых клиентов есть потребность в большем контроле над внешним видом форм.
Чтобы настроить CSS для элемента каталога, вам необходимо создать пользовательскую форму и импортировать файл CSS. В Service Broker перейдите к разделу «Контент и политики» и странице «Контент». Выберите три точки, чтобы открыть меню для элемента, который вы хотите настроить, а затем выберите «Настроить форму». Чтобы импортировать файл CSS, нажмите «Действия», затем «Импорт CSS» — откроется диалоговое окно, позволяющее выбрать файл CSS для импорта.
Самый простой способ написать собственный CSS для формы — просмотреть исходный HTML-код формы и получить идентификатор элемента.
- Для Chrome щелкните правой кнопкой мыши элемент формы, который хотите настроить, и выберите «Проверить».
- Для Firefox щелкните правой кнопкой мыши элемент формы, который вы хотите настроить, и выберите «Проверить элемент».
Например, я хочу изменить стиль CSS для ввода «Целое число» в моей пользовательской форме. Я щелкаю элемент правой кнопкой мыши и проверяю его.
Ниже вы можете видеть, что Chrome выделил элемент ввода HTML и что ввод имеет идентификатор «input_integer».
Я хочу, чтобы мой ввод Integer имел синий фон, некоторые дополнительные отступы, белый текст и выделялся, когда я нажимаю на ввод. Я создаю файл CSS и изменяю отображение этого элемента формы.
Я редактирую пользовательскую форму, импортирую файл CSS, включаю и сохраняю пользовательскую форму. При просмотре формы запроса сейчас стили были применены, и я вижу, что отображается мой новый ввод формы.
Я также могу использовать более общие селекторы CSS, например, используя элементы ввода или селекторы атрибутов, для более широкой настройки. Например, следующий код можно использовать для одновременного оформления всех входных данных:
После импорта таблицы стилей форма будет выглядеть следующим образом:
Сложные типы ввода для элементов каталога vRealize Orchestrator
Второе усовершенствование настраиваемых форм — возможность использовать рабочие процессы vRealize Orchestrator со сложными входными данными в качестве элементов каталога.
Это особенно полезно для сбора информации для рабочих процессов XaaS (все как услуга) и упрощает использование настраиваемых типов в vRealize Automation.
Таким образом, например, рабочий процесс vRealize Orchestrator с входными данными CompositeType, как показано ниже, можно добавить в Service Broker.
В Service Broker при запросе элемента каталога будут отображаться детали обычной формы запроса с дополнительной сложной формой ввода, которая позволяет конечному пользователю создать ввод CompositeType путем ввода отдельных свойств.
Спасибо, что прочитали это краткое введение в два небольших, но мощных усовершенствования настраиваемых форм vRealize Automation Service Broker.
Стилизация доступных входных данных HTML-файла
Ввод HTML-файла — один из самых странных элементов, с которыми мне приходилось сталкиваться. Хотя он используется довольно широко, реализация по умолчанию оставляет желать лучшего без использования JavaScript.
Я исследовал, что можно сделать с помощью CSS только с точки зрения стиля, и получил хорошие результаты.
Всего один элемент… но так ли это?
Первое, что бросается в глаза при включении , состоит из двух частей, которые обычно представляют собой отдельные элементы: кнопки для запуска диалогового окна выбора файлов операционной системы и строки текста, указывающей на пользователю, что он должен выбрать файл или, если файл был выбран, отобразить путь или имя этого файла.
Напрашивается вопрос: как оформить две отдельные части этого (одного) элемента?
По общему мнению в Интернете, если связать элемент
В надежде, что не придется заново изобретать функциональность самого , давайте попробуем найти способ, используя только CSS.
Стилизация ввода файла
Для оформления можно использовать селектор атрибутов CSS:
input[type="file"] {
// здесь ваш код
}
В браузерах на основе Firefox, Blink и Webkit это позволит вам настроить стиль текста имени файла, расположить элемент и добавить интервал, но не повлияет на саму кнопку. В IE11, кроме позиционирования и интервала, этот селектор практически бесполезен. Двигаемся дальше…
Псевдоселекторы
Начну с плохой новости: не существует единого псевдоселектора, который везде обрабатывает . В каждом браузере (Chrome/Firefox/IE11) реализована собственная реализация того, как работать с внутренней частью с различными уровнями контроля. Вот основное изложение:
Chrome (браузеры Blink/Webkit)
input[type="file"]::-webkit-file-upload-button {
// здесь ваш код
}
Firefox
input[type="file"]::file-selector-button {
// здесь ваш код
}
Здесь следует отметить несколько вещей.
Браузеры на основе Firefox и Blink/Chrome имеют селекторы, которые позволяют практически полностью настроить кнопку выбора файла.
Вы можете добавить состояния наведения/фокуса/активности с помощью соответствующих селекторов, например:
input[type="file"]:hover::-webkit-file-upload-button {
// css состояния наведения
}
input[type="file"]:active::-webkit-file-upload-button {
// активное состояние css
}
input[type="file"]:focus::-webkit-file-upload-button {
// состояние фокуса css
}
Фактическая метка кнопки не может быть изменена даже с использованием свойства content CSS. На момент написания статьи оба использовали разумные значения по умолчанию для них, поэтому, если вам необходимо дополнительно изменить метку кнопки, лучше всего использовать трюк JavaScript +
Вы даже можете изменить расположение текста имени файла, установив display: block для обоих элементов для более приятного вида «имя файла под кнопкой».
Я заметил некоторую странность, связанную с некорректным отображением свойства box-shadow из-за ограничений содержащей его модели блока.
Добавив некоторые отступы к самому , вы получите место для элемента, чтобы отобразить любой контент внутри.
Internet Explorer 11
input[type="file"]::-ms-value {
// стили имени файла
}
input[type="file"]::-ms-browse {
// стили кнопок
}
IE11 предоставляет псевдоэлементы для изменения стиля ввода и текста имени файла — с некоторыми оговорками. Виджет загрузки файла IE11 по умолчанию отображает текстовое поле перед кнопкой обзора, и это не отображает текст внутри него (например, «Выбрать файл») до того, как пользователь выберет его.
Это может создать странный вид, если вы удалите границы текстового поля с помощью ::-ms-value – я решил оформить это поле так же, как и другие вводимые тексты в дизайне, чтобы обеспечить некоторую согласованность для пользователя.
Когда файл выбран, IE11 также записывает полный путь к файлу в вашей локальной системе, что несколько снижает полезность этого поля, если оно не очень широкое.