Display dropdown selection list on AD FS 4.0 Home Realm Discovery page

On AD FS 2.0 or 3.0 home realm discovery page, there was an option to select the AD FS namespace from a dropdown list. But in AD FS 4.0 it has been changed to HTML DIVs and sometimes it can be annoying if you have many (100s) of claims provider trusts available to choose from. So there is a customization required to change the HTML DIVs selection to a dropdown list selection.
Before doing the customizations, the HRD page selection section looks like:

In AD FS 4.0 this customization can be done in an “onload.js” file available in the AD FS theme. We can follow the below steps to achieve this:

1. Export the current AD FS theme to a location.
2. Create a custom theme based on the current theme.
3. Modify the “onload.js” file with required customizations.
4. Import the “onload.js” file back to the custom theme.
5. Make the custom theme as the default theme.

Let’s perform these above steps one by one.
Run the following PowerShell command to export current theme to a location
Export-AdfsWebTheme -Name default -DirectoryPath D:\Themes\Custom

Run the following PowerShell command to create a new custom theme based on current theme
New-AdfsWebTheme -Name custom -SourceName default

Update onload.js file extracted in step 1 at D:\Themes\Custom\theme\script with following code added at the end of the file:

Run the following PowerShell command to update back the onload.js file in the theme
Set-AdfsWebTheme -TargetName custom -AdditionalFileResource @{Uri=’/adfs/portal/script/onload.js’;path=”D:\Themes\Custom\theme\script\onload.js”}

Run the following PowerShell command to make the custom theme as your default theme
Set-AdfsWebConfig -ActiveThemeName custom -HRDCookieEnabled $false

Now the HRD page selection section would look like

You may have noticed that we have moved the Active Directory on top of the list.

Explaining the approach…

1. Define a function SetHRD that would be used to set the HRD.selection to the value of the selected option from the dropdown list.
2. Then define the loadScript function to load the JQuery. This function takes up the JQuery source URL and a callback function. It then appends the script at the end of the head element in the HTML.
3. Then call the loadscript function with the default URL of the JQuery source available in AD FS 4.0 and a callback function.
4. In the callback function check if there is an HRD area element available on the page.
5. If it’s available then define the select element with onchange event set to call SetHRD method already defined and pass on the selected option.
6. Adding a default option as “Choose Your AD FS”.
7. Then select the DIV containing onclick attribute with “AD Authority” in the text (the default Active Directory option to be as the 1^st selection option in the dropdown list). If you do an inspect element (press F12 in Chrome and navigate to the element) on that HTML DIV you will see a call to the HRD.selection function with respective AD FS namespace/Claim Provider Trust, in this case it would be “AD Authority” for Active Directory.
8. Extract the HRD Selection value out of the onclick attribute of the selected DIV.
9. Append the option to the string with the extracted value and text.
10. Loop through all the DIVs containing ADFS namespaces, extract the values and text
11. Append them to the string to make the select element options.
12. In the end hide all the DIVs containing the AD FS namespaces having CSS Class idp and insert the newly constructed string for the dropdown list right after the openingMessage element.

Hope this helps…