Output Organizer: Customizing
Customizing the Output Organizer is done by modifying the Deployment using the provided Helm chart. In Addition to simple parameters which are explained in the Kubernetes deployment of our Charts. Whole files can be added to include more complex configuration or to exchange files like logos, favicon and more. The predefined files and their respective key are described in the following article.
How to apply customizations
Keys for customizing
The following keys are predefined to inject content from files into the Helm chart deployment:
| key | FileType | Description |
|---|---|---|
| organizer.config.favicon | PNG, GIF, or ICO file | Swaps out the application Icon. |
| organizer.config.logos | image file | Swaps out the application logo. |
| organizer.config.styles | CSS File | Allows you to override predefined Color variables and add arbitrary style rules to alter the appearance of your application. |
organizer.config.collectionTypeDefinitions (list) organizer.config.collectionTypeNames (list) | YAML file Text | CollectionTypes allow you to customize the structure in which the Elements of your collections are displayed in the UI, configure behaviour and more. Lists the corresponding collection type names to the definitions defined in 'collectionTypeDefinitions'. The name must be the same as the ID defined in the collection definition json. The number and order of elements has to match its counterpart in 'collectionTypeDefinitions'. |
organizer.config.policyDefinitions (list) organizer.config.policyValidityDate (list) | YAML file Text | Policies to enact Rules based on collection and user context Lists the corresponding validity date of the access policies defined in 'policyDefinitions'. The date has to follow the date schema "yyyyMMdd-HHmmss-SSS". The active policy is always the policy with the newest validity that is not set in the future. The number and order of elements has to match its counterpart in 'policyDefinitions'. |
| global.config.annotationProfile | XML file | Allows you to customize the available annotations to be used in Output Organizer as well as customizing their behaviour. Since the annotation profile is used by multiple containers, it is defined in the values "global" space |
| organizer.config.translationFiles.en | JSON file | Allows you to configure translation files for english language. |
| organizer.config.translationFiles.de | JSON file | Allows you to configure translation files for german language. |
For Infomration about how to deploy these configuration options, please refer to Additional Configuration
Details about the Customization options
Customizing Translation Files
Output Organizer allows you to customize the translation files for different languages. This is particularly useful if you want to provide localized text for your users or modify existing translations to better fit your application's context. Note: This feature is available only for the advanced Output Organizer.
Note: Stability between minor versions is not guaranteed. Customers are responsible for selecting text lengths that do not adversely affect the layout.
Translation files are configured using JSON format. You can provide custom translation files for both English (en) and German (de) languages. Currently, only the export.label key is available for customization.
Example Configuration
Here is an example of how you can customize the translation file for English:
{
"export": {
"label": "Export"
}
}
In this example, the text for the export button is customized. The key export.label corresponds to the label for the export button in the control section of navigation tree.
Customize Icon
Swaps out the application Icon that is used in your browser when displaying the application in a tab, a bookmark and more. The format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG, GIF, or ICO.
Customize logo
Swaps out the application logo at the top of your browser application. The Image has to be supported has to be supported by web browsers see. If you want to use a raster image it should be roughly 40px in height. Vector graphics are also supported.
Customize CSS styles
Allows you to override predefined Color variables (listed below) and add arbitrary style rules to alter the appearance of your application. Those rules are applied after loading the default style of the application and therefore can override any aspect of your application. If you have trouble finding the right selector to apply your desired change, feel free to contact our team at levigo. We also created a predefined set of variables for you to easily change the colors of the application. A sample containing color variables can be seen here: Sample configuration
body {
--nfwc-font-family: Roboto, "Helvetica Neue", sans-serif;
--nfwc-basic-text: #000000; // basic text color
--nfwc-basic-background: #ffffff; // basic background color
--nfwc-primary-background: #e7e9eb; // primary background color for components and panels inside the application
--nfwc-secondary-background: #cccccc; // secondary background color for components and panels inside the application
--nfwc-primary: #264D97; // primary color for buttons, highlights and accents.
--nfwc-secondary: #22a8fb; // secondary color for buttons, highlights and accents.
--nfwc-annotation: #8e0086; // highlight color for annotations related UI
--nfwc-bookmark: #fee930; // highlight color for bookmark related UI
--nfwc-warning: #ffa500; // signal color for warning notifications
--nfwc-success: #3aaa35; // signal color for success notifications
--nfwc-danger: #c90625; // signal color for errors and very important notifications
--nfwc-info: #22a8fb; // signal color for informational notifications
/* To hide the default logo, its title or the whole header, you can use the following variables: */
/* hide the header completely */
--nfwc-header-display: none;
/* hide the logo and the title in the header */
--nfwc-header-branding-display: none;
/* hide only the title in the header */
--nfwc-header-title-display: none;
// your custom rules can be defined here:
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.my-selector {
color: white;
}
}
If a color variable is omitted a default color will be used. These base colors will be automatically expanded by calculating shades and contrast colors for you. These shades will be used for layering, button states and more, all according the Material design principle (M2 material). If you want to have more fine granulated control you can define these the details manually: Sample configuration
body {
--nfwc-basic-text: #000000;
--nfwc-basic-background: #ffffff;
--nfwc-primary-background: #e7e9eb;
--nfwc-secondary-background: #cccccc;
--nfwc-primary: #264D97;
--nfwc-secondary: #22a8fb;
--nfwc-primary-contrast: #ffffff;
--nfwc-secondary-contrast: #000000;
--nfwc-annotation: #8e0086;
--nfwc-bookmark: #fee930;
--nfwc-annotation-contrast: #ffffff;
--nfwc-bookmark-contrast: #000000;
--nfwc-warning: #ffa500;
--nfwc-success: #3aaa35;
--nfwc-danger: #c90625;
--nfwc-info: #22a8fb;
--nfwc-warning-contrast: #000000;
--nfwc-success-contrast: #ffffff;
--nfwc-danger-contrast: #ffffff;
--nfwc-info-contrast: #000000;
--nfwc-primary-50: #e5eaf3;
--nfwc-primary-100: #becae0;
--nfwc-primary-200: #93a6cb;
--nfwc-primary-300: #6782b6;
--nfwc-primary-400: #4768a7;
--nfwc-primary-500: #264d97;
--nfwc-primary-600: #22468f;
--nfwc-primary-700: #1c3d84;
--nfwc-primary-800: #17347a;
--nfwc-primary-900: #0d2569;
--nfwc-primary-A100: #9cb2ff;
--nfwc-primary-A200: #6989ff;
--nfwc-primary-A400: #3661ff;
--nfwc-primary-A700: #1d4dff;
--nfwc-primary-contrast-50: #000000;
--nfwc-primary-contrast-100: #000000;
--nfwc-primary-contrast-200: #000000;
--nfwc-primary-contrast-300: #ffffff;
--nfwc-primary-contrast-400: #ffffff;
--nfwc-primary-contrast-500: #ffffff;
--nfwc-primary-contrast-600: #ffffff;
--nfwc-primary-contrast-700: #ffffff;
--nfwc-primary-contrast-800: #ffffff;
--nfwc-primary-contrast-900: #ffffff;
--nfwc-primary-contrast-A100: #000000;
--nfwc-primary-contrast-A200: #000000;
--nfwc-primary-contrast-A400: #ffffff;
--nfwc-primary-contrast-A700: #ffffff;
--nfwc-secondary-50: #e4f5ff;
--nfwc-secondary-100: #bde5fe;
--nfwc-secondary-200: #91d4fd;
--nfwc-secondary-300: #64c2fc;
--nfwc-secondary-400: #43b5fc;
--nfwc-secondary-500: #22a8fb;
--nfwc-secondary-600: #1ea0fa;
--nfwc-secondary-700: #1997fa;
--nfwc-secondary-800: #148df9;
--nfwc-secondary-900: #0c7df8;
--nfwc-secondary-A100: #ffffff;
--nfwc-secondary-A200: #eff6ff;
--nfwc-secondary-A400: #bcd9ff;
--nfwc-secondary-A700: #a2cbff;
--nfwc-secondary-contrast-50: #000000;
--nfwc-secondary-contrast-100: #000000;
--nfwc-secondary-contrast-200: #000000;
--nfwc-secondary-contrast-300: #000000;
--nfwc-secondary-contrast-400: #000000;
--nfwc-secondary-contrast-500: #000000;
--nfwc-secondary-contrast-600: #000000;
--nfwc-secondary-contrast-700: #ffffff;
--nfwc-secondary-contrast-800: #ffffff;
--nfwc-secondary-contrast-900: #ffffff;
--nfwc-secondary-contrast-A100: #000000;
--nfwc-secondary-contrast-A200: #000000;
--nfwc-secondary-contrast-A400: #000000;
--nfwc-secondary-contrast-A700: #000000;
}
The colors shades from 50 to 900 and the corresponding A-variants are based on Material palette colors. More about the palette colors can be found here: M2 material - color Most of the colors have a defined contrast color which is black or white by default. This defines the text color to be most readable when using the corresponding color as a background.
Customize access policies
Access policies define which user can access which functionality in the organizer. Rules can be defined on collection metadata and user rights provided by the authentication provider. A more detailed look in the authentication and authorization process can be found here: Authentication and Authorization And a deep dive into the access policies can be found here: Access Policies