Каталог решений - JSON примеры меню B2B web-приложения "Личный кабинет" на движке EDIbot для телефона/десктопа

JSON примеры меню B2B web-приложения "Личный кабинет" на движке EDIbot для телефона/десктопа

JSON примеры меню B2B web-приложения "Личный кабинет" на движке EDIbot для телефона/десктопа

В наличии

Рассмотрим на примерах работу движка EDIbot при организации меню B2B «Личного кабинета» (мобильная версия, версия десктоп) грузовладельца WMS-системы.

Категория:

Описание

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

 

EDIbot формирует страницы веб-приложения по получаемым REST запросом от бэка JSON файлам, например, для данного варианта меню JSON файл будет выглядеть следующим образом — https://jsonwebapp.com/tmp/menu_vert_2level.json

Если проанализировать структуру JSON, то мы увидим, что там есть как атрибуты HTML (class, style, target, …), так и специфичные атрибуты блоков, определяющие логику frontend стороны.

Например, атрибут "offline" означает, требуется ли сохранить страницу/файл для доступа при отсутствии интернета, usePush — запрашивать ли отправку push-уведомлений у пользователя. 

А теперь давайте попробуем его поменять, например, добавим бейдж и посмотрим на результат. Для этого возьмем "песочницу" движка https://jsonwebapp.com/sandbox, вставив туда содержимое файла, и добавим следующий код, в блок "Выдача-Созданы 2".

  ,"blocks": [
    {
      "type": "badge",
      "text": 2,
      "attrs": {
        "className": "is-rounded is-large"
      }
    }
  ]

И сразу справа без перегрузок получим вот такой внешний вид страницы:

(если вдруг не получилось, то вот файл целиком)

Также мы можем сделать меню трехуровневым, правда, это немного сложнее, чтобы делать это вручную (ссылка на JSON). 

Или без лишнего вертикального разделителя (ссылка на JSON):

UPD:

Для удобства просмотра на мобильном или в полноэкранном режиме, Вы можете воспользоваться прямыми ссылками: 

Вариант меню простой — https://jsonwebapp.com/menu_vert_2level/json

Вариант меню с бейджем- https://jsonwebapp.com/menu_vert_2level_badge/json

Вариант меню 3 уровня — https://jsonwebapp.com/menu_vert_3level/json 

Вариант меню 3 уровня без разделителя — https://jsonwebapp.com/menu_vert_3level_clear/json

 

 

Надеюсь, моя публикация была Вам полезна и сэкономит Ваше время, ссылка на все публикации SizovE.

Подписывайтесь на мой канал (наверху), будет много интересного бесплатного контента 🙂

 

has been added to your cart:
Оформление заказа