Skip to content

Latest commit

 

History

History
126 lines (86 loc) · 9.33 KB

index.md

File metadata and controls

126 lines (86 loc) · 9.33 KB
Raw

Виджеты и Главная страница: наш вайб

Вайб — это главная страница Битрикс24, которая заменяет привычную Ленту новостей и позволяет создавать более персонализированный интерфейс (подробности в статье).

Администратор настраивает страницу в конструкторе из готовых блоков и виджетов так же, как это делается в Сайтах. Кроме системных виджетов самого Битрикс24 разработчики могут добавлять собственные с помощью соответствующих методов REST API.

{% note info %}

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

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

{% endnote %}

Кроме того, Вайб, созданный на вашем Битрикс24, можно экспортировать в виде готового решения для публикации в Маркет.

Принцип работы виджетов

Front-end виджета реализуется на базе шаблонизатора Vue. Данные для отображения виджет получает, делая запрос к внешнему обработчику.

Фактически, добавляя свой виджет в Битрикс24, вы должны передать верстку шаблона на базе Vue, необходимые для нее CSS-классы и адрес обработчика, который будет отвечать за передачу данных в шаблон Vue.

Директивы Vue

В виджетах для Вайб мы поддерживаем следующие директивы и конструкции Vue:

  • переменные not_var{{ your_variable_name }}
  • условный оператор v-if / v-else
  • условные атрибуты :class, :disabled и т.д.
  • цикл v-for
  • выражения, например, not_var{{ number + 1 }}
  • обработчики @click и v-on:click

Интерактивные действия

В виджетах нельзя добавлять собственный JS-код, поэтому в качестве функции-обработчика событий типа @click и v-on:click могут быть использованы только следующие предопределенные функции:

  • fetch(?params) — вызывает обработчик виджета для получения новых данных, передавая в обработчик указанные вами параметры params;
  • openApplication(?params) — открывает слайдер вашего приложения с возможностью передачи произвольных параметров params. Фактически, это способ вызвать openApplication из интерфейса виджета Вайба;
  • openPath(url) — открывает в слайдере страницу Битрикс24 по указанному url. Фактически, это способ вызвать openPath из интерфейса виджета Вайба.

Как работает виджет {#anchor-handler}

Самая важная часть функционала заключается в использовании fetch(?params) и вашего обработчика виджета.

  1. Когда администратор Битрикс24 добавляет ваш виджет на страницу Вайба или когда обычный пользователь открывает уже опубликованную страницу Вайб на своем портале, Битрикс24 делает запрос к URL-обработчика виджета, указанного вами при регистрации виджета.
  2. Ваш обработчик возвращает некоторую определенную вами структуру данных в виде JSON-строки.
  3. Vue выполняет код шаблона вашего виджета, подставляя в него данные, полученные от обработчика на шаге 2. Таким образом, формируется изначальный полноценный внешний вид виджета.
  4. В случае, если вы использовали функцию fetch (например, с параметрами {'action': 'getItems'}) в вашем шаблоне при нажатии на некую ссылку, то Битрикс24 снова вызовет обработчик вашего виджета, передав туда те самые параметры {'action': 'getItems'} в POST-запросе.
  5. Ваш обработчик, получив запрос и проанализировав входные параметры, в ответ должен сформировать новый набор данных и вернуть его снова в виде JSON-строки. Этот набор может быть как полным, так и частичным для экономии трафика и повышения скорости работы виджета.
  6. Новые полученные данные будут снова подставлены в ваш шаблон.

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

Примеры синтаксиса Vue для виджетов Вайб

Локализация

Используйте стандартный синтаксис обращения к переменным Vue для вызова $Bitrix.Loc.getMessage, чтобы вывести значение константы в видимой части верстки:

<h3 class="w-title">{{ $Bitrix.Loc.getMessage('W_TITLE') }}</h3>

Используйте синтаксис «условных» атрибутов Vue, чтобы присвоить значение $Bitrix.Loc.getMessage нужному атрибуту узла:

<input
    type="text"
    class="task-widget__filter"
    :placeholder="$Bitrix.Loc.getMessage('W_FILTER')"
    v-model="taskFilter"
/>

Переменные

Используйте стандартный синтаксис обращения к переменным Vue, чтобы вывести значения в видимой части верстки:

<td class="task-widget__cell">not_var{{ task.id }}</td>

Используйте синтаксис «условных» атрибутов Vue, чтобы присвоить значение переменной нужному атрибуту узла:

<img :src="user.avatar" class="task-widget__avatar" />

Используйте логические выражения для применения опциональных классов:

<a href="#" :class="{ 'task-widget__link--disabled': currentPage === 1 }">

Использование переменных в openPath

Используйте апострофы, чтобы обращаться к переменным Vue при формировании нужного пути:

<tr
    v-for="(task, index) in taskItems"
    :key="task.id"
    @click="openPath(`/company/personal/user/${task.responsibleId}/tasks/task/view/${task.id}/`)"
>

Используйте объединение строк для формирования пути:

<tr
    v-for="(task, index) in taskItems"
    :key="task.id"
    @click="openPath('/company/personal/user/' + task.responsibleId + '/tasks/task/view/' + task.id)"
>

Методы для работы с виджетами

#| || Метод | Описание || || landing.repowidget.register | Добавляет виджет || || landing.repowidget.unregister | Удаляет виджет || || landing.repowidget.getlist | Возвращает список виджетов || || landing.repowidget.debug | Включает режим отладки || |#