cancel
Showing results for 
Search instead for 
Did you mean: 
cancel

ISE Guest Portal Multi-language override (choose your language)

2139
Views
3
Helpful
2
Comments

This document explains how to configure a guest portal that allows a user to choose to override the automatic language per the user device browser locale.

Thanks to chmoreto and spustovi for the development and testing of this concept

Please check this guide on how to use portal customization and javascript before continuing

How To: ISE Web Portal Customization Options

The 2 common use cases:

  • Shared machine where different people need different languages, this is easier than changing the browser locale.
  • In some countries they might use English by default but when they get into more specifics (such as the AUP) they want to read in their native language

BUTTON SCRIPT

LangButtons1.PNG

PULL DOWN SCRIPT

LangDropdown5.PNG

ISE doesn't have the capability to do this out of box.

The following solution explains how to make it work:

Example: German, Japanese, English, Russian

Work Centers > Guest Access > Portal & Components > Guest Portals

Create a guest portal for each language you need to override.

  1. Create a main portal (ex: myguestportal) (this is the one you would redirect to in your authorization profile) and set Display language: Use Browser Locale
    Screen Shot 2017-06-29 at 3.51.30 PM.png
  2. Create additional portals (ex: myguestportal - korean) for the language you need to switch to, under portal settings set the Display Language to Always use:
    Screen Shot 2017-06-29 at 3.51.15 PM.png
  3. On each additional portal you will need to grab the portal test URL for each language that is being forced
    The link will look like this - https://10.1.100.21:8443/portal/PortalSetup.action?portal=6931e9f0-587b-11e7-9e5b-005056aba474
    Screen Shot 2017-06-29 at 3.55.21 PM.png
  4. Now go back to your main portal
  5. Under Portal page Customization - Login Page - Optional Content 2 - toggle into HTML edit and paste in the code at the end of the document

Yellow color - this is a port for portal. It should be static.

Green color - this is a portal ID

Cyan color - this is a constructor for link

BUTTON SCRIPT

<script>


//THIS CODE IS USED FOR HIDING THE LOGIN FROM MAIN PORTAL WHERE LANGUAGE IS CHOSEN, THIS IS OPTIONAL AND NOT LIKELY NEEDED FOR MOST FLOWS
setTimeout(function() {

$('.ui-submit').hide();

$('.ui-controlgroup-controls').hide();

}, 500);


setTimeout(function() {

  var port = '8443';                                    //port

  var portals = {

    'русский (Russian)': '27488630-4628-11e7-a9f0-005056aba474',       //portal ID #1

    '日本語 (Japanese)':'27411630-1111-11e7-a9f0-005056aba111',       //portal ID #2

    'Deutsche (German)':'27488222-4222-1222-a222-005056ab2222',    //portal ID #3

  };

  var hostname = window.location.hostname;

  var WebSessionId = window.location.href.substr(window.location.href.search("\\?")).split("=")[2];

  //var contentTemplate = $('.cisco-ise-scriptable');

  var contentTemplate = $('#portalloginForm');

  var portalKeys = Object.keys(portals);

  if(portalKeys.length > 1){

      var outlet = $('<div class="language-button-outlet" style="display: flex;justify-content:center;"><div class="left-side" style="width: 200px;padding-right: 40px;"></div><div class="right-side" style="width: 200px;"></div></div>');

      contentTemplate.append(outlet);

  };

  var buttonTemplate = function(title, link){

   var portalLink = 'https://' + hostname + ':' + port + '/portal/gateway?sessionId=' + WebSessionId + '&portal=' + link + '&action=cwa';

    return $('<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" data-inline="true" data-mini="true" data-disabled="false" class="ui-submit ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-center ui-btn-up-b" aria-disabled="false">'

    + '<span class="ui-btn-inner">'

    + '<a href=' + portalLink + ' style="color: #fff;text-decoration: none;"><span class="ui-btn-text">' + title +'</span></a>'

    + '</span>'

    + '</div>');

  };

  var languageConstructor = function(portals){

    portalKeys.forEach(function(key, i){

    var button = buttonTemplate(key, portals[key]);

      if(portalKeys.length <= 1){

          return contentTemplate.append(button);

        }

        if(i%2 == 0){

        $('.language-button-outlet .left-side').append(button);

        }else{

        $('.language-button-outlet .right-side').append(button);

        }

      });

    };

  languageConstructor(portals);

  document.querySelector('style').textContent += "@media only screen and (min-device-width: 320px) and (max-device-width: 768px) { .language-button-outlet { display: block !important; } .language-button-outlet > div { margin: auto; width: 100% !important; } }";

}, 1500);

</script>


PULL DOWN SCRIPT

You can move the position of this and put it under "Self reg" button.


Change the prepend (in bold) to append


<script>

