...

2.2. Настройка главной страницы

Тема в разделе "Краткое руководство по созданию Low-code решений", создана пользователем ELMA365, 3 май 2023.

  1. ELMA365

    ELMA365 Moderator

    Настроим главную страницу системы, чтобы пользователю было проще в ней ориентироваться.

    [​IMG]

    Главная страница по умолчанию


    Важно

    Сразу после авторизации пользователь попадает на главную страницу ELMA365. Здесь он может запускать бизнес-процессы, назначать задачи, быстро переходить в нужные разделы системы.


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

    Важно


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

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

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



    Настроим главную страницу. Разместим на ней две колонки:
    • в левой колонке дадим пользователю возможность оформить отпуск или воспользоваться другими сервисами организации;
    • в правой напишем краткую информацию о компании.

    Перед этим удалим с главной страницы текущие виджеты.

    [​IMG]
    Удаление виджета по умолчанию


    Затем настроим отображение страницы в две колонки. Для этого перейдём в Настройки страницы и выберем необходимое количество колонок.


    [​IMG]
    Переход в настройки страницы


    Перейдём в конструктор левой колонки и настроим её.
    Все доступные виджеты размещены в правой части конструктора.

    Важно


    Все виджеты для удобства сгруппированы по смыслу:
    • Размещение элементов — виджеты в этой группе позволяют размещать информацию на вкладках, в колонках, в меню и на панелях;
    • HTML-виджеты позволяют использовать HTML-код для отображения информации;
    • Простые виджеты позволяют вывести кнопку или надпись;
    • Виджеты отчетов позволяют вывести информацию в виде графика, диаграммы или таблицы;
    • Виджеты системных разделов, которые используются в них. Например, План проекта в разделе Проекты;
    • Виджеты для работы с данными, которые помогают отобразить данные, хранящиеся в системе. Например, Лист согласования документа;
    • Виджеты для страниц помогают организовать информацию на странице: вывести заголовок или её содержимое;
    • Виджеты для внешнего портала помогают организовать его интерфейс для внешних пользователей: вывести доступные на портале страницы или заголовок с логотипом и информацией о пользователе;
    • Другие виджеты.


    Изменим заголовок страницы. Для этого выделим виджет Надпись и перейдём к его настройкам.


    [​IMG]
    Настройка виджета «Надпись»


    Изменим текст в настройках виджета.


    [​IMG]
    Настройка виджета «Надпись»


    Удалим стандартный виджет Код.


    [​IMG]
    Удаление виджета «Код»


    Добавим необходимые виджеты. Для этого перетащим нужные виджеты с боковой панели, используя Drag-and-Drop.

    Добавим панель с заголовком Кадровые сервисы и сделаем её сворачиваемой.


    [​IMG]
    Настройка панели с заголовком


    [​IMG]
    Панель «Кадровые сервисы»


    Внутри панели добавим виджет Колонки.


    [​IMG]
    Виджет «Колонки»


    [​IMG]
    Виджет «Колонки»


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


    [​IMG]
    Виджет «Панель с заголовком»


    Внутрь панели поместим виджет Текст с описанием сервиса и виджет Кнопка, при нажатии на которую будет создаваться элемент приложения Отпуск.


    [​IMG]
    Настройка виджета «Текст»

    [​IMG]
    Настройка виджета «Кнопка»


    По аналогии добавим ещё несколько панелей:
    • Командировку в Кадровых сервисах;
    • Заявку на технику и IT-инцидент в IT-сервисах.
    Мы добавим эти панели в качестве наглядного примера того, как может выглядеть главная страница. Кнопки в этих сервисах пока не будут работать, т. к. мы не настроили для них приложения и бизнес-процессы.


    [​IMG]
    Левая колонка в дизайнере интерфейсов


    [​IMG]
    Главная страница


    Перейдём в конструктор правой колонки главной страницы и настроим её, используя несколько виджетов:
    • Заголовок страницы;
    • Содержимое страницы;
    • Текст.


    [​IMG]
    Правая колонка в дизайнере интерфейсов


    [​IMG]
    Настроенная правая колонка


    Если необходимо создать главную страницу, используя бренд-бук организации, вы можете указать HTML-стили для любого виджета в его настройках на вкладке Системные или использовать виджет Код.

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


    [​IMG]
    Редактирование панели кнопок


    [​IMG]
    Создание кнопки


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

    [​IMG]

    Главная страница