This article describes how to use the “white labeling” features of Vantiq to customize various “branding” aspects of the UI when deploying a “private cloud” server. The intent is to let a customer override references to the name “Vantiq” and its related branding and replace them with their own company’s specific preferences.

These customizations are in two basic categories:

First is the ability to replace company-specific strings like the name “Vantiq” and the link to the company website with values specific to your company. This involves customizing a set of string values in a server configuration file.

Second is the ability to modify the appearance of the “navbar” at the top of the Modelo. This includes things like changing the icon, colors and fonts that appear there.

These customizations are accomplished by configuring a “server configuration” file called webUIConfig.json. The location of this file is determined using the server’s “configDir” startup parameter. After making changes to this file (or any file it refers to) you need to restart the server for the values to take effect.

For installations deployed via Kubernetes see the branding example in the Configuration Overrides section of the documentation for details on how to manage these configuration files. (Note this is a link to the Vantiq “k8sdeploy_tools” GitHub repository and is only accessible to the Vantiq Professional Services group.)

Below is an example of a fully configured webUIConfig.json. Of course you only need to supply those values you wish to override:

{
  "loadGoogleComponents": true,

  "brandedProperties": "override.properties",

  "navbarDefaults": {
      "backgroundColor": "#1e6cb6",
      "titleColor": "#ffffff",
      "titleFontWeight": "400",
      "titleFontFamily": "'Source Sans Pro', Helvetica, Arial, sans-serif",
      "titleFontStyle": "normal",
      "titleFontSize": 20,
      "appicon": "myAppIcon.png",
      "icon": "myNavbarIcon.png",
      "iconHeight": 26,
      "iconWidth": 98,
      "height": 50,
      "titleTopPadding": 0,
      "iconTopPadding": 12
  }
}

loadGoogleComponents

“loadGoogleComponents” is a boolean value which controls whether or not Google “map” libraries are included in Modelo and its Clients at runtime. You should set this to false if your private server does not have access to the internet.

brandedProperties

“brandedProperties” points to a file in the “Java properties” format that contains the values that you wish to override. These are a set of terms that contain Vantiq-specific values which you may wish to change.

Here is an unmodified version of the “override.properties file” that allows you to override the strings that contain various company-specific values. The meanings should mostly be obvious, but it is important to make clear the difference between “core.company.name” and “core.product.name”; the first refers to the name of the company itself and the second refers to the name of the product; for Vantiq these terms are the same but they are kept separate in case they differ in your case.

core.company.name = Vantiq
core.product.name = Vantiq
core.privacy.policy = https://vantiq.com/wp-content/uploads/VANTIQ-Privacy-Policy.pdf
core.terms.and.conditions = http://vantiq.com/vantiq-terms-services
core.modelo.title = Vantiq - Modelo
core.pronto.title = Vantiq - Pronto
core.rtc.title = Vantiq Client Launcher
core.mpi.title = Vantiq Launcher
core.drp.title = Vantiq Request Processor
core.orgWebsite = http://www.vantiq.com
core.supportUrl = [email protected]
core.forumUrl = http://stackoverflow.com/questions/tagged/vantiq
core.modelo.name = Modelo
core.modelo.full.name = Modelo Full
core.modelo.light.name = Modelo Light
core.pronto.name = Pronto
core.platform.name = Platform
core.configProntoMod = Configure Pronto and Modelo

“navbarDefaults” is a configuration object containing values that tell the UI how to modify the default “navbar” styling. Some of these values correspond to properties on the runtime “Client” object.

navbarDefaults ‘Client’ properties Default Description
backgroundColor navBarBackgroundColor #1e6cb6 The navbar background color
titleColor navBarForegroundColor #ffffff The navbar title color
titleFontWeight navBarTitleFontWeight 400 The navbar title font “weight” (‘bold’, ‘normal’, etc.)
titleFontFamily navBarTitleFontFamily ‘Source Sans Pro’, Helvetica, Arial, sans-serif The navbar title font family
titleFontStyle navBarTitleFontStyle normal The navbar title font “style” (‘italic’, ‘normal’, etc.)
titleFontSize navBarTitleFontSize 20 The navbar title font size in points
appicon n/a webroot/cmn/assets/branding/appicon.png The browser ‘appicon’; must be 32×32
icon navBarIcon webroot/cmn/assets/branding/navbarIcon.png The navbar icon
iconHeight navBarIconHeight 26 The height of the navbar icon in pixels
iconWidth navBarIconWidth 98 The width of the navbar icon in pixels
height n/a 50 The height of the navbar in pixels
titleTopPadding n/a 0 Extra top padding on the title
iconTopPadding n/a 12 Extra top padding on the icon