setTimeout(function(){

    var port = '8443';                                    //port                 

    var dropDownText = 'Choose Your Language';              // text for dropdown

    var portals = {

    "Korean": '27488630-4628-11e7-a9f0-005056aba474',   //portal ID #1

    "Japanese":'27411630-1111-11e7-a9f0-005056aba111',  //portal ID #2

    "French":'27488222-4222-1222-a222-005056ab2222',    //portal ID #3

    };

    var hostname = window.location.hostname;

    var WebSessionId = window.location.href.substr(window.location.href.search("\\?")).split("=")[2];

    var portalKeys = Object.keys(portals);

    var contentTemplate = $('#portallogindiv');

    var dropdown = $('<a href="#cisco-desktop-header-menu-page-home" data-rel="popup" data-role="button" data-icon="arrow-d" data-iconpos="right" class="cisco-desktop-header-menu-button ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" aria-haspopup="true" aria-owns="cisco-desktop-header-menu-page-home" aria-expanded="false" style="width: 380px;">'

    + '<span class="ui-btn-inner" style="padding-bottom: 5px;">'

    + '<span class="ui-btn-text">' + dropDownText + '</span>'

    + '<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"> </span>'

    + '</span></a>');

    contentTemplate.prepend(dropdown);

    var dropdownList = $('<div class="ui-popup-container ui-popup-active" id="cisco-desktop-header-menu-page-home-popup" style="width: 380px;">'

        + '</div>');

    dropdown.append(dropdownList);

    var buttonTemplate = function(title, link){

        var portalLink = 'https://' + hostname + ':' + port + '/portal/gateway?sessionId=' + WebSessionId + '&portal=' + link + '&action=cwa';

        return $('<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-up-a" style="margin:0;">'

        + '<div class="ui-btn-inner ui-li">'

        + '<div class="ui-btn-text">'

        + '<a href=' + portalLink + ' target="_blank" class="ui-link-inherit">'+ title +'</a>'

        + '</div>'

        + '</div>'

        + '</li>');

    };

    var languageConstructor = function(portals){

        portalKeys.forEach(function(key, i){

            var list = buttonTemplate(key, portals[key]);

            return dropdownList.append(list);

        });

        dropdownList.hide();

    };

    languageConstructor(portals);

    dropdown.on('click', function(evt){

        $('#cisco-desktop-header-menu-page-home-popup').toggle();

    });

}, 1500);

</script>



Flag script


You need to upload some images (flags) inside Custom portal files. Script will use names of these files. (highlighted green color)

Screen Shot 2018-03-27 at 3.32.30 PM.png

// This is a style for images. Here you can increase/decrease width and height of image(flag). Even if images have different size, it should align.


<style>

.cisco-ise-body img {

  width: 100px;

  height: 70px;

}

</style>

<script>

//THIS CODE IS USED FOR HIDING THE LOGIN FROM MAIN PORTAL WHERE LANGUAGE IS CHOSEN, THIS IS OPTIONAL AND NOT LIKELY NEEDED FOR MOST FLOWS

setTimeout(function() {

  $('.ui-submit').hide();

  $('.ui-controlgroup-controls').hide();

}, 500);

setTimeout(function() {

  var port = '8443';                                    //port

  var portals = {

    'US.png':'27488222-4222-1222-a222-005056ab2222',            //portal ID #1

    'Ukraine.png':'27411630-1111-11e7-a9f0-005056aba111',       //portal ID #2

    'GB.png' : '27488222-4222-1222-a222-005056ab2222',          //portal ID #3

    'Germany.png': '27488222-4222-1222-a222-005056ab2222'   //portal ID #4

  };

// You can add more images/links if you need. Just add 'image' : 'portal ID', and separate by comma

  var hostname = window.location.hostname;

  var WebSessionId = window.location.href.substr(window.location.href.search("\\?")).split("=")[2];

  var contentTemplate = $('#portalloginForm');

  var portalKeys = Object.keys(portals);

  if(portalKeys.length > 1){

      var outlet = $('<div class="language-button-outlet" style="display: flex;justify-content:center;"><div class="left-side" style="width: 200px;padding-right: 40px;"></div><div class="right-side" style="width: 200px;"></div></div>');

      contentTemplate.append(outlet);

  };

  var buttonTemplate = function(title, link){

   var portalLink = 'https://' + hostname + ':' + port + '/portal/gateway?sessionId=' + WebSessionId + '&portal=' + link + '&action=cwa';

    return $('<div>'

    + '<span class="ui-btn-inner">'

    + '<a href=' + portalLink + ' style="color: #fff;text-decoration: none;">'

    + '<img src="customFiles/' + title + '"></a>'

    + '</span>'

    + '</div>');

  };

  var languageConstructor = function(portals){

    portalKeys.forEach(function(key, i){

    var button = buttonTemplate(key, portals[key]);

      if(portalKeys.length <= 1){

          return contentTemplate.append(button);

      }

        

        if(i%2 == 0){

          $('.language-button-outlet .left-side').append(button);

        }else{

          $('.language-button-outlet .right-side').append(button);

        }

      });

    };

  languageConstructor(portals);

  document.querySelector('style').textContent += "@media only screen and (min-device-width: 320px) and (max-device-width: 768px) { .language-button-outlet { display: block !important; } .language-button-outlet > div { margin: auto; width: 100% !important; } }";

}, 1500);

</script>

Here is some flags:

https://www.google.nl/search?dcr=0&biw=1440&bih=715&tbm=isch&sa=1&ei=Mj66WsKTFMetUfnhiIgK&q=country+flags&oq=country+fla…

Comments
Beginner

Hello,


I created Self registered guest portal with Isepb, and now a try to implement your code but it's doesn't work..
Do you have any idea ?

Thanks in advance.

Cisco Employee
The ISE Portal builder code is different, please reach out to them for support and see if they can provide it.