Version: 1.11.x

Dossier Organizer: Customizing

Customizing the Dossier 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.policyValidityDates (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 Dossier Organizer as well as customizing their behaviour. Since the annotation profile is used by multiple containers, it is defined in the values "global" space

Deploy with customized settings

To add a configuration file to the deployment, you simply set the files using the keys as described above to your Helm update/install command. This example command adds a custom styles CSS file and a custom logo:

$ helm upgrade --install
--values ${VALUES\_FILE}
--set-file organizer.config.styles=${STYLE\_OVERRIDE\_FILE},organizer.config.logos=${LOGO\_OVERRIDE\_FILE}
fusion-dossier-organizer levigo/fusion-dossier-organizer

For list properties (collectionTypes and policies) the syntax is a little different to be able to set multiple files:

$ helm upgrade --install
--values ${VALUES\_FILE}
--set-file organizer.config.collectionTypeDefinitions={${COLLECTION\_TYPE\_FILE\_1},${COLLECTION\_TYPE\_FILE\_2}}
--set organizer.config.collectionTypeNames={MyCollectionType1,MyCollectionType2}
fusion-dossier-organizer levigo/fusion-dossier-organizer

Details about the Customization options

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

  // 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 collection types

CollectionTypes allow you to customize the structure in which the Elements of your collections are displayed in the UI, configure behaviour and more. With Collection Type you are able to structure your elements in your application in multiple hierarchies and define custom sort order. You are able to define multiple such views with different sorting and structure to select from in the UI. You also have fine control over labels, icons colors, drag and drop behaviour, expansion states and more. At the moment this API is not fully accessible for customers, please contact our team at levigo, and we will create a matching collection type definition for you.

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

Annotation profile

The Annotation Profile allows you to define the kind of annotations that are available for users to apply to a document. The selected annotations can also be customized by defining default values for color size and more, depending on the exact annotation type. A more detailed explanations about Annotation profiles can be found here: jadice document platform annotation profile. Currently, the used profile has to be named "JWT-Default" and the supported Annotation Types are restricted to:

name	archetype	extends	class
Rectangle	Rectangle		com.levigo.jadice.annotation.RectangleAnnotation
Highlight	Highlight	Rectangle	com.levigo.jadice.annotation.RectangleAnnotation
Mask	Mask	Rectangle	com.levigo.jadice.annotation.RectangleAnnotation
Line	Line		com.levigo.jadice.annotation.LineAnnotation
Arrow	Arrow	Line	com.levigo.jadice.annotation.ArrowAnnotation
Pen	Pen		com.levigo.jadice.annotation.PathAnnotation
Ellipse	Ellipse	Rectangle	com.levigo.jadice.annotation.EllipseAnnotation
Stamp	Stamp		com.levigo.jadice.annotation.StampAnnotation
TextHighlight	TextHighlight		com.levigo.jadice.annotation.TextHighlightAnnotation
TextMask	TextMask		com.levigo.jadice.annotation.TextHighlightAnnotation
Text	Text	Rectangle	com.levigo.jadice.annotation.TextAnnotation

Dossier Organizer: Customizing

How to apply customizations:​

Keys for customizing​

Deploy with customized settings​

Details about the Customization options​

Customize Icon​

Customize logo​

Customize CSS styles​

Customize collection types​

Customize access policies​

Annotation profile​