ADFS 3: Changing Display Order on Client Realm Discovery Page RRS feed

  • Question

  • I have a request to change the display order of the providers configured in an ADFS/SharePoint environment.

    The ADFS logon pages have been customized using the PowerShell commands to change backgrounds and text, but the order the providers show don't look to have a way to set the order.

    Anyone know the PowerShell or other ADFS config commands to make these appear in a specific order?

    Monday, March 7, 2016 1:05 PM


All replies

  • You'll have to play with JavaScript and import it into your onload.js from your Web Theme.

    If you want examples of JavaScript customization for Home Realm  Discovery, you can have a look at this post:


    It  is not what you want to do but it describes all the steps to modify the onload JavaScript as well as some HRD customizations.

    Note: Posts are provided “AS IS” without warranty of any kind, either expressed or implied, including but not limited to the implied warranties of merchantability and/or fitness for a particular purpose.

    Monday, March 7, 2016 3:43 PM
  • Hi,

    I know this is pretty old thread, anyway if there is a single soul still looking for the solution following JavaScript snippet might help. Just use IDPOrder array for setting the correct order (use claim provider trusts identifiers).

    hope that it's useful for someone

    if ( document.getElementById("hrdArea") ) {
    	var IDPOrder = ['http://adfs.bspc.sk/adfs/services/trust','AD AUTHORITY'];
    	var IDPArea = document.getElementById("bySelection");
    	var HRDSelectionElement = document.getElementById("hrdSelection");	
    	// get IDPs
    	var IDPDivs=IDPArea.getElementsByClassName("idp")
    	// array for elements that should be reorederd 
    	var IDPElementsToPrepend=[];
    	var i,j;
    	// remove elements that are to be reordered
    	for(j=0; j<IDPOrder.length; j++)
    		for(i=0; i<IDPDivs.length; i++)
    			// IDP can be defined by onclick event / redirection; valid for Windows Server 2012 R2
    			var onclickValue=IDPDivs[i].getAttributeNode('onclick').nodeValue
    			if (onclickValue == "HRD.selection('"+IDPOrder[j]+"'); return false;")
    			   // Save the element so we can add it later
    			   // Remove the element from IDP area
    	// add elements in order 
    	for(j=IDPElementsToPrepend.length-1; j>=0 ;j--)
    		var currIDP=IDPArea.getElementsByClassName("idp")
    		HRDSelectionElement.parentElement.insertBefore(IDPElementsToPrepend[j], currIDP[0]);
    	//re-index all the elements so we have correct tabIndex
    	for(j=0; j<IDPDivs.length; j++)

    • Edited by Martin Rublik Tuesday, September 26, 2017 12:52 PM final version - tested against FF, Chrome and IE
    Friday, September 22, 2017 1:23 PM
  • Sunday, September 24, 2017 7:19 PM
  • Even though this is an old thread it's still the first result to show up in Google when looking for a solution to this question. I tried Martin's solution here, but it has two downsides for my scenario:

    - You have to give the order manually, which adds to administration when you add or remove Claims Providers
    - The list is sorted by the Claims Providers' identifier, not display name (which is what the users see)

    Adding your own code to onload.js has already been covered here so I won't go into that. This code is not my own doing (credit where it's due), but this will automatically sort the IdPs based on their name without additional work required:

    if ( document.getElementById('hrdArea') ) { function getLabel(element) { return element.querySelector('span').textContent; }

    // Optional line to remove local AD from the list
    // document.querySelector('[onclick="HRD.selection(\'AD AUTHORITY\'); return false;"]').outerHTML = '';
    var idpsContainer = document.querySelector('#hrdArea div#bySelection'); var idps = document.querySelectorAll('#hrdArea div.idp'); // Order rows var orderedIdps = Array.prototype.slice.call(idps) .sort(function(aElement, bElement) { var a = getLabel(aElement); var b = getLabel(bElement); return (a < b) ? -1 : ((a > b) ? 1 : 0); }); // Append idps element to the container orderedIdps.forEach(function(element, index) { idpsContainer.appendChild(element); // Set correct tabindex element.setAttribute('tabIndex', index + 1); }); }

    All code provided "as is".

    • Edited by AnttiS-FI Saturday, February 23, 2019 12:06 PM
    Saturday, February 23, 2019 11:56 AM