on 06-29-2017 12:59 PM
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:
BUTTON SCRIPT
PULL DOWN SCRIPT
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.
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)
// 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:
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.
Find answers to your questions by entering keywords or phrases in the Search bar above. New here? Use these resources to familiarize yourself with the community: