Interface customisation

You have the possibility to customise the UI of the MEWP by replacing or changing files. The featured image illustrates the structure of the deployment of the MEWP on the server. There are multiple levels where each level is more specific towards a single page:

Level 1: Application folder (Angular)

The application folder is the root folder of the MEWP. It contains a couple of folders and files that create the entire MEWP interface.

Folder	Description
CSS	Contains the common css files that are applicable for every page.
JS	Contains the common .js files that are applicable for every page.
Template	Contains all the template files (.html) to display all the pages.
Translation	Contains the translation files (.json) for all the pages.
Client	Contains the different domain folders

Level 2: Client folder

The client folder contains all the domain/project folders. Each domain or project could have its own interface. In order to change the domain interface, open the settings.js file and change the following line:

var company="(domain name)";

When you have saved the file, clear the cache of the browser and refresh the page. You will now see the different interface.

Change settings

Inside the client folder there is a file called default.js. In this file you can change the following settings:

Setting	Description
Default language	Change the default language of the application.
Transition effect	Change the type of fade-in effect when a question is shown during the consultation.
Number of columns	Change the number of columns in frames and initialisation variables..
Display-message location	Choose the location of the display-message (top / bottom).
Qualitative enumeration Multi limit	Decide after how many.
Qualitative enumeration limit	Decide after how many.
Input text limit	Determine the overall maximum numbers of characters in inputfields.
Tooltip limit	Determine the maximum characters in tooltips.
Label align	Choose where you want to have the questions aligned (left / top).
Previous questions enabled	Enable/Disable whether or not you want to display the previous answers.

Level 3: Tenant folder

Each client folder has at least one tenant folder. You can specify the style per tenant. Each tenant contains the following folders:

Folder	Description
KBA	Contains the .html, .css and .js filesto change the interface per KBA. The name of these files needs to be the same as the kba name.
CSS	Contains the .css files, fonts and images that are applicable for the specific tenant
Translation	Contains the translation files (.json) for the specific tenant
Template	Contains various files to replace or add pages

Level 4: KBA

Each KBA can use a different interface template. In the settings of the screen you can choose a html/css/js template from the list. You can find more information on the Create a custom KBA page.