ISE Guest Self-Registration : Choose from a Sponsor List

[Jason Kunst]

• 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:

1. Guest visits lobby and meets with Sponsor 1 who tells them to connect to the Guest network and register for account
2. Guest connects to the guest network and clicks on Don't have an account
3. Guest fills in the information, chooses Sponsor 1, and submits
4. 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.

1. Navigate to Work Centers > Guest Access > Settings> Custom Fields
2. Create a custom field of Department as a string. Add it and save it.
   
3. Navigate to Work Centers > Guest Access > Portals & components > your self-reg portal > Registration Form Settings
4. Select the custom field you created:
    
5. Check the box for Department
   
6. Make sure you require approval
   
7. Navigate to Page customization > Pages > Registration Form Page > Optional Content 2
8. 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>

[icarimo]

Hello,
Thank you so much for the well explained guide.

However, I am with on doubt, when I copy the script to:
Work Centers > Portal & Components > Guest Portals > Self-reg portal > Portal Page Customizations > Registration Form Page
Cisco ISE is treating the script as plain text instead of interpreting the script

Is there anything that I need to change here? I also tried the "Toogle HTML souce"