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

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

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

• в веб-приложении установите необходимые флажки:

• Отображать панель навигации;

• Отображать панель заголовка;

• в настольном приложении выберите необходимый вариант:

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

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

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

• Без панелей навигации и заголовка.

В зависимости от выбранного варианта будет отображаться:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для сохранения настроек:

• в веб-приложении нажмите кнопку «Сохранить»;

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

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

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

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

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

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

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

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

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

При активации флажка «Отображать пиктограммы в панели навигации» также становятся доступными следующие флажки:

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

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

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

Если панель навигации отображается в свёрнутом виде и размер окна, в котором открыт веб-интерфейс бизнес-приложения, не позволяет отобразить все пункты меню, то на панели появляются кнопки «Вниз» и «Вверх» для её прокрутки. Также доступна прокрутка панели навигации с помощью колёсика мыши.

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

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

Для сохранения настроек:

• в веб-приложении нажмите кнопку «Сохранить»;

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

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

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

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

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

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

См. также:

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

Копировать ссылку на страницу

Наверх

Нашли ошибку? Выделите текст с ошибкой и нажмите кнопку "Сообщить об ошибке" или CTRL+ENTER.

Справочная система на версию 10.4 от 09/04/2024, © ООО «ФОРСАЙТ»,