side menu

Системные настройки виджетов

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

Вкладка «События»

widget-system-settings-2

На вкладке вы можете задать скрипт, который будет выполняться после определённого события:

  • Событие при наведении курсора — начнётся, когда пользователь наведёт курсор на виджет. К примеру, откроется всплывающее окно с подсказкой;
  • Событие при перемещении курсора за границы — произойдёт, когда пользователь переместит курсор за пределы виджета. Например, окно, вызванное при наведении курсора, закроется.

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

Чтобы настроить исполняемый скрипт:

  1. Напротив нужного события нажмите кнопку Создать.
  2. Введите название скрипта и нажмите Открыть.
  3. Пропишите скрипт в открывшейся вкладке Скрипты.
  4. Скрипт сохраняется автоматически. Чтобы выйти из дизайнера интерфейсов, нажмите Сохранить и Опубликовать.

Вкладка «Системные»

widget-system-settings-1

  • HTML стили — задайте CSS‑стили для виджета, например, определите его ширину;
  • HTML классы — вы можете настроить HTML‑стиль с помощью виджета Код, а затем применить его к текущему виджету. Для этого укажите в поле название стиля из заданного скрипта. Один настроенный стиль можно применять сразу к нескольким виджетам. Например, так можно настроить одинаковый цветной фон для разных виджетов на форме;

Настройка цветного фона виджетов с помощью опции HTML классы

  1. Добавьте на форму виджет Код и задайте следующий скрипт:

<style>
  .my-custom-style {
      background: yellow;
  }
</style>

  1. Затем добавьте виджет, например, Надпись, и в его настройках в поле HTML классы укажите значение my-custom-style. Фон виджета станет жёлтым.
  2. Чтобы изменить цвет фона виджета, достаточно откорректировать скрипт в виджете Код.
  • Видимость — позволяет скрыть виджет визуально с помощью CSS‑стилей и HTML‑разметки. При этом сам виджет не удаляется из кода страницы. Определите условия отображения виджета:
    • Показывать всегда — виджет в любом случае будет виден пользователю;
    • Показать по условию, Скрыть по условию — установите условие, при котором виджет отобразится или скроется. Для этого привяжите к настройке контекстную переменную. Например, выберите вариант Скрыть по условию и свяжите эту настройку с переменной типа Выбор «да/нет». Виджет отобразится, если пользователь при заполнении данных выберет Нет, и скроется, если выбрать Да. Ниже приведён пример использования этой опции;
    • Показать для групп — чтобы отобразить виджет только для определённых групп пользователей, выберите их в поле, которое появится ниже;
    • Скрывать всегда — виджет в любом случае скроется для пользователя;
  • Рендер — позволяет не загружать данные виджета на страницу. В случае скрытия виджет удаляется при помощи функции уничтожения. Определите, когда получать данные виджета для его отображения на странице:
    • Показывать всегда — изображение виджета сформировано и отображается на странице;
    • Показать по условию, Скрыть по условию — установите условие, при котором изображение виджета формируется в коде страницы или вызывается функция его уничтожения. Для этого привяжите к настройке контекстную переменную типа Выбор «да/нет». Например, при выборе варианта Да для опции Скрыть по условию виджет уничтожится;
    • Показать для групп — чтобы изображение виджета формировалось только для определённых групп пользователей, выберите их в поле, которое появится ниже;
    • Скрывать всегда — изображение виджета не формируется, его нельзя увидеть на странице, в том числе в её коде. Чтобы скрыть виджет визуально без удаления из кода страницы, используйте опцию Видимость.
       
      Подробнее об использовании настроек читайте в разделе «Сравнение опций „Видимость“ и „Рендер“»;
  • Только для чтения — настройте доступ к виджету:
    • Наследовать от родителя — опцию удобно использовать, когда внутрь одного виджета добавлен другой. К примеру, внутри виджета Колонка, который доступен только для чтения, вы разместили список с элементами приложения. Для того, чтобы пользователи не могли вносить изменения в этот список, при его настройке укажите опцию Наследовать от родителя;
    • Да — пользователи не смогут редактировать данные, которые отображает виджет;
    • Нет — пользователи смогут редактировать данные, отображаемые внутри виджета;
  • Загружать содержимое асинхронно — опция доступна для виджетов, в которых содержатся данные, например, Колонки, Входящие задачи, Панель с заголовком. Включите опцию, чтобы содержимое отображалось только после полной загрузки страницы или формы приложения.

