Search in knowledge base
TEC-6 – Customization – List of files and methods
Version(s)
ECALDIMA 2.0 and higher
Concept
It is possible to customize ECALDIMA by changing the following elements:
- Colors
- Images
- Operator Dashboard
- Request a view
- User incident view
- Operator incident view
This article details the sections.
There is also a service available on the support portal that allows you to generate modified CSS and image colors.
Colors
ECALDIMA green is #AECF49 or RGB (137, 178, 13). Below, we’ll use #AAAAAA and 111, 222, 333 as replacement colors.
Historically, there have been several shades, such as #89B20D, #626262, and #AECF49.
Harmonization is planned starting with version 2.1.
Each section below describes the files and colors that will be modified according to the file.
Color changes are made in CSS files.
Portal
The portal consists of a category list page, a service details page, a shopping cart page, a request creation confirmation page, and a software portal page.
The CSS file used in the Portal is \Styles\SCPStyles.css
| Original | Replacement |
|---|---|
| #D7E590 | #AAAAAA |
| #89B20D | #AAAAAA |
| #AECF49 | #AAAAAA |
| 137,178,13 | 111,222,333 |
| #626262 | RGBA(111,222,333,0.5) |
Backoffice
The backoffice consists of the validation page and the task page.
The CSS file used is the same as the one in the Portal and can be copied from the Portal to BackOffice\Styles\SCPStyles.css
Graphic components
Components such as the date picker in contracts and the SLA calendar are components of the SyncFusion suite. The CSS file used is ECALDIMA\Content\ej\web\flat-lime\ej.theme.min.css.
To apply the desired color, use the matching grid shown below:
| Original | Replacement |
|---|---|
| #cee292 | RGBA(111,222,333,0.5) |
| #aecf49 | #AAAAAA |
Frames, standard tables, buttons
The CSS file used is ECALDIMA\Content\site.css.
To apply the desired color, use the matching grid shown below:
| Original | Replacement |
|---|---|
| #cee292 | RGBA(111,222,333,0.5) |
| #aecf49 | #AAAAAA |
| #94B60F | #AAAAAA |
| #D7E590 | #AAAAAA |
| 174,207,73 | 111,222,333 |
| 137,178,13 | 111,222,333 |
Tables with sorting and filters
These tables use datatables.net scripts.
The CSS file used is ECALDIMA\Content\datatables.css.
To apply the desired color, use the matching grid shown below:
| Original | Replacement |
|---|---|
| 174,207,73 | 111,222,333 |
Menu
The menu uses a Syncfusion component.
The CSS file used is ECALDIMA\Content\menu.css.
To apply the desired color, use the matching grid shown below:
| Original | Replacement |
|---|---|
| #aecf493 | #AAAAAA |
Operator Dashboard
Dashboard customization is done by modifying the vbhtml pages.
This requires some knowledge of creating web pages with HTML and SQL.
The default operator dashboard is OperatorDashBoard.vbhtml in the “Ecaldima Installation Directory” \ECALDIMA\Views\TIMA directory.
To create a custom dashboard, you must copy OperatorDashBoard.vbhtml to Dashboard0.vbhtml. Ecaldima supports up to 10 dashboards, from dashboard 0 to dashboard 9.
These files are not overwritten when updating or patching.
View application view
Customizing RequestView is done by modifying the vbhtml pages.
This requires some knowledge of creating web pages with HTML and SQL.
The default RequestView is RequestView.vbhtml from the “Ecaldima Installation Directory” \ ECALDIMA \ Views \ SCOOP directory.
To create a custom RequestView, copy RequestView.vbhtml to YOURQUESTQUESTVIEW.vbhtml. The name is your own to avoid spaces and accented characters. For a service to use this view, you must add an extended property named PROCESSVIEWPAGE and the value set to the name of your view without the .vbhtml.
User incident view
Customizing the user incident view is done by editing the VBHTML pages.
This requires some knowledge of creating web pages with HTML and SQL.
The User Incident View used by default is UserTicketDisplay.vbhtml from the “Ecaldima Installation Directory” \ ECALDIMA \ Views \ TIMA directory.
To create a custom user incident view, you must copy UserTicketDisplay.vbhtml to YOURUserVIEWINgUser.vbhtml. The name is whatever you choose to avoid spaces and accented characters. For users to see this new view, you must change the TIMA configuration, UserTicketDisplay, and give it the name of the new view without .vbhtml.
Operator incident view
Customizing the Operator incident view works by editing the VBHTML pages.
This requires some knowledge of creating web pages with HTML and SQL.
The default operator incident view is UserTicketDisplay.vbhtml from the “Ecaldima Installation Directory” \ ECALDIMA \ Views \ TIMA directory.
To create a custom operator incident view, use UserTicketDisplay.vbhtml to copy it to YOURVIDEINCOPERATOR.vbhtml. The name is the one you choose to avoid spaces and accented characters. For operators to see this new view, you must change the TIMA configuration, OperatorTicketDisplay, and give it the name of the new view without .vbhtml.