Customization

The Angular Client appearance can be modified by adding customization sections to appconfig.json. The skin section controls application naming and graphics. The customMenuItems section lets you add menu items with links to external sites.

Angular Client

appconfig.json

Example customization sections of C:\inetpub\dvi6root\clients\apps\kmd-dvi\assets\config\appconfig.json:

{
  "apiServer": {...},
  "idsServer": {...},
  "auth": {...},
  "env": {...},
  "skin": {
    "appTitle": "Text to appear in browser tab",
    "homepageImageUrl": "assets/images/logos/customer/customer-welcome-image.png"
    "toolbarLogoUrl": "assets/images/logos/customer/customer-small-logo.jpg"
  },
  "customMenuItems": [
    {
      "extPath": "https://kmd-dvi.github.io/dvi-doc/gd-quick/quick-start",
      "hint": "Hint This is an admin item",
      "icon": "FI dvipersons-bust-check",
      "parentId": "CATALOG.MENUITEM.ROOT",
      "id": "CUST.ITM.ADM",
      "text": "Custom Admin Menu Item"
    },
    {
      "extPath": "https://kmd-dvi.github.io/dvi-doc/gd-quick/quick-start",
      "hint": "Hint 1",
      "icon": "FI dvipersons-pers-expell",
      "parentId": "HELP.MENUITEM.ROOT",
      "id": "CUST.ITM.1",
      "text": "Custom Menu Item 1"
    },
    {
      "extPath": "https://www.kmd.dk",
      "hint": "Hint 2",
      "icon": "FI dvipersons-officer-wave",
      "id": "CUST.ITM.2",
      "text": "Custom Menu Item 2"
    },
    {
      "extPath": "",
      "hint": "Hint 3",
      "icon": "FI dviactions-phone-24h",
      "id": "CUST.ITM.3",
      "text": "Custom Menu Item 3"
    },
    {
      "extPath": "https://www.kmd.dk",
      "hint": "Hint 3.1",
      "icon": "FI dvipersons-biking",
      "parentId": "CUST.ITM.3",
      "id": "CUST.ITM.3.1",
      "text": "Custom Menu Item 3.1"
    },
    {
      "extPath": "https://www.kmd.dk",
      "hint": "Hint 3.2",
      "icon": "FI dvipersons-pers-injur-bed",
      "parentId": "CUST.ITM.3",
      "id": "CUST.ITM.3.2",
      "text": "Custom Menu Item 3.2"
    }
  ],
  "isConfig": "true"
}

The {…} sections are documented in the general config article

The above example menu customization where classes of internal system icons are used leads to this menu (customization marked with yellow):

Custom menu items

Option Default Usage
“skin”: {…} optional section The whole section can be omitted to use installation defaults
“skin”: {
“appTitle”: “Tab Text
}
KMD-DVI Text to be displayed on the browser tab sheet header
“skin”: {
“homepageImageUrl”: “URL
}
assets/images/pages/frontpage-l.png Link to the image displayed on the Home menu item page
“skin”: {
“toolbarLogoUrl”: “URL
}
assets/images/logos/KMD_PlassData.svg Link to the image displayed in left top section. Could be any browser supported image format like ‘png’, ‘jpg’, ‘svg’ etc.
“customMenuItems”: [{…},{…},…] optional section The whole section can be omitted. If used, it is a list of one or more menu items. Observe the use of [] to contain the list items
“customMenuItems”: [
{
“extPath”: “URL
}
]
optional URL that will be activated in a new browser tab when menu item is clicked
“customMenuItems”: [
{
“hint”: “My explanatory hint
}
]
optional Text to display when hovering over the menu item with the mouse
“customMenuItems”: [
{
“icon”: “help
}
]
optional Name of icon. Reference to (example) CSS class name of the icon
“customMenuItems”: [
{
“parentId”: “PARENT.ID
}
]
optional Reference to the parent of this item. If omitted, the item will be placed next to the previous item or within Help if first item.
You may reference prior custom elements to build your own hierarchy of menu items
“customMenuItems”: [
{
“id”: “SOME.ID
}
]
optional Internal ID of this menu item. Necessary if it will be parent of other menu items
“customMenuItems”: [
{
“text”: “Menu caption
}
]
optional Caption text of the menu item

Some existing menu id’s

Use the keys below as parentId to hook into the bottom of the corresponding submenu:

  • VICTIM.MENUITEM.ROOT
    • VICTIM.VIEW.MENUITEM
    • VICTIM.MATCH.MENUITEM
    • VICTIM.IDENTIFY.MENUITEM
    • VICTIM.REPORTS.MENUITEM
    • VICTIM.EXCHANGE.MENUITEM
  • CATALOG.MENUITEM.ROOT (Admin menu)
    • CATALOG.ORGANIZATION.MENUITEM
    • CATALOG.BODY.MENUITEM
    • CATALOG.TOOLS.MENUITEM
  • PROFILE.MENUITEM.ROOT
  • TOOLS.MENUITEM.ROOT
  • HELP.MENUITEM.ROOT