Setting Up Layout and Formatting

Layout and formatting in the business application can be set up on the Layout and Formatting page in the designer of business application.

Open the designer

Set up displaying of the navigation bar and title bar in the Layout section:

• Navigation Bar Only. Default value

• Navigation Bar and Title Bar. To format the title bar, use JS, CSS, HTML files.

• Title Bar Only. To format the title bar, use JS, CSS, HTML files.

• Without Navigation Bar and Title Bar. Navigation bar and title bar are disabled. Element navigation is executed in the navigation menu.

NOTE. Title bar is available only in Windows OS.

The following formatting settings are available in the designer of business application:

• Set up title bar formatting.

• Set up navigation bar formatting.

• General setup of business application formatting.

NOTE. Title bar formatting setup is also available during general formatting setup of business application using a CSS file. Note that if you connect a CSS file on the Layout and Formatting page, custom formatting will be applied only for the configured business application. If you connect via the DBA.config.json file, custom formatting will be applied for all business applications in the repository.

If required, the files loaded for setting up layout and formatting of bars in business application can be used as external event handlers. The external event handler occurs on closing an object included in the business application and is set in the onCloseQuery field in the DBA.config.json file.

After setting up layout and formatting of business application set up menu structure.

Setting Up Title Bar Formatting

To set up title bar formatting:

1. Select the layout option in the Layout section:

• Navigation Bar and Title Bar.

• Only Title Bar.

2. Add title bar formatting files in the JS, CSS, HTM/HTML format in the Load Files section.

NOTE. The loaded files can contain several title formatting options.

3. Set parameters in the Set Up Title Bar Formatting section:

• Formatting File. In the drop-down list select one of the added title formatting settings files.

• Title Bar Height. Specify title bar height in pixels.

After executing the operations the title bar with configured formatting is displayed on opening the business application.

To save the specified settings, click the Finish button. After the button is clicked, the designer closes.

Setting Up Navigation Bar Formatting

To set up navigation bar formatting:

1. Select the layout option in the Layout section:

• Only Navigation Bar.

• Navigation and Title Bar.

2. Set the parameters in the Set Up Navigation Bar Formatting section:

• Show Icons in Navigation Bar. Select the checkbox to load and display menu item icons in the navigation bar. When the checkbox state is changed, the information dialog box opens informing about changing navigation bar display mode and recommending to check actuality of connected styles files. The check is relevant only in Windows OS. The checkbox is deselected by default.

If the checkbox is selected, icons can be loaded for each menu item in the Formatting section on the Menu Structure page in the designer of business application. Icons can be loaded only for menu items of the first and the second levels of navigation structure. If a custom icon is not loaded for the element, the default icon will be displayed.

• Disable Displaying of Second-Level Hierarchy Icons. Select the checkbox to display menu item icons located only on the first level of navigation structure. The checkbox is deselected by default and is available if the Show Icons in Navigation Bar checkbox is selected.

• Display Navigation Bar in Collapsed Form. Select the checkbox to hide the navigation bar on opening the business application in the web interface. The navigation bar in the collapsed form displays only icons of first-level menu items. To manage navigation bar displaying, use the Expand Bar and the Collapse Bar buttons in the navigation menu. The checkbox is deselected by default and is available if the Show Icons in Navigation Bar checkbox is selected.

To access second-level elements when the navigation bar is collapsed, hover the cursor on the icon of the required first-level element, after which a popup panel with its child elements is displayed. Displaying icons of second-level elements on the popup panel depends on the state of the Disable Displaying of Hierarchy Second-Level Icons checkbox.

After executing the operations on opening the business application in the web interface the navigation bar with configured formatting is displayed.

To save the specified settings, click the Finish button. After the button is clicked, the designer closes.

Examples of displaying navigation bar in Windows OS

Setting Up Business Application Formatting

NOTE. It is relevant only on opening the business application in Windows OS.

The following elements can be edited to set up formatting of designer of business application:

• Interface elements without icons. A CSS file is used to set the following: navigation bar display parameters, title bar display parameters, contents, colors, sizes, and fonts of various text, business application background color, as well as formatting of other interface elements not related with object images or icons. To set up business application formatting by means of a CSS file:

1. Create a CSS file with custom formatting settings in the S\assets folder, where S is the folder with installed designer of business applications.

2. Connect the custom CSS file to the business application. To do this, open the DBA.config.json file for edit, which is located in the S\config folder, where S is the folder with installed designer of business applications, and add the following command to it:

"externalCss":["assets/<CSS file name>.css"]
	

After executing the operations, custom formatting is set for all business applications in the repository.

Example of setting up formatting by means of a CSS file

/* Object display parameters in the object navigator */

.PPNavigatorBox .Content {
    font-size: 16px !important; /* font size */
    font-weight: bold; /* bold font face */
} 
 
/* Display settings for side panel active items */

.nav_item .nav__item--active .nav__title[_ngcontent-c9], .nav_item .nav__item--active .nav__title[_ngcontent-c11] {
    font-weight: bold !important; /* font style */

    color: #000000 !important; /* font color */

}
 
/* Side menu settings */

.page .page__side {
    border-right: 2px solid #000000; /* border color and width */

    background-color: #c0c0c0 !important; /* background color */

}
 
/* Title bar settings */

.page .head {
    border-bottom: 2px solid #000000; /* border color and width */

    background-color: #c0c0c0 !important; /* background color */

    font-size: 14px !important; /* font size */

    font-weight: bold; /* font style */

    color: #000000; /* font color */

}
 
/* Settings of button for expanding or collapsing side menu */

.page .trigger-aside {
    position: relative;
    width: 24px; /* width */

    height: 24px; /* height */

    color: #000000 !important; /* button color */

    padding: 0;
}
.page .trigger-aside__line {
    width: 18px; /* line width */

    height: 2px; /* line height */

    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. Business Application",
          "mainMenuLogo": "assets/design/img/PPlogo_sm.png",
          "pageMetadataLogo": "assets/design/img/PPlogo.png"
        }
      }
    }
  },
  "externalCss":["assets/user_design.css"]
}

• Icons and logos. Business application icons and logos are set as images in the folder with installed designer of business applications. The following icons and logos can be set up:

• Business application logo. To set a new business application logo, replace the favicon.ico file in the folder with installed designer of business applications.

• Start page logo. To set a new business application logo on the start page, open the DBA.config.json file for edit and change the following command in it:

"pageMetadataLogo": "assets/design/img/<PNG file name>.png"
	

• Title bar logo with expanded side menu. To set a new business application logo in the title bar, open the DBA.config.json file for edit and change the following command in it:

"mainMenuLogo": "assets/design/img/<PNG file name>.png"
	

• Title bar logo with collapsed side menu. To set a new business application logo in the title bar with collapsed side menu, open the DBA.config.json file for edit and change the following command in it:

"mainMenuLogoMini": "assets/design/img/<PNG file name>.png"
	

• Standard class icons. To set new icons for business application standard classes, change the files glbClsImg16.png, glbClsImg16.retina.png and glbClsImg32.png in the S\assets\platform_modules\build\img\metabase folder, where S is the folder with installed designer of business applications.

NOTE. Custom class icons cannot be edited.

• Business application name. To set a new name for the business application tab, open the DBA.config.json file for edit and change the following command in it:

"breadcrumbRootTitle": "<business application tab name>"