Как создать диалоги TouchUI, которые могут динамически отображать или скрывать поля на основе пользовательского ввода, - это тема, которая часто всплывает на форумах AEM Experience League.

В этом руководстве я покажу вам, как создать следующий диалог TouchUI для базового компонента AEM:

Коралл 2 против Коралла 3

Похоже, что в Интернете есть несколько руководств, описывающих, как реализовать эту функцию с помощью Coral 2, включая официальное руководство Adobe:

  1. Руководство Adobe: https://helpx.adobe.com/experience-manager/using/dynamic_touchui.html
  2. Учебник от SGAEM: http://www.sgaemsolutions.com/2019/01/showhide-tabs-and-fields-based-on-drop.html
  3. Видеоуроки l: https://www.youtube.com/watch?v=JZFFxxiFpGY

Однако Coral 2 вышла из моды и может быть устаревшей и / или удаленной в будущих выпусках AEM. Так что подумайте, где это возможно, о переходе на Coral 3, поскольку он имеет новые и улучшенные функции и защитит ваш проект в будущем, когда вы решите перейти на более новую версию. Вы можете узнать больше о Coral 3 здесь: Руководство по переходу на CoralUI 3-based - документация Granite UI 1.0.

Однако, если вы все же решите начать использовать компоненты Coral 3, избегайте создания пользовательских интерфейсов / диалогов, которые включают смесь Coral 2 и 3, я видел много странных побочных эффектов от этого. Вы можете отличить компоненты Coral 2 и 3 друг от друга по их расположению в JCR:

Coral 2: / libs / granite / ui / components / foundation
Coral 3: / libs / granite / ui / components / coral / фундамент

Разобравшись с Coral 3 PSA, давайте рассмотрим наш вариант использования.

Вариант использования

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

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

Без лишних слов, давайте построим диалог!

1. Создание диалога

Во-первых, нам понадобится компонент, к которому будет прикреплен наш диалог редактирования, поэтому создайте его в любом месте в разделе приложений. Я просто вызываю свой компонент dynamicComponent. Дайте ему HTML-файл, а пока мы просто сделаем так, чтобы он отображал простое «Hello world»:

<pre>Hello world</pre>

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

Теперь создайте страницу и разместите на ней свой компонент, вы должны увидеть следующее:

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

Структура узла выглядит так:

Вот XML:

2. Добавление функции отображения / скрытия

Следующим шагом является отображение и скрытие определенных полей в зависимости от того, какой тип продукта выбрал пользователь:

Для этого нам нужно сообщить AEM:

  1. Какой вход будет определять, что будет показано или скрыто. В нашем случае это раскрывающийся список productType.
  2. Какие поля будут соответствовать каждому вводу в раскрывающемся списке.

Откройте узел productType в CRX DE и добавьте следующее свойство:

granite:class - String - cq-dialog-dropdown-showhide

Это в основном «активирует» функцию отображения / скрытия (дальнейшее объяснение ниже). Теперь добавьте узел под названием granite: data узел типа nt: unstructured к productType.

Добавьте свойство cq-dialog-dropdown-showhide-target типа String в узел granite: data. Значение этого свойства может быть любым, я выбрал .productType-showhide-target. По сути, здесь вы предоставляете селектор CSS, чтобы указать поля, которые нужно показать или скрыть. На простом английском это будет означать Показать или скрыть любой элемент с помощью класса productType-showhide-target .

Теперь, когда мы рассказали AEM как показать или скрыть наши поля, давайте расскажем, какие поля должны быть затронуты. На шаге 1 вы заметили, что для каждого типа продукта отображаются 2 поля. Вместо того, чтобы показывать / скрывать два поля каждый раз, я сгруппировал эти поля в 3 контейнера (по одному для каждого типа продукта), и вместо этого мы будем показывать / скрывать эти контейнеры.

Добавьте следующее свойство к узлам контейнера phone, laptop и tv:

granite:class - String - productType-showhide-target

Если вы обновите диалоговое окно редактора, вы увидите, что все ваши поля, кроме раскрывающегося меню productType, исчезли. Это потому, что мы дали AEM как и что, но не когда. Мы хотим сказать AEM «Показать контейнер X, когда выбран вариант Y».

Добавьте узел granite: data типа nt: unstructured под каждый из трех контейнеров. Добавьте к этим узлам следующее свойство:

showhidetargetvalue - String - {x}

Где {x} - значение дочернего элемента раскрывающегося списка productType, связанного с каждым контейнером. Например: для контейнера phone узел granite: data будет содержать следующее свойство:

showhidetargetvalue - String - phone

Теперь вернитесь в диалоговое окно, и вы должны увидеть, как поля появляются и исчезают в зависимости от выбора из раскрывающегося списка:

Вот структура узлов гранита: узлы данных:

А вот и XML:

В качестве последнего штриха замените содержимое dynamicComponent.html следующим кодом:

Это заставит компонент отображать технические характеристики в зависимости от типа продукта.

Примечание: если обработка логического значения hdr кажется странной, посмотрите официальную документацию Granite n, чтобы найти флажки, и посмотрите this Gist от nateyolles .

Объяснение

Функциональность отображения / скрытия реализуется скриптом /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js.

Сценарий просто использует селекторы CSS для добавления или удаления класса hide из элементов, которые имеют класс таргетинга (в нашем случае productType-showhide-target).

Свойство granite: class позволяет нам добавлять классы к элементу. Узлы granite: data позволяют нам добавлять атрибуты data- к элементу. Если вы проверите раскрывающийся элемент productType, вы увидите это в действии:

Класс cq-dialog-dropdown-showhide был добавлен свойством granite: class и data-cq-dialog-dropdown-showhide-target = ”. атрибут productType-showhide-target » был добавлен свойством data-cq-dialog-dropdown-showhide-target узла granite: data.

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

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

Если вы хотите загрузить и установить пакеты для Шага 1 или Шага 2 этого руководства, вы найдете их здесь.