Сравнение опций «Видимость» и «Рендер»

Рассмотрим, чем отличаются настройки:

  • Видимость — управляет визуальным отображением виджета на странице при помощи CSS‑стилей и HTML‑разметки;
  • Рендер — определяет наличие виджета в коде страницы. Например, можно настроить скрытие виджета по условию, чтобы загрузка его данных в код страницы и последующее отображение выполнялись только при заданном условии.

Вы можете применять опцию Рендер в следующих случаях:

  1. Входные данные для корректной работы виджета ещё не готовы.
     
    Чтобы пользователь не видел пустой или некорректно работающий виджет на странице, настройте его загрузку в код страницы, только когда для виджета получены все необходимые данные.
  2. Для максимальной конфиденциальности.
     
    Вы скрыли виджет с помощью настройки Видимость, но хотите, чтобы пользователи не смогли посмотреть его через инструменты разработчика. Используйте опцию Рендер, чтобы виджет не загружался в код страницы. Например, выберите вариант Скрывать всегда.
  3. Для оптимизации времени загрузки страницы.
     
    Когда в опции Рендер вы выбираете значение Скрывать всегда, функция инициализации не вызывается. Данные для отображения виджета не запрашиваются, поэтому страница загружается быстрее.

Совместное использование опций «Видимость» и «Рендер»

 
Вы можете использовать опции Видимость и Рендер совместно. Например, виджет нужно сформировать, когда его входные данные готовы, и отобразить на странице, когда пользователь выберет значение Да в поле формы. Для этого:

  1. Создайте две переменные типа Выбор «да/нет»:
  • Данные готовы — для опции Рендер;
  • Отобразить виджет — для опции Видимость.
  1. В опции Рендер выберите вариант Показать по условию и привяжите переменную Данные готовы, в которой после получения данных установится значение Да. Виджет создастся в коде страницы и будет готов к показу.
  2. В опции Видимость выберите вариант Показать по условию и привяжите переменную Отобразить виджет, в настройках которой предустановлено значение Нет.

Если настройки выполнены и опубликованы, то:

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

Установить связь с полем

Поля настроек виджетов можно связать с контекстными переменными. Это удобно, если необходимо динамически менять настройки виджета на странице или в бизнес-процессе. Для привязки поля:

  1. Нажмите значок chain_icon справа от нужной опции.
     
    В настройке Видимость привязка поля доступна только для вариантов Показать по условию или Скрыть по условию. Выберите один из них.
  2. Нажмите <Не установлено>.
  3. В выпадающем списке выберите контекстную переменную. В списке отображаются только переменные с тем же типом данных, что и связываемое поле.
  4. Сохраните и опубликуйте виджет.

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

Пример настройки динамического отображения вкладки

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

Для этого:

  1. Перейдём в меню приложения Заказ и выберем Настройка формы.
  2. В открывшемся окне на вкладке Контекст добавим свойства: Платежи типа Таблица, Предоплата 100% типа Выбор «да/нет».
  3. Перейдём на вкладку Создание и нажмём <По умолчанию> и затем кнопку + Создать форму, или Редактировать форму, если форма создана ранее. Откроется дизайнер интерфейсов.
  4. Вынесем на поле для моделирования виджет Вкладки и добавим вкладки Заказ и График платежей. На первую вынесем созданное свойство Предоплата 100%, на вторую — свойство Платежи.
  5. Перейдём в системные настройки вкладки График платежей, в поле Видимость выберем вариант Скрыть по условию и свяжем его со свойством Предоплата 100%.

bind-field-1

  1. Сохраним и опубликуем форму создания заказа.

Теперь при снятии флажка Предоплата 100% на странице появится новая вкладка График платежей, где пользователь может указать сведения о расчётах по заказу. Если же установить флажок Предоплата 100%, новая вкладка не отобразится.

bind-field-2

field-masks.html 360027211631.html