on - edited on by
thomas
- Set person being visited from a pull-down list of users
- Set person being visited from a list of department and users
- Statically Assign an Email Address for the Sponsor
This document shows you how to enable your guests to choose from a list of sponsors available to them. It uses the person being visited field to send the email for the user doing a self-registration to a person with privileges on approving guest accounts. This would be used in environments where you have designated a list of sponsors that can be used to approve accounts. Perhaps a few lobby ambassadors are responsible to create the accounts. This also helps the guest from having to enter in someone's email, remember it, etc.
The self-registration page settings require the person being visited to be enabled.
Here is a guide on the various customization options available in ISE and how to work with them. Please look over the JavaScript section to get familiar with it. How To: ISE Web Portal Customization Options.
Set person being visited from a pull-down list of users
The flow would be:
- Guest visits lobby and meets with Sponsor 1 who tells them to connect to the Guest network and register for account
- Guest connects to the guest network and clicks on Don't have an account
- Guest fills in the information, chooses Sponsor 1, and submits
- Sponsor 1 receives email and approves the account
Under self-reg portal > page settings > self-reg page, make sure you require approval
The following code is injected under self-reg portal > page customization > Registration Form > Optional Content 2
This code worked on 2.1-2.3, should work on higher as well
<script>
(function(){
setTimeout(function(){
//Put your data here. Left side is visible to user - should be a name. Right side email address.
var persons = {
'Sponsor 1': 'email1@gmail.com',
'Sponsor 2': 'email2@gmail.com'
}
jQuery("input[name='guestUser.fieldValues.ui_person_visited']").parent().hide();
jQuery("input[name='guestUser.fieldValues.ui_person_visited']").parent().after("<div class='ui-select'><div data-corners='true' data-shadow='true' data-iconshadow='true' data-wrapperels='span' data-icon='arrow-d' data-iconpos='right' data-theme='a' class='ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right ui-btn-up-a' id='outerDiv'><span class='ui-btn-inner'><span class='ui-btn-text'><span id='displayName'></span></span><span class='ui-icon ui-icon-arrow-d ui-icon-shadow'> </span></span><select name='guestUser.fieldValues.ui_person_visited_name' id='guestUser.fieldValues.ui_person_visited_name' class='ui-body-a'></select></div></div>");
jQuery.each( persons, function( key, value ) {
jQuery('#guestUser\\.fieldValues\\.ui_person_visited_name').append("<option value="+value+">"+key+"</option>");
});
jQuery('#guestUser\\.fieldValues\\.ui_person_visited_name > option:first-child').attr('selected', 'selected');
jQuery('#guestUser\\.fieldValues\\.ui_person_visited_name').on('change', function(evt){
jQuery("#guestUser\\.fieldValues\\.ui_person_visited").val(jQuery(this).val());
jQuery('#displayName').html(jQuery(this).find('option:selected').text());
});
jQuery('#guestUser\\.fieldValues\\.ui_person_visited_name').trigger('change');
},250);
})();
</script>
Set person being visited from a list of department and users
The following code will give you a way to choose a department and from that department you would have a list of people in that department.
- Navigate to Work Centers > Guest Access > Settings> Custom Fields
- Create a custom field of Department as a string. Add it and save it.
- Navigate to Work Centers > Guest Access > Portals & components > your self-reg portal > Registration Form Settings
- Select the custom field you created:
- Check the box for Department
- Make sure you require approval
- Navigate to Page customization > Pages > Registration Form Page > Optional Content 2
- Copy/paste the following code in between the scripts , then toggle out and save the page
<script>
setTimeout(function(){
var dropdown = function() {
$("input[name='guestUser.fieldValues.ui_person_visited']").parent().hide();
$("input[name='guestUser.fieldValues.ui_person_visited']").parent().after("<div class='ui-select'><div data-corners='true' data-shadow='true' data-iconshadow='true' data-wrapperels='span' data-icon='arrow-d' data-iconpos='right' data-theme='a' class='ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right ui-btn-up-a' id='outerDiv'><span class='ui-btn-inner'><span class='ui-btn-text'><span id='displayName'></span></span><span class='ui-icon ui-icon-arrow-d ui-icon-shadow'> </span></span><select name='guestUser.fieldValues.ui_email' id='guestUser.fieldValues.ui_email' class='ui-body-a'></select></div></div>");
setup();
$.each(persons, function(key, value) {
$('#guestUser\\.fieldValues\\.ui_email').append("<option value="+value+">"+key+"</option>");
});
$('#guestUser\\.fieldValues\\.ui_email > option:first-child').attr('selected', 'selected');
$('#guestUser\\.fieldValues\\.ui_email').on('change', function(){
$("#guestUser\\.fieldValues\\.ui_person_visited").val(jQuery(this).val());
$('#displayName').html(jQuery(this).find('option:selected').text());
});
$('#guestUser\\.fieldValues\\.ui_email').trigger('change');
}
var departments = {
'IT': 'IT',
'Finance': 'Finance'
}
$("input[name='guestUser.fieldValues.ui_department_text']").parent().hide();
$("input[name='guestUser.fieldValues.ui_department_text']").parent().after("<div class='ui-select'><div data-corners='true' data-shadow='true' data-iconshadow='true' data-wrapperels='span' data-icon='arrow-d' data-iconpos='right' data-theme='a' class='ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right ui-btn-up-a' id='outerDiv'><span class='ui-btn-inner'><span class='ui-btn-text'><span id='displayDepartment'></span></span><span class='ui-icon ui-icon-arrow-d ui-icon-shadow'> </span></span><select name='guestUser.fieldValues.ui_department' id='guestUser.fieldValues.ui_department' class='ui-body-a'></select></div></div>");
$('[data-role="fieldcontain"]:nth-child(7)').before($('[data-role="fieldcontain"]:last'));
$.each(departments, function( key, value ) {
$('#guestUser\\.fieldValues\\.ui_department').append("<option value="+value+">"+key+"</option>");
});
$('#guestUser\\.fieldValues\\.ui_department > option:first-child > option:first-child').attr('selected', 'selected');
$('#guestUser\\.fieldValues\\.ui_department').on('change', function(){
$('[id="guestUser.fieldValues.ui_email"]').parent().remove()
$("#guestUser\\.fieldValues\\.ui_department_text").val($(this).val());
$('#displayDepartment').html($(this).find('option:selected').text());
dropdown();
});
$('#guestUser\\.fieldValues\\.ui_department').trigger('change');
}, 500);
var setup = function() {
if(($("#guestUser\\.fieldValues\\.ui_department_text").val()) == 'Finance') {
persons = {
'Jack': 'jack@cisco.com',
'Anthony': 'anton@cisco.com',
'Jeff':'jeff@cisco.com'
}
} else if (($("#guestUser\\.fieldValues\\.ui_department_text").val()) == 'IT') {
persons = {
'Michael': 'mike@cisco.com',
'Fred': 'fredy@cisco.com',
'Simon': 'simon@cisco.com'
}
} else {
persons = {
'Choose department': 'Choose department',
}
}
return persons;
}
</script>
Statically Assign an Email Address for the Sponsor
Navigate to Work Centers > Portal & Components > Guest Portals > Self-reg portal > Portal Page Customizations > Registration Form Page
<script>
setTimeout(function(){
$('#guestUser\\.fieldValues\\.ui_person_visited').val('sponsors@cisco.com');
$('#guestUser\\.fieldValues\\.ui_person_visited').attr('disabled', true);
}, 500);
</script>
