Настроить интерфейс приложения

Продукты
Все продукты

Приложение при создании уже содержит определенный набор компонентов, который зависит от выбранного шаблона. Например, из шаблона “Домашняя страница” в приложение при создании будут добавлены элементы для отображения аналитических данных, а из шаблона “Данные и бизнес-процессы” — страница реестра и страница записи с минимальным набором компонентов. Дальнейшая настройка приложения выполняется в no-code дизайнере.

Все приложения, доступные для редактирования, отображаются в Центре приложений, доступному по клику на btn_system_designer.png в правом верхнем углу (Рис 1).

Рис. 1 — Центр управления приложениями
add_new_app_2.png

Здесь же можно создать новое приложение или установить созданное ранее.

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

Рассмотрим настройку интерфейса на примере приложения для начисления заработной платы сотрудникам.

Пример. Необходимо для приложения “Финансовые компенсации” настроить интерфейс раздела “Начисления”. Раздел будет содержать страницу реестра, страницу записи.

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

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

Расчет компенсаций должен выполняться бизнес-процессом. Запуск бизнес-процесса должен инициироваться нажатием кнопки на странице записи.

На заметку. Подробнее настройка компонентов описана в статье Freedom UI дизайнер.

В общем случае настройка интерфейса приложения предполагает следующие шаги:

  1. Создание структуры приложения путем добавления всех необходимых разделов и других элементов. В нашем примере это разделы Начисления, Бонусы, Штрафы.
  2. Настройка страницы записи. В данной статье этот шаг рассмотрен на примере страницы записи раздела Начисления.
  3. Настройка страницы реестра. В данной статье этот шаг рассмотрен на примере страницы реестра раздела Начисления.
  4. Добавление на страницы необходимых элементов :
    • полей и источников данных;

    • бизнес-процессов и кейсов;

    • дашбордов;

    • кнопок, надписей, списков и других компонентов на страницах реестра и страницах записей с учетом требований корпоративного стиля.

Для реализации примера нам потребуется приложение "Финансовые компенсации", созданное по шаблону “Данные и бизнес-процессы”. Подробнее: Создать пользовательское приложение.

Шаг 1. Настроить структуру приложения 

  1. Перейдите в Центр приложений по кнопке btn_system_designer.png в правом верхнем углу.
  2. Откройте приложение “Финансовые компенсации”.
  3. В блоке Разделы и навигация по кнопке Новый раздел Freedom UI создайте раздел Начисления:
    1. Выберите иконку раздела/
    2. В поле Имя укажите название раздела.
    3. В поле Описание при необходимости добавьте информацию о назначении раздела.
    4. Нажмите кнопку Создать (Рис. 2).
      Рис. 2 — Добавление раздела
      New%20section.png
  4. Если необходимо, то добавьте дополнительные страницы , используя для этого имеющиеся шаблоны.
  5. Повторите шаги 3–5 для всех разделов, которые необходимо добавить в приложение.

Шаг 2. Настроить страницу записи приложения 

  1. Откройте страницу записи приложения “Финансовые компенсации”.
  2. Настройте разметку страницы. Интерфейс страницы уже содержит набор компонентов согласно шаблону, в частности остров с гибким контейнером и кнопками, а также два острова слева и остров справа (Рис. 3).

    Рис. 3 — Минимальный набор компонентов страницы записи
    designer_page_template_1_0.png

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

    На заметку. Если вам необходимо добавить на страницу несколько однотипных элементов, то вы можете добавить на холст только первый элемент, а затем скопировать его нужное количество раз, наведя курсор и нажав btn_copy.png. После этого нужно отредактировать настройки каждого добавленного элемента.

  3. В верхнем левом острове будут содержаться данные профиля сотрудника:
    1. Добавьте элемент Надпись, например, с заголовком “Данные сотрудника”.
    2. Разместите в острове следующие поля и настройте их:
      • Сотрудник (справочное);
      • Должность сотрудника (справочное);
      • Департамент (справочное);
      • Тип трудового договора (справочное);
      • Тип оплаты труда (справочное).
        Рис. 4 — Добавление полей в остров
        designer_page_template_add_fields_0.png
    3. Аналогичным образом в нижнем левом острове настройте поля для ввода данных о периоде начисления:
      • Период начисления (справочное);

      • Рабочих дней в периоде (числовое);

      • Ответственный (справочное);

      • Компенсация выплачена (логическое).

  4. В остров снизу добавьте четыре вкладки: Начисления, гросс, Удержания, Бонусы, Штрафы. Переименуйте или удалите вкладки, добавленные по умолчанию. Добавьте на вкладки группы и поля для отображения необходимых данных.

    На вкладке Бонусы будут использованы данные из раздела Бонусы приложения “Финансовые компенсации”. Для более удобного добавления записей разместите на вкладке группу “Бонусы за период начисления” и добавьте в шапку кнопку-иконку +, по нажатию которой будет открываться страница создания новой записи указанного объекта (Рис. 5).

    Рис. 5 — Настройка вкладок
    gif_modify_button_freedomui.gif
  5. В остров справа добавьте дашборды из группы Графики:
    • “Показатель”, который будет отображать тарифную ставку сотрудника.

    • “Показатель”, который будет отображать количество дней отпуска, доступное сотруднику в выбранный период.

    • “Показатель”, который будет отображать количество дней отпуска, использованных сотрудником в выбранный период.

    • “Показатель”, который будет отображать количество дней больничного, доступное сотруднику в выбранный период.

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

    • “Сплайн”, который будет отображать продуктивность сотрудника в разрезе года по сравнению с данными предыдущего года.

  6. Добавьте в верхний остров кнопку “Пересчитать”, по которой будет выполняться обновление данных в результате запуска предварительно созданного бизнес-процесса (Рис. 6).
    Рис. 6 — Добавление дашбордов и кнопки
    designer_page_template_add_dashboards_0.png
  7. Примените изменения по кнопке Сохранить в левом верхнем углу дизайнера.

Шаг 3. Настроить реестр 

  1. В блоке Страницы откройте страницу с реестром, созданную для нужного раздела. Интерфейс уже содержит минимальный набор компонентов (Рис. 8). Каждый из элементов вы можете копировать, редактировать, переместить или удалить.
    Рис. 7 — Минимальный набор компонентов страницы реестра
    designer_page_template_section.png
  2. Настройте компонент Группы, который позволит сегментировать записи раздела. Например, вы можете сделать сегментацию начислений по периодам: папки “2020”, “2021”, “2022”, каждая из которых содержит вложенные “1-й квартал”, “2-й квартал”, “3-й квартал”, “4-й квартал”. Компонент Меню управления группами позволит скрывать дерево групп.

  3. Настройте реестр раздела Финансовые компенсации:

    1. Закрепите колонку Дата создания по нажатию кнопки btn_more.pngЗакрепить (Рис. 8).
      Рис. 8 — Закрепление колонки
      designer_page_template_pin_button.png
    2. В таком же меню колонки Создал выберите Спрятать чтобы эта информация не отображалась пользователям в реестре.
    3. Добавьте в реестр колонки ФИО сотрудника, Должность. Для этого нажмите кнопку btn_add.png → отметьте нужные поля → нажмите Выбрать (Рис. 9).
      Рис. 9 — Выбор колонок
      designer_page_template_choose_column_0.png
  4. Добавьте дашборды “Текущий период начисления” и “Количество рассчитанных начислений в текущем периоде” (Рис. 10).
    Рис. 10 — Добавление дашбордов на страницу реестра
    designer_page_dashboards_section.png
  5. Примените изменения в интерфейсе раздела по нажатию кнопки Сохранить в левом верхнем углу приложения.