Low-code дизайнер > Создание интерфейсов > Типы виджетов > Виджеты для работы с данными / Связанные элементы

Связанные элементы

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

Как настроить виджет

Настроить виджет Связанные элементы вы можете в любом приложении.

Например, свяжем приложения Заказы и Компании так, чтобы в карточке компании отображались все созданные для неё заказы. Настройка выполняется в несколько шагов.

Шаг 1. Добавьте поле «Компании» в приложение «Заказы»

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

Associated-items-1

Убедитесь, что для поля включена опция поиска и сортировки, в противном случае связать приложения не удастся.

Associated-items-2

Шаг 2.  Добавьте новую вкладку в карточку компании

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

В конструкторе добавьте новую вкладку, нажав на + или перетащив виджет с боковой панели на форму. Назовём вкладку Заказы.

Associated-items-3

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

Шаг 3. Добавьте и настройте виджет «Связанные элементы»

В созданную вкладку перетащите виджет Связанные элементы.

Associated-items-4

Задайте настройки виджета в открывшемся окне.

associated-items-5

Заполните поля:

  • Связанное приложение — укажите приложение, данные которого будут отображаться на настраиваемой форме. Например, выберите приложение Заказы, чтобы в карточке компании были показаны все выполненные для неё заказы;
  • Поле связи — выберите поле типа Приложение из указанного связанного приложения. Например, из приложения Заказы выберите поле Компания, добавленное на шаге 1;
  • Отображаемые поля — определите поля связанного приложения, которые будут отображаться на настраиваемой форме. Чтобы добавить поле, нажмите +;
  • Поля для фильтрации — выберите свойства связанного приложения, которые будут использоваться для фильтрации элементов. Пользователь сможет выбрать значения этих полей над списком связанных элементов. Чтобы добавить свойство, нажмите +;
  • Показывать кнопку обновления элементов — включите опцию, чтобы над списком связанных элементов отображалась кнопка для обновления данных.

Сохраните изменения. Для завершения настройки формы нажмите Сохранить и Опубликовать на верхней панели дизайнера интерфейсов.

Виджет в карточке элемента

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

Если в приложении Заказы включена опция Массовые действия, вы сможете редактировать, удалять или изменять статус связанных с компанией элементов прямо с её карточки.

associated-items-6

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

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

Обратите внимание, если вы удалите заказ, связанный с определённой компанией, то с карточки компании он также будет удалён.

Связанные элементы для работы с клиентами

Рассмотрим, как виджет Связанные элементы использован в разделе CRM. Здесь есть два приложения для хранения информации о клиентах — Компании и Контакты. Они могут входить в состав готовых решений из ELMA365 Store, в компонентах которых необходимо указывать клиента или контактное лицо, например, Управление договорами. В этом случае при импорте решения приложения Компании и Контакты обновятся.

associated-items-7

Установим решение Управление договорами и посмотрим, как оно работает.

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

Форма просмотра приложения Компании, настроенная в решении, содержит дополнительные вкладки. Например, на вкладке Договоры вы можете увидеть связанные элементы — договоры, в которых данная компания указана в качестве контрагента.

associated-items-8

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

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