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

“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