Настройка разметки и оформления

Настройка разметки и оформления позволяет выбрать вариант отображения панелей веб-приложения:

• Только панель навигации. Отображение только панели навигации (бокового меню) используется по умолчанию, структура меню настраивается в разделе «Структура меню»;

• Панель навигации и заголовка. Для настройки панели заголовка используются файлы оформления заголовка в форматах JS, CSS, HTML;

• Только панель заголовка. Отображение только панели заголовка позволяет отключить панель навигации и использовать настройки оформления заголовка в форматах JS, CSS, HTML;

• Без панелей навигации и заголовка. Позволяет отключить боковое меню и панель заголовка. Навигация осуществляется с помощью навигационного меню.

Для настройки отображения панели заголовка выполните шаги:

2. В конструкторе бизнес-приложений перейдите в раздел  «Разметка и оформление».

3. Для настройки отображения панели заголовка:

• в области «Разметка» выберите с помощью кнопок один из вариантов разметки страницы:

•  панель навигации и заголовка;

•  только панель заголовка;

• в области «Загрузка файлов» добавьте файлы с оформлением панели заголовка в форматах JS, CSS, HTM/HTML;

Примечание. Файлы в формате css также можно подключить с помощью файла DBA.config.json.

• в области «Настройка оформления панели заголовка» выберите один из файлов с настройкой оформления и укажите высоту панели заголовка в пикселях.

Примечание: В списке загруженных файлов может быть несколько вариантов оформления заголовка. Используемый вариант задаётся в области «Настройка оформления панели заголовка».

4. Для сохранения настроек и выхода из конструктора нажмите кнопку «Готово».

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

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

Расширенная настройка оформления

Помимо настроек в разделе «Разметка и оформление» пользовательское оформление бизнес-приложений можно также задать с помощью файлов, расположенных в папке установки конструктора бизнес-приложений. Данные файлы позволяют настроить следующие элементы оформления:

• Элементы интерфейса без пиктограмм. Формат отображения боковой панели, формат отображения верхней панели, содержание, цвета, размеры и шрифты различных надписей, цвет фона бизнес-приложения, а также оформление иных элементов интерфейса, не связанных с изображениями или пиктограммами объектов, задаются через файл в формате CSS. Для настройки оформления бизнес-приложения через CSS-файл:

1. Создайте CSS-файл с пользовательскими настройками оформления в папке «S\assets», где S - папка установки конструктора бизнес-приложений;

2. Подключите пользовательский CSS-файл в бизнес-приложение. Для этого откройте на редактирование файл DBA.config.json, расположенный в папке «S\config», где S - папка установки конструктора бизнес-приложений, и добавьте в него следующую команду:

"externalCss":["assets/<наименование CSS-файла>"]

где <наименование CSS-файла> - наименование пользовательского CSS-файла с настройками оформления.

После выполнения действий будет задано пользовательское оформление для всех бизнес-приложений в репозитории.

Примечание. При подключении CSS-файла через страницу «Разметка и оформление» пользовательское оформление будет задано только для настраиваемого бизнес-приложения.

Пример настройки оформления при помощи CSS-файла

/* Настройки отображения объектов в навигаторе объектов */
.PPNavigatorBox .Content {
    font-size: 16px !important; /* размер шрифта */
    font-weight: bold; /* жирное начертание */
} 
 
/* Настройки отображения активных пунктов на боковой панели */
.nav_item .nav__item--active .nav__title[_ngcontent-c9], .nav_item .nav__item--active .nav__title[_ngcontent-c11] {
    font-weight: bold !important; /* начертание */
    color: #000000 !important; /* цвет шрифта */
}
 
/* Настройки бокового меню */
.page .page__side {
    border-right: 2px solid #000000; /* цвет и толщина границы */
    background-color: #c0c0c0 !important; /* цвет фона */
}
 
/* Настройки панели заголовка */
.page .head {
    border-bottom: 2px solid #000000; /* цвет и толщина границы */
    background-color: #c0c0c0 !important; /* цвет фона */
    font-size: 14px !important; /* размер шрифта */
    font-weight: bold; /* начертание */
    color: #000000; /* цвет шрифта */
}
 
/* Настройки кнопки для скрытия/раскрытия бокового меню */
.page .trigger-aside {
    position: relative;
    width: 24px; /* ширина */
    height: 24px; /* высота */
    color: #000000 !important; /* цвет кнопки */
    padding: 0;
}
.page .trigger-aside__line {
    width: 18px; /* ширина линии */
    height: 2px; /* высота линии */
    position: absolute;
    top: 7px;
    left: 50%;
    margin-left: -7px;
}

{
  "targetRepo": "TEST_REPOSITORY",
  "targetApp": "TEST_APP",
  "ppServiceUrl": "http://SampleServer/FPBI_App_v9.x/axis2/services/PP.SOM.Som",

  "locale": ["ru"],
  "repositories": {
    "TEST_REPOSITORY": {
      "repoIdent": "TEST_REPOSITORY",
      "apps": {
        "TEST_APP": {
          "appIdent": "TEST_APP",
          "breadcrumbRootTitle": "FORESIGHT. Бизнес приложение",
          "mainMenuLogo": "assets/design/img/PPlogo_sm.png",
          "pageMetadataLogo": "assets/design/img/PPlogo.png"
        }
      }
    }
  },
  "externalCss":["assets/user_design.css"]
}

• Пиктограммы и логотипы. Пиктограммы и логотипы бизнес-приложения задаются в формате изображений в папке установки конструктора бизнес-приложений. Для настройки доступны следующие пиктограммы и логотипы:

• Логотип бизнес-приложения. Для задания нового логотипа бизнес-приложения измените файл favicon.ico, расположенный в папке установки конструктора бизнес-приложений;

• Логотип на стартовой странице. Для задания нового логотипа бизнес-приложения на стартовой странице откройте файл DBA.config.json на редактирование и измените в нём следующую команду:

"mainMenuLogo": "assets/design/img/<наименование PNG-файла>"

где <наименование PNG-файла> - наименование файла изображения логотипа в формате PNG, который требуется заменить;

• Логотип в навигаторе объектов. Для задания нового логотипа бизнес-приложения в навигаторе объектов откройте файл DBA.config.json на редактирование и измените в нём следующую команду:

"pageMetadataLogo": "assets/design/img/<наименование PNG-файла>"

где <наименование PNG-файла> - наименование файла изображения логотипа в формате PNG, который требуется заменить;

• Пиктограммы стандартных классов. Для задания новых пиктограмм стандартных классов бизнес-приложения измените файлы glbClsImg16.png, glbClsImg16.retina.png и glbClsImg32.png, расположенные в папке «S\assets\platform_modules\build\img\metabase», где S - папка установки конструктора бизнес-приложений;

Примечание. Пиктограммы пользовательских классов недоступны для редактирования.

• Название бизнес-приложения. Для задания нового заголовка вкладки бизнес-приложения откройте файл DBA.config.json на редактирование и измените в нём следующую команду:

"breadcrumbRootTitle": "<название бизнес-приложения>"

где <название бизнес-приложения> - заголовок вкладки бизнес-приложения, который требуется заменить.

См. также:

Построение бизнес-приложения | Формирование и установка обновлений приложения