Skip to main content

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 custom logo )

    • 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: