Step by Step Customizing RD Web Access 2012 R2 – Part 3

This is the third post in the “Customize RD Web Access 2012 R2” series.

In case you missed the first two posts:
Step by Step Customizing RD Web Access 2012 R2 – Part 1, in which the login page and several customizations is handled.
Step by Step Customizing RD Web Access 2012 R2 – Part 2, in which the default page and several customizations of it is handled.

This post will focus on the page that is shown when you click the “Connect to a remote PC” tab.
For this post I also reverted back to a fully default RD Web Access installation, so we start fresh.

Just as a friendly reminder, we’ll be editing the files in the Web Access interface, which can be found in %windir%\web\rdweb\pages\<language-code> on the RD Web Access server.
To be safe, make a full backup copy of the %windir%\web\rdweb\pages folder and subfolders before editing anything.

By default, the Connect to a remote PC page looks like this:

The file responsible for showing you this page is called Desktops.aspx. Note that I clicked the Options button, as you can see in the screenshot. I will show modifications to the different sections in this page, starting with “Connection options”, then “Devices and resources”, and ending with “Additional options”.

Customizing the Connection options – “Connect to:” section
The “Connect to:” textbox is where you normally type the computername for the machine you want to connect to.
We have several options to customize that.

• Replacing the textbox with a pre-populated drop-down

I’m not going into too much detail on how this works. It basically works the same as in Windows 2012 RD Web Access, and Freek Berson has a pretty good detailed write up of that in one of his blog posts: Customize RD Web Access, a drop down server list.
I will, however, repeat the steps here. I take no credit for the drop-down idea or methods, Freek Berson is the one to thank for that.

Open “Desktops.aspx” and go to line number 848.
For reference, line 848:

Copy the following code and insert it before line 848:

function GetDestination(sParam, bReqd, vDefault)
{
       var obj = document.getElementById(sParam);
       if(obj != null)
       {
             switch(obj.tagName)
             {
                    case "SELECT":
                           return obj.options[obj.selectedIndex].value;
                           break;
                    default:
                           break;
             }
       } else {
             if ((bReqd) && ((vDefault == "") || (vDefault == null) || (obj == null)))
{

var L_ErrMsgInvalid_Text = "%ParameterName% is not a valid or available parameter name.";  // {Placeholder="%ParameterName%"}

var errMsgInvalid = sParam;

errMsgInvalid = errMsgInvalid.replace("%ParameterName%", sParam);

var retval = TSMsgBox(errMsgInvalid, vbInformation, L_sTitle_Text);

return null;

} else {
                    return vDefault;
             }
       }
}

Be careful not to change anything, just paste the code in front of the function that starts on line 848.

On line 271 you’ll find the following code:

You can also find it quickly by searching for

<input name="MachineName"

And then moving one line up.

Replace that highlighted piece of code with the following piece of code:

<td valign="top" style="padding-bottom:4px;" colspan="2">
 <select id="MachineName" style="width: 270px" name="MachineName">

<option value="rds01.lab.local" selected="selected">rds01.lab.local</option>

<option value="rds02.lab.local">rds02.lab.local</option>

<option value="rds03.lab.local">rds03.lab.local</option>

</select>

</td>

You can change the “rds01.lab.local” and other machine names with your own machine names.
Notice this is slightly different from Freek’s code, because on 2012R2 we need to remove some padding and add a class definition to the <select> statement, or the result looks horrible.

The resulting code on lines 270-278 will look like this:

Now find

 <button type="button" id="ButtonConnect" name="ButtonConnect" disabled="disabled" class="formButton"

on line 307:

Note that this is only part of the code on that line.
Remove the selected code (the dark grey bit), so it looks like this:

So simply put, remove the ‘disabled=”disabled”’ part, which effectively enables the “Connect” button.

To finish this off go to line 748:

Replace “GetParam” with “GetDestination”, like this:

If you refresh the RD Web Access page you can test run your changes:

If you don’t want to make these modifications yourself you can download the modified Desktops.aspx here. This file has all the modifications mentioned above, to create the pre-populated drop-down menu. You do need to rename it to “Desktops.aspx” though.

• Replacing the textbox with a table of clickable links

Instead of making a drop-down wouldn’t it be nice to just have a bunch of links you can click to connect to servers?

I copied my backup of Desktops.aspx back so I have the original file back.

Open “Desktops.aspx” and go to line 305:

This is the code that creates the Connect button. We don’t need that in this customization, so change the code on line 305 to

<!--  <button type="button" id="ButtonConnect" name="ButtonConnect" disabled="disabled" class="formButton" onclick="BtnConnect()" accesskey="<%=L_ConnectAccessKey_Text %>"><%=L_ConnectLabel_Text %></button> -->

This change just comments out the code, it doesn’t remove it.
The result should look like this:

Now go to line number 267.
Select all the code on lines 267-276.

Replace that code with the following code:

<td align="right" valign="top" style="width:160px;padding-bottom:3px;padding-top:1px">
<label><%=L_MachineName_Text %></label>
</td>
<td width="7"></td>
<td valign="top" style="padding-bottom:4px;padding-right:4px;" colspan="2">
<table cellpadding="0" cellspacing="0" class="linkPrimaryNavigiationBar" style="width:100%">
<tr><td>
<img src="../images/logo_01.png" align="absmiddle" border="0"/>
<a onclick="document.getElementById('MachineName').value='itwrds01.itw.test';BtnConnect();return false;" href="">itwrds01.itw.test</a>
</td><td width="10"></td><td>
<img src="../images/logo_01.png" align="absmiddle" border="0"/>
<a onclick="document.getElementById('MachineName').value='itwrds02.itw.test';BtnConnect();return false;" href="">itwrds02.itw.test</a>
</td></tr>
<tr><td>
<img src="../images/logo_01.png" align="absmiddle" border="0"/>
<a onclick="document.getElementById('MachineName').value='itwrds03.itw.test';BtnConnect();return false;" href="">itwrds03.itw.test</a>
</td><td width="10"></td><td>
<img src="../images/logo_01.png" align="absmiddle" border="0"/>
<a onclick="document.getElementById('MachineName').value='itwrds04.itw.test';BtnConnect();return false;" href="">itwrds04.itw.test</a>
</td></tr>
</table>
<input name="MachineName" id="MachineName" type="hidden" />
</td>

So lines 266-290 now look like this:

Finally go to line 36:

Change that to

This changes “Connect to:” into “Connect to:” since we don’t need the hotkey on the label anymore.

Save the file and reload the RD Web Access page. Sign in if you need to, and click “Connect to a remote PC”.

I know I’m not a style guru or HTML wizard, but hey, it gets the job done.
Again, if you don’t want to make these modifications yourself you can download the modified Desktops.aspx here. This file has all the modifications mentioned above, to create the table with links. You do need to rename it to “Desktops.aspx” though.

 

Customizing the Connection options – “Remote desktop size:” section
The “Remote desktop size” dropdown is populated with fixed entries by default.

You can add your own sizes however.
The following customization is based on the default Desktops.aspx.
I’m going to add a custom resolution: 1440×900.

Add a new label between line 32 en line 33:

This holds the text that will be displayed in the dropdown.

Add an extra option to the dropdown between line 296 and line 297:

Renumber the options so they’re sequential again.

Go to line 723. You’ll find a function called “setRes()” there:

Remove the highlighted line (728 in my case) and replace it with the following code:

var RDPstr2 = "screen mode id:i:1\ndesktopwidth:i:";
switch(iRes) {
case 1:
RDPstr2 += "800\ndesktopheight:i:600\n";
break;
case 2:
RDPstr2 += "1024\ndesktopheight:i:768\n";
break;
case 3:
RDPstr2 += "1280\ndesktopheight:i:1024\n";
break;
case 4:
RDPstr2 += "1440\ndesktopheight:i:900\n";
break;
case 5:
RDPstr2 += "1600\ndesktopheight:i:1200\n";
break;
}

The customized setRes() function now looks like this:

Save the file and test the custom resolution entry. Word of caution though. Test this thoroughly before you take this into production. I have tested this from Windows 8.1 and Windows 2012 R2. I have no idea if this method of setting resolution also works on a different OS, etc.
If you just want to test it right away, download the modified Desktops.aspx here. Rename the file to Desktops.aspx.

 

Customizing the Connection options – Showing the extra options by default
By default the extra options are hidden until you click the “Options >>” button.
To always show the extra options until you click the “Options <<” button:

Go to line 224.

Change the onload event code to

onload="onAuthenticatedPageload(event);hideshowOptions();"

So line 224 now looks like this:

Save the file and reload the RD Web Access interface. All options are now shown by default.

 

Customizing the Devices and resources options
By default only printers and clipboard are enabled.

You can change what’s enabled by default by opening Internet Information Services (IIS) Manager on the RD Web Access server.

Navigate to the Pages application and then open Application Settings. The settings you’re looking for are at the bottom of the list. Enable xDriveRedirection to enable Drives by default, enable xPnPRedirection to enable Supported Plug and Play devices by default, and enable xPortRedirection to enable Serial ports by default.
Of course, if any policies are in place which prevent redirection of any of these types then none of these settings have effect, the policy will prevent the redirection.
I want to enable all types for redirection, and therefore, why should I show these options any longer?

Enable all redirection settings in the Application Settings of the Pages application in IIS. To do this, double-click each option that now has the value “false” and change this to “true”.
There’s no need to restart IIS, these settings are instantly applied. Refresh the page to check if all types are now enabled:

Now open Desktops.aspx.
Go to line 321.

That’s the highlighted line with <tr> on it.
Change this into

No go to line 378.

That’s the highlighted line with </tr> on it.
Change this into

Go to line 446.

Copy the following code:

<input type="checkbox" value="OFF" id="xPrinterRedirection" name="xPrinterRedirection" <%=IsChecked(xPrinterRedirection)%>/><input type="checkbox" value="OFF" id="xClipboard" name="xClipboard" <%=IsChecked(xClipboard)%>/><input type="checkbox" value="OFF" id="xDriveRedirection" name="xDriveRedirection" <%=IsChecked(xDriveRedirection)%> /><input type="checkbox" value="OFF" id="xPnPRedirection" name="xPnPRedirection" <%=IsChecked(xPnPRedirection)%> /><input type="checkbox" value="OFF" id="xPortRedirection" name="xPortRedirection" <%=IsChecked(xPortRedirection)%> />

And paste it between lines 446 and 447.
The result would look like this:

Now reload the page.

The Devices and resources section is gone.

 

Customizing the Additional options

The values shown here are the defaults. What if I wanted different defaults? For example, I’d want the default for Remote computer sound to be “Do not play”.

Open Desktops.aspx.

Go to line 397 because that is where the code for the Remote computer sound drop-down starts.

Move the highlighted code to the option value you’d like to be the default, in my case to option with value 2:

And that’s it. Now “Do Not play” is the default value for that drop-down menu. The other drop-down menus can be manipulated in a similar way. The Apply keyboard shortcuts drop-down code starts on line 410, and the Performance drop-down code starts on line 423.

The Performance option works like the Experience tab Performance drop-down in the Microsoft RDP Client:

The difference being that in RD Web Access you can’t actually see what you are changing.
Let’s visualize those options shown under “Allow the following” in the Microsoft RDP Client on the RD Web Access page as well. On a side note, for some reason it was decided that the default values for the performance options in RD Web Access differ from the default performance options in Microsoft RDP Client.

Open Desktops.aspx.
Go to line 703.
You’ll be somewhere in the middle of the function SetPerf().

The selected line here is line 703.

Delete lines 703-720 and insert the following code on line 703:

case 6:     // LAN
case 7:     // AUTO
objPerformanceOptions[0] = 1;
objPerformanceOptions[1] = 1;
objPerformanceOptions[2] = 1;
objPerformanceOptions[3] = 1;
objPerformanceOptions[4] = 1;
objPerformanceOptions[5] = 1;
objPerformanceOptions[6] = 1;
break;
default:
break;
}
objPerformanceOptions[7] = 1;
for (iIndex = 0; iIndex < objPerformanceOptions.length; iIndex++)
{
if((parseInt(document.getElementById("comboPerfomance").value) == 7) && (iIndex < objPerformanceOptions.length - 2))
{
document.getElementById("p"+iIndex.toString()).checked = false;
} else {
document.getElementById("p"+iIndex.toString()).checked = objPerformanceOptions[iIndex] == 1;
}
}
}
setPerf();

After this change line 703-729 will look like this:

This change will prepare the code to show the performance options in checkboxes, just like the Microsoft RDP Client does. Besides the code to check or uncheck the checkboxes, I also adjusted the code slightly so that the defaults for the drop down menu actually mimic the defaults in the Microsoft RDP Client.

Now go to line 435.

The selected line here is line 435.

Insert the following code between lines 434 and 435:

<tr>
<td align="right" valign="top" width="160"><label><%=L_PerformanceOptions_Text %></label></td>
<td width="7"></td>
<td valign="top" style="padding-bottom: 4px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td><input type="checkbox" id="p0" disabled="disabled"/></td><td><label><%=L_DesktopBackground_Text %></label></td></tr>
<tr><td><input type="checkbox" id="p1" disabled="disabled"/></td><td><label><%=L_FontSmoothing_Text %></label></td></tr>
<tr><td><input type="checkbox" id="p2" disabled="disabled"/></td><td><label><%=L_DesktopComposition_Text %></label></td></tr>
<tr><td><input type="checkbox" id="p3" disabled="disabled"/></td><td><label><%=L_ShowWindowWhileDrag_Text %></label></td></tr>
<tr><td><input type="checkbox" id="p4" disabled="disabled"/></td><td><label><%=L_MenuWindowAnimation_Text %></label></td></tr>
<tr><td><input type="checkbox" id="p5" disabled="disabled"/></td><td><label><%=L_VisualStyles_Text %></label></td></tr>
<tr><td><br/><input type="checkbox" id="p6" disabled="disabled"/></td><td><br/><label><%=L_BitmapCaching_Text %></label></td></tr>
</table>
</td>
</tr>

After this change lines 430-450 will look like this:

This change actually adds the visual aspects of this customization.

Finally, go to line 20.

The highlighted line is line 20.

Insert the following code between line 19 and line 20:

const string L_PerformanceOptions_Text = "Performance options:";
const string L_DesktopBackground_Text = "Desktop background";
const string L_FontSmoothing_Text = "Font smoothing";
const string L_DesktopComposition_Text = "Desktop composition";
const string L_ShowWindowWhileDrag_Text = "Show window contents while dragging";
const string L_MenuWindowAnimation_Text = "Menu and window animation";
const string L_VisualStyles_Text = "Visual styles";
const string L_BitmapCaching_Text = "Persistant bitmap caching";

Lines 17-28 after this change:

This change adds the text for the labels in this customization.

Reload the page:

And there it is. Performance options visualized.

If you don’t feel like making these changes manually, you can download this customization here.

If you want to hide all the options, so including the Additional options, just delete the “Options >>” button altogether.
This is done by deleting line 304 in the original Desktops.aspx.

One funny thing left to mention.
There’s a typo in the code, on multiple lines. In the original Desktops.aspx check lines 419, or 423, or 688, or 770.

And that concludes customizing the Desktops page. Everything that’s customizable without touching “Branding” is now explained.

I know I said in the previous post that I would focus on Branding the entire Web Access interface in the post after this one, but this post actually concludes this series.
I will however, start a new series focused entirely on Branding.

Comments, suggestions, questions? Comment here or drop me a mail!
Arjan

About Arjan Mensch

30+ years experience in Microsoft powered environments. Enjoy automating stuff using powershell. In my free time (hah! as if there is any) I used to hunt achievements and gamerscore on anything Xbox Live enabled (Windows Mobile, Windows 8, Windows 10, Xbox 360 and Xbox One). Recently I picked up my Lego addiction again.

‹ Exchange 2013 Outlook Web App (OWA) Logon page

Quick fix for Exchange 2013 on Windows 2012(R2) OWA Web Apps not working ›

Tagged with: Customizing, RD Web Access, Windows 2012 R2
Posted in Customize, Remote Desktop, Step-by-Step guide