Annoyed of the VNC implemetation in WDM WebUI?

Recently our user sono87 has published a great post in the WDM forum.
He was kind of annoyed of the VNC implementation we currently have in the WDM 5.7.2 WebUI.
Those of you using the WebUI may know this dialog when trying to shadow a client.

 

Followed by

and more steps like downloading the VNC player, executing it and even typing in the IP address of the client you had just selected.
All in all, not a very smart implementation.

So, sono87 sat down and did some smart modifications to make it much more intuitiv.

This is how it looks afterwards:

These are steps to do:
1. Disable Internet Information services on the WDM server.

2. Navigate to inetpub\wwwroot\WebUI\externals\cui\js\ccc-vendor.js and edit the following line 42269.
We are adding vnc to the whitelist so the url’s get recognized. (ccc-vendor.js is loaded by indexf.html) if not done correctly you will get unsafe:vnc://ipaddress urls.

Before

var aHrefSanitizationWhitelist = /^\s*(https?|ftp|mailto|tel|file):/,

After

var aHrefSanitizationWhitelist = /^\s*(https?|ftp|mailto|tel|vnc|file):/,

3. Add VNC  option in the devices tab of WDM
Edit the following file
inetpub\wwwroot\WebUI\app\device\devices.html
Navigate to Line 89 or 90

Before

<span data-ng-if=””key!=’iconStatus’”>{{device[key]}}</span><span data-ng-if=””key==’lastCheckIn’””>{{device[key]|wdmDateFormat}}</span>

After

<span data-ng-if=””key!=’iconStatus’”>{{device[key]}}</span><span data-ng-if=””key==’lastCheckIn’””>{{device[key]|wdmDateFormat}}</span><span data-ng-if=”key==’ip'”><a href=”vnc://{{device[key]}}”><img style=”width: 15px; height: 15px;” src=”../app/device/UI/images/vncicon.png” alt=”vnc” /></a></span>

Pysical path on WDM server for the VNC icon is ”inetpub\wwwroot\WebUI\app\device\UI\images\vncicon.png”
That is the location on the webserver where you need to put a vnc icon.

4. Optionally you can disable the Remote Shadow right click by editing the same devices.html line 98

Before

<li href=”#” id=”remoteShadow_CP” data-ng-click=”handleContextMenuClick(wdmCommands.REMOTESHADOW,$event)” data-ng-hide=”isContextMenuCommandHidden(wdmCommands.REMOTESHADOW)”>{{ “WDM_CMD_REMOTE_SHADOW” | translate }}

After

<!–li href=”#” id=”remoteShadow_CP” data-ng-click=”handleContextMenuClick(wdmCommands.REMOTESHADOW,$event)” data-ng-hide=”isContextMenuCommandHidden(wdmCommands.REMOTESHADOW)”>{{ “WDM_CMD_REMOTE_SHADOW” | translate }}</li–>

5. Now we need to add some files to the Windows OS in order for the browser to recognize the vnc:// extension.
Download the WDM_WebUI_VNC.zip file from the Downloads section and extract it to the root of your C drive.

6. Navigate to C:\Wyse\WDM\vncviewer\ and run regadd.bat as administrator.

The browser this is tested in is Google Chrome and IE 11,  but it should work in any other browser.
Sono87 or I are not in any way responsible if you crash your server.
Do this at your own risk.
As always, make a backup of the files you are altering!

7. Restart the IIS Server again or reboot the server

Big kudos to sono87 for this fantastic WDM mod.
Thanks a lot.

Here is the full thread