This documentation is for WSO2 IoT Server 3.1.0. View the documentation for the latest release.
Page Comparison - White Labeling the Device Management Console (v.18 vs v.19) - IoT Server 3.1.0 - WSO2 Documentation

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Let's take a look at how you can white label the device management console. 

Table of Contents

White labeling the header

Follow the steps given below:

  1. Navigate to the <IOTS_HOME>/repository/deployment/server/jaggeryapps/devicemgt/app/units directory.
  2. Create a new directory that follows the following naming convention: <NAME>.unit.ui.header.logo
    Example: white-labeling.unit.ui.header.logo
  3.  Create a file named logo.hbs and configure it as follows:

    Code Block
    {{!
      Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
      WSO2 Inc. licenses this file to you under the Apache License,
      Version 2.0 (the "License"); you may not use this file except
      in compliance with the License.
      You may obtain a copy of the License at
      http://www.apache.org/licenses/LICENSE-2.0
      Unless required by applicable law or agreed to in writing,
      software distributed under the License is distributed on an
      "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
      KIND, either express or implied. See the License for the
      specific language governing permissions and limitations
      under the License.
    }}
    {{#zone "productName"}}<ENTER THE NAME OF YOUR PRODUCT>{{/zone}}
    {{#zone "productNameResponsive"}}<ENTER THE NAME OF YOUR PRODUCT - THIS WILL BE USED WHEN THE CONSOLE BECOMES SMALLER IN SIZE>{{/zone}}
  4. Create a file named logo.json and copy the configuration given below:

    Code Block
    {
        "version": "1.0.0",
        "extends": "cdmf.unit.ui.header.logo"
    }
  5. Change the logo:
    1. Create a directory named public and in it create a directory named img.
    2. Add your logo to the img directory. 

      Note

      Make sure:

      • The mage size of the logo is 288px X 112px.
      • The image format is of the SVG format.
      • The name of the image is logo-inverse.svg.
  6. Restart the WSO2 IoT Server and sign into the device management console using admin/admin credentials: https://<IoT_HOST>:9443/devicemgt.
  7. You can now see the updated logo on the top left corner of the screen. 

    Before white labeling the headerAfter white labeling the header

White labeling the footer

Follow the steps given below:

  1. Navigate to the <IOTS_HOME>/repository/deployment/server/jaggeryapps/devicemgt/app/units directory.
  2. Create a new directory that follows the following naming convention: <NAME>.unit.footer
    Example: white-labeling.unit.footer
  3.  Create a file named footer.hbs and configure it as follows:

    Code Block
    {{!
    Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
    WSO2 Inc. licenses this file to you under the Apache License,
    Version 2.0 (the "License"); you may not use this file except
    in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied. See the License for the
    specific language governing permissions and limitations
    under the License.
    }}
    {{#zone "footer"}}
    <p>
       <span class="hidden-xs">{ENTER THE NAME OF YOUR PRODUCT AND VERSION - THIS IS THE DEFAULT TEXT THAT WILL BE SHOWN}</span>
       <span class="visible-xs-inline">{ENTER PRODUCT ABBREVIATION AND VERSION - THIS WILL BE USED WHEN THE CONSOLE BECOMES SMALLER IN SIZE } | &copy; </span>
       <script>document.write(new Date().getFullYear());</script>,
       <a href="{ENTER YOUR WEBSITE URL}" target="_blank"><img src="{{@unit.publicUri}}/img/logo.png"> Inc</a>. All Rights Reserved.
    </p>
    {{/zone}}
  4. Create a file named footer.json and copy the configuration given below:

    Code Block
    {
        "version": "1.0.0",
        "extends" : "cdmf.unit.footer"
    }
  5. Changing the logo:
    1. Create a directory named public and in it create a directory named img.
    2. Add your logo to the img directory. Make sure that the size of the logo is 21px X 21px.
    Info

    This logo is added to the footer by the following configuration in the footer.hbs file.

    Code Block
    <img src="{{@unit.publicUri}}/img/logo.png">
    Panel

    For example, your final directory will look as follows:

  6. Restart the WSO2 IoT Server and sign into the device management console using admin/admin credentials: https://<IoT_HOST>:9443/devicemgt.
  7. You can now see the updated footer on the bottom left corner of the screen. 

    Before white labeling the footerAfter white labeling the footer