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

Настройка разметки и оформления бизнес-приложения выполняется на странице «Разметка и оформление» в конструкторе бизнес-приложения.

Для открытия конструктора

Настройте отображение панели навигации и панели заголовка в разделе «Разметка»:

• Только панель навигации. По умолчанию;

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

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

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

Примечание. Панель заголовка доступна только в ОС Windows.

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

• настройка оформления панели заголовка;

• настройка оформления панели навигации;

• общая настройка оформления бизнес-приложения.

Примечание. Настройка оформления панели заголовка также возможна и при общей настройке оформления бизнес-приложения с помощью файла в формате CSS. Однако следует учитывать, что при подключении CSS-файла на странице «Разметка и оформление» пользовательское оформление будет применено только для настраиваемого бизнес-приложения, а при подключении через файл DBA.config.json пользовательское оформление будет применено для всех бизнес-приложений в репозитории.

Файлы, загруженные для настройки разметки и оформления панелей в бизнес-приложении, при необходимости могут использоваться в качестве внешнего обработчика событий. Внешний обработчик событий наступает при закрытии объекта, входящего в состав бизнес-приложения, и задаётся в поле onCloseQuery в файле DBA.config.json.

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

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

Для настройки оформления панели заголовка:

1. Выберите один из вариантов разметки в разделе «Разметка»:

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

• Только панель заголовка.

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

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

3. Задайте параметры в разделе «Настройка оформления панели заголовка»:

• Файл оформления. Выберите в раскрывающемся списке один из добавленных файлов с настройкой оформления панели;

• Высота панели заголовка. Укажите высоту панели заголовка в пикселях.

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

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

Настройка оформления панели навигации

Для настройки оформления панели навигации:

1. Выберите один из вариантов разметки в разделе «Разметка»:

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

• Панель навигации и заголовка.

2. Задайте параметры в разделе «Настройка оформления панели навигации»:

• Отображать пиктограммы в панели навигации. Установите флажок для загрузки и отображения пиктограмм элементов меню на панели навигации. При изменении состояния флажка выводится информационное окно с сообщением об изменении режима отображения панели навигации и с рекомендацией о проверке актуальности подключённых файлов стилей. Проверка актуальна только в ОС Windows. По умолчанию флажок снят.

При установленном флажке доступна загрузка пиктограмм для каждого элемента меню в разделе «Оформление» на странице «Структура меню» конструктора бизнес-приложения. Пиктограммы могут загружаться только для элементов меню первого и второго уровней структуры навигации. Если для элемента не загружена пользовательская пиктограмма, то будет отображаться пиктограмма по умолчанию;

• Отключить отображение пиктограмм второго уровня иерархии. Установите флажок для отображения пиктограмм элементов меню, расположенных только на первом уровне структуры навигации. По умолчанию флажок снят и доступен при установленном флажке «Отображать пиктограммы в панели навигации»;

• Отображать панель навигации в свёрнутом виде. Установите флажок для скрытия панели навигации при открытии бизнес-приложения в веб-интерфейсе. В свёрнутом виде на панели навигации отображаются только пиктограммы элементов меню первого уровня. Для управления отображением панели навигации используйте кнопки  «Развернуть панель»,  «Свернуть панель» в навигационном меню. По умолчанию флажок снят и доступен при установленном флажке «Отображать пиктограммы в панели навигации».

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

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

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

Примеры отображения панели навигации в ОС Windows

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

Примечание. Актуально только для открытия бизнес-приложения в ОС Windows.

Для настройки оформления бизнес-приложения доступно изменение следующих элементов:

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

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

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

"externalCss":["assets/<наименование 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_v10.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 на редактирование и измените в нём следующую настройку:

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

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

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

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

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

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

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

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

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