Frequently Asked Question

Symptom

• Add one (or more) custom syle(s) available in the Data Analyzer

Environment

• Windows Server / Linux
• Need4Viz : versions >= 2023.1.0

Resolution

To add custom style in the Data Analyzer :

1. On each Need4Viz server, open the file ~Need4Viz_folder_installation\nodejs\node_modules\custom_element\ce_settings\EN(FR)\_list_style_da.json
2. Add one (or more) entry to the list, one entry is composed with an id, a name and an empty description (respect the exact syntax, the id mustn't start with a number), for instance we add the "N4V Custom style" (id=n4vcustom) in the list :
3. Please be sure to update both EN and FR _list_style_da.json files with the same entries
4. Reastart the N4V services to apply the update
5. Create a copy of an existing style folder in the tomcat\webapps\N4VCustomElements\res\js\flexmonster\theme folder. For your information, the default theme used in the Data Analyzer is the "softdefault". For instance, we duplicate the "stripedblue" folder 
6. Then rename the folder with the "id" used in the _list_style_da.json file : 
7. Now you can update the flexmonster.min.css file inside the folder. In this file you can change existing CSS or create new entries. For instance, to add a specific background color on levels 1 & 2 of headers, you can add the following lines at the end of the flexmonster.min.css (add the "!important" suffixe to make sure your custom style is applied on the corresponding CSS class): 
8. .fm-level-1.fm-header {
   background-color: #008cb2 !important;
   }
   
   .fm-level-2.fm-header {
   background-color: #ffffff !important;
   color: #008cb2 !important;
   }
   
   
   
9. Now in Webi, you can choose your new Custom Style in the Data Analyzer settings :  
10. The new style is correctly applied on the headers : 
11. To help you to find the correct CSS class to update, you can use the Chrome Console (F12): select "Elements" tab the click on the upper left arrow button and select the element you want to update in the Data Analyzer, the corresponding CSS classes will be displayed in the "Styles" panel :