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

Для настройки разметки и оформления панелей в конструкторе бизнес-приложений используйте страницу «Разметка и оформление» в окне «Бизнес-приложение <наименование объекта>».

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

Выберите вариант отображения панелей в разделе «Разметка»:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Нажмите кнопку «Готово».

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

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

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

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

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

• элементы интерфейса без пиктограмм. Формат отображения панели навигации, формат отображения панели заголовка, содержание, цвета, размеры и шрифты различных надписей, цвет фона бизнес-приложения, а также оформление иных элементов интерфейса, не связанных с изображениями или пиктограммами объектов, задаются через файл в формате 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_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"

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

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

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

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

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

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

См. также:

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