Всплывающие подсказки

Всплывающие подсказки показываются после вызова "Помощь на странице" или при первом входе пользователя на страницу, и помогают ему сориентироваться в новом функционале.

Подробное описание приведено в спецификации.

Конфигурация всплывающей подсказки

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

Для конфигурации всплывающей подсказки необходимо использовать контрол Hint/Popup:InfoboxContainer. Это обертка для области, рядом с которой необходимо показать подсказку.

Контрол конфигурируется с помощью опций:

  • groupKey — идентификатор группы подсказок. Для каждого функционального участка необходимо конфигурировать свою группу подсказок под общим идентификатором;
  • hintTemplate — шаблон подсказки;
  • alignment — выравнивание всплывающей подсказки относительно контента;
  • offset — отступы всплывающей подсказки относительно контента;
  • targetSide — сторона контентной области, относительно которой будет позиционироваться всплывающая подсказка.

Пример конфигурации:

<!-- WML -->
<Hint.Popup:InfoboxContainer groupKey="{{_hintsGroupKey}}">
   <ws:hintTemplate>
      <div>Если задач много, отберите их по периоду или сроку выполнения, чтобы задача не попала в просрочку</div>
   </ws:hintTemplate>
</Hint.Popup:InfoboxContainer>

Всплывающая подсказка кнопки конфигурации

Задание всплывающей подсказки у кнопки конфигурации возможно только для страниц на новом роутинге. Данный функционал описан в статье .

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

Баннер с инструкцией конфигурируется контролом Hint/Popup:BannerContainer. Это обертка для области, в которой необходимо показать баннер с подсказкой.

Контрол конфигурируется с помощью опций:

  • content — шаблон, относительно которого будет появляться баннер;
  • groupKey — идентификатор группы подсказок. Для каждого функционального участка необходимо конфигурировать свою группу подсказок под общим идентификатором;
  • hintTemplate — содержимое баннера. Высота баннера определяется пользовательским шаблоном, указанном в опции hintTemplate;
  • title — заголовок баннера.

Пример конфигурации:

<!-- WML -->
<Hint.Popup:BannerContainer groupKey="HintGroupKey" title="Обмен сообщениями">
   <ws:content>
        <Controls.list:View source="{{_listSource}}"/>
   </ws:content>
   <ws:hintTemplate>
        <div>
            В этот раздел попадут задания, по которым вы назначены исполнителем текущего этапа: задачи, закупки, согласования и т.д</br>
            В СБИС уже есть несколько самых простых схем работы с документами: задачи, поступления и реализация. ТАкже вы можете составить свои правила обработки с помощью конструктора бизнес-процессов, не прибегая к помощи программистов.
        </div>
   </ws:hintTemplate>
</Hint.Popup:BannerContainer>

Активация подсказок

Для управления группами подсказок используется контрол Hint/Popup:Activator. Метод activateGroup активирует новую группу с подсказками. При регистрации новой группы, все текущие видимые подсказки скрываются.

На странице может быть активна только одна группа подсказок. При создании функционального участка необходимо активировать группу подсказок, относящуюся к этому учатску. Если активируемая группа у пользователя до этого не показывалась (определяется с помощью пользовательских параметров), то все подсказки из группы сразу становятся видимыми.

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

<!-- WML -->
<Controls.popupTemplate:Stack>
   <div>
     
      <!-- Подсказка, которая будет показываться на первом шаге -->
      <Hint.Popup:InfoboxContainer hintTemplate="wml!firstStepHint" groupKey="{{_hintsGroupKeyFirst}}">
         <Controls.buttons:Button caption="Добавить кассу" on:click="_onAddCashbox()" />
      </Hint.Popup:InfoboxContainer>
         
      <!-- Подсказка, которая будет показываться на последнем шаге -->
      <Hint.Popup:InfoboxContainer hintTemplate="wml!secondStepHint" groupKey="{{_hintsGroupKeySecond}}">
         <Controls.buttons:Button caption="Подключить" />
      </Hint.Popup:InfoboxContainer>
   </div>
</Controls.popupTemplate:Stack>
<!-- TypeScript -->
import {Control, IControlOptions} from 'UI/Base';
import {Activator} from 'Hint/Popup';
export default class MyClass extends Control<IControlOptions> {
   private _hintsGroupKeyFirst: string = 'OFD - addKkt';
   private _hintsGroupKeySecond: string = 'OFD - connectKkt';
   _afterMount(): void {
      Activator.activateGroup(this._hintsGroupKeyFirst);
   }
   _onAddCashbox(): void {
      Activator.activateGroup(this._hintsGroupKeySecond);
   }
}

В результате мы увидим всплывающие подсказки на каждом шаге.

Настройка повторного отображения группы всплывающих подсказок

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

Пример задания нового идентификатора группы

<!-- WML -->
<Hint.Popup:InfoboxContainer groupKey="new-hint-group-key">