Skip to main content

About the UI files

Bravura Security Fabric creates its web GUI at run time from Legacy and Angular portions of the skin. The Legacy web GUI is constructed from HTML code snippets from the skin with pieces dynamically replaced with session-specific data. The Angular web GUI is dynamically constructed by client-side TypeScript.

Skin files

Files for the Legacy portion of the skin are located in two main directories: \<instance>\skin\ and \<instance>\wwwdocs\ .

Files for the Angular portion of the skins are located in the \<instance>\ui\ directory.

The skin directory

The Legacy portion of the skin consists of Z and HTML files located in the \<instance>\skin\default\ directory :

  • Z files contain the code snippets loaded by Bravura Security Fabric . These files are not meant to be human-readable. They have a .z extension.

  • HTML files each contain a widget (an HTML component of the GUI); for example, the date-select fields. They have a .html extension.

Within the \<instance>\skin\default\ directory, there is one subdirectory for each language that you have installed. For example, the \<instance>\skin\default\en-us\ directory is for the default skin and contains American English.

The \<instance>\skin\widget\ directory contains the widget HTML component files for the GUI.

The wwwdocs directory

The Legacy portion of the skins includes files located in the \ <instance>\wwwdocs\ directory:

  • Static HTML files for the specified language and locale

  • JavaScript files

Within the \<instance>\wwwdocs\<skin ID>\ directory, there are subdirectories for the static HTML, and JavaScript customizations. For example:

  • <lang>-<locale>\ contains the static HTML files. A separate directory exists for each language that was generated for the skin ID.

  • js\ contains the minimized JavaScript customizations for the skin.

  • js\<lang>-<locale>\ contains the JavaScript customizations for the specified language.

The ui directory

The Angular portion of the skin consists of files located in the \<instance>\ui\ directory:

  • Index.html is the page that loads when a user visits Bravura Security Fabric . It is dynamically updated when a user interacts with Bravura Security Fabric .

  • Javascript files

  • Font files

  • Image files such as icons

  • JSON files for languages and language-specific page to URL mappings

Files in the base directory make up the core of the application. The files are all generated when the skin is built and should not be manipulated directly.

In \<instance>\ui\assets\, there are subdirectories for images and localization files; for example:

  • images\ contains image files such as icons.

  • localization\ contains language files and page-to-URL mappings for languages other than American English; for example, fr-fr.json.

    The localization folder is only present when a language other than American English is installed. The American English language and route code are bundled in the base \<instance>\ui\ directory files.

Design files

The "building blocks" for the skin are a set of m4, KVGroup, JavaScript, TypeScript and Sassy Cascading Style Sheet (SCSS) files located in the \<instance>\design\ directory. They are used by a built-in script, make.bat, to generate the skin files.

In general, Angular code is contained in \ <instance>\design\src\ui\ . Legacy code is contained in other directories within \ <instance>\design\src\.

Legacy skin design files

The following files are used to build the Legacy portions of the skins:

  • KVGroup files determine the text that Bravura Security Fabric displays to users. These files are written in KVGroup format and have a .kvg extension.

    Each language requires its own set of KVGroup files. For American English, these files are named en-us-language.kvg and en-us-errmsg.kvg.

    m4 files control the design of web pages, including the placement of fields, buttons, and text. m4 files contain macros that are expanded into longer strings. They have an .m4 extension.

  • JavaScript files contain code for JavaScript features, such as the confirm action functionality for delete buttons. They have a .js extension.

Angular skin design files

The following files are used to build the Angular portions of the skin:

  • Angular unit tests verify the functionality of the UI. These are TypeScript files with the extension *.spec.ts

  • Angular template files control the design of the Angular pages. These are HTML files with the extension *.html.

  • Angular files contain code which controls the web application. For example, some files map each URL to a page. These are TypeScript files and with the extensions *.component.ts, *.service.ts, and *.pipe.ts.

  • Angular build configuration files are scripts which control how the web application is packaged. Usually these have *.js or *.json extensions.

  • Sassy cascading style sheet (SCSS) files to modify the look and formatting of the GUI. They have a .scss extension.

    For more information about the Angular framework, visit https://angular.io/docs.

    Tags in <lang>-<locale>-errmsg.kvg cannot be used in JavaScript or TypeScript files. As a result you cannot include these tags in the Angular portion of the skin, or the portions of the Legacy skin that use JavaScript. Tags in <lang>-<locale>-language.kvg can be used everywhere.

    SCSS is an extension of CSS, which means that every valid CSS file is also a valid SCSS file.

Design file directories

The \<instance>\design\ directory is organized into multiple subdirectories. In particular:

  • connector-pack\src\common\ Houses original, or "source", language files installed with Connector Pack. In general, you should not modify this directory.

  • custom\ This is where you create custom files, based on the originals, and make your edits.

    The base custom\ directory is used for global customizations; that is, the changes apply to all skins unless there is an override for a specific skin.

    If you make changes in files at this level, you need to regenerate all skins to apply the changes.

  • custom\ui\ This is a directory that you have to manually create within the custom\ directory where you add customizations that only apply to the Angular portion of the skin.

  • examples\ Contains examples of page style files. Shipped examples include:

    • customLogo (sample UI to add a customize logo). See Customize the logo using the sample skin.

    • ska (default UI that is specifically for use with the secure kiosk account (SKA))

    • unbranded (sample UI to remove branding)

  • skins\ Houses the output of the make.bat script. This is like a staging area. When you run the script with the install argument, it uses these files to install the skin.

  • src\ Houses the original or "source" files installed with the Bravura Security Fabric instance. In general, you should not modify this directory.

In this section: