Professional Documents
Culture Documents
Table of Contents
About this guide .............................................................................................................................................................. 3
Prerequisite to using JavaScript on your portal pages ............................................................................................... 5
Exercises ......................................................................................................................................................................... 6
Exercise 1: Mini-editor move “Don’t have an account” to top of page using JavaScript ............................. 6
Exercise Description ............................................................................................................................ 6
Exercise Objective ............................................................................................................................... 7
Exercise Tasks .................................................................................................................................... 7
Exercise 2: Embedding a background image using CSS ......................................................................... 11
Exercise Description .......................................................................................................................... 11
Exercise Overview ............................................................................................................................. 11
Exercise Tasks .................................................................................................................................. 12
Exercise 3: jQuery ThemeRoller Basics ................................................................................................... 17
Exercise Description .......................................................................................................................... 17
Exercise Overview ............................................................................................................................. 17
Exercise Tasks .................................................................................................................................. 17
Exercise 4: Introduction to ISE Portal Builder........................................................................................... 26
Exercise Description .......................................................................................................................... 26
Exercise Objective ............................................................................................................................. 26
Exercise Tasks .................................................................................................................................. 26
Function Tools
Exercises
This guide includes the following exercises:
Exercise 1: Mini-editor move “Don’t have an account” to top of page using JavaScript
Exercise Objective
In this exercise, your goal is to complete the following tasks:
Learn how to inject code such as JavaScript into an ISE portal page
Move an element “Don’t have an account” to the top of the page
Exercise Tasks
Step 1 Access your ISE admin portal
Step 2 Choose Guest Access > Configure > Guest Portals
Step 3 Choose your Self-Registered Guest Portal
Step 4 Select Portal Page Customization
Optional Content 1 box will put your text above the instructional text section.
Note: While in HTML Source you can enter HTML, Javascript and CSS
For this example we are going to resize the message text, “Don’t have an account” and move it to the top of
the screen so it’s more visible.
Step 7 Paste the script between the lines below (--------) into the mini-editor
--------
<script>
$('#ui_login_self_reg_button').insertAfter('#ui_login_instruction_message');
</script>
<style>
#ui_login_self_reg_button { font-size:2em; }
</style>
--------
Step 8 Select the Toggle HTML source again.
Notice the Preview screen is updated with the “Don’t have an account” text moved to the top of the Sign on
Page.
Note: Not all modifications will show in the mini-preview. For those that don’t, use the portal test url shown below.
Note: These changes are only for the English language portal (or whatever language you implement it in). Some customers will be fine with this, for
example a U.S. University where everyone should be able to understand a basic English Guest Portal.
For those instances the recommendation would be to always present English regardless of the Guest’s browser locale settings. Otherwise if a user
accessed the Guest Network using a browser set to another language they would not see this modification as it was only made on the English
portal.
This setting is under Portal Behaviour and Flow Settings > Portal Settings > Display Language: Always Use
If you would like to see this change on other languages then you will need to use one of the following
methods:
1. Using the ISE UI repeat the process for every language you want to have the JavaScript implemented.
2. Export the Language Properties file and put the JavaScript under optional_content_2 for each language, then
reimport it.
3. Develop CSS that will make this change globally for all languages (requires someone who deeply knows CSS)
4. Use the ISE Portal Builder for making easy global page layout changes. This is only recommended if you have
lots of layout changes to make and don’t have experienced staff or funds to make a more customized
experience on your own.
Per note above you won’t see the changes on the other language login page. Try changing the language and
notice its missing.
Step 11 Click on Japanese and then look at the preview and notice the “Don’t have an account” text is in its original
place at the bottom under the button.
Exercise Overview
In this exercise, your goal is to complete the following tasks:
Upload your image to File Remediation location
Export a CSS theme for modification
Modify the CSS to serve a background
Implement the new CSS theme on your portal
Exercise Tasks
Step 1 Exercise TasksGo to the ISE UI and login if needed
Step 2 Choose Policy > Policy Elements > Results
Step 3 Expand Posture and Remediation Actions
Step 4 Choose File Remediation
Now that you have uploaded your image here is the path to that image:
Use the relative path for your code so it will work with any deployments (standalone or distributed) as the file
is served from the PSN. Absolute path can be used for testing outside of ISE.
Relative: /auth/packages/<Name>/<File_Name>
Example: /auth/packages/iseiscool-guestbackground/iseiscool-background.jpg
Absolute: https://psn_fqdn:portal_port/auth/packages/<Name>/<File_Name>
Example: https://ise-1.demo.local:8443/auth/packages/iseiscool-guestbackground/iseiscool-
background.jpg
Step 6 Choose Guest Access > Configure > Guest Portals > Hotspot Guest Portal (default)
Step 7 Choose Portal Page Customization
Step 8 Select Advanced Customization > Export/Import Themes
Step 9 Choose the theme you want to work with and then Select Export Theme CSS
---------------
.ui-bar-a {
border: 1px solid #d3d3d3 /*{a-bar-border}*/;
background: #4ea4f4 /*{a-bar-background-color}*/;
color: #ffffff /*{a-bar-color}*/;
font-weight: bold;
text-shadow: 0 /*{a-bar-shadow-x}*/ 0 /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #0a569c /*{a-bar-shadow-
color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #4da2f1 /*{a-bar-background-start}*/), to(
.ui-bar-a {
border: 1px solid #d3d3d3 /*{a-bar-border}*/;
color: #ffffff /*{a-bar-color}*/;
font-weight: bold;
text-shadow: 0 /*{a-bar-shadow-x}*/ 0 /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #0a569c /*{a-bar-shadow-
color}*/;
}
Step 16 Go back to ISE and login if needed and navigate back to same section. If the page is still open skip to Step
23
Step 17 Choose Guest Access > Configure > Guest Portals > Hotspot Guest Portal (default)
Step 24 You will need to click on the portal test url to see the change
Note: This customization can still be combined with other changes to the page editors and CSS. It cannot be combined with the portal builder, as
the portal builder will overwrite with a JavaScript overlay.
Note: Not all tweaks will be shown in the mini-preview
Exercise Overview
In this exercise, your goal is to complete the following tasks:
Export a theme from ISE
Import into jQuery ThemeRoller and Tweak some of your settings in the tool
Import the theme back into ISE for use
Review your changes
Exercise Tasks
Step 1 Go to the ISE UI and login if needed
Step 2 Choose Guest Access > Configure > Guest Portals > Self-Registered Guest Portal (Default)
Step 11 Open guest.theme.1.css file from your desktop with a text editor
Step 12 Select all your text
Step 13 Copy all your text
Step 14 Change back to the jQuery tab open in your browser
Step 15 Select Import or upgrade at the top of the tool page
Step 16 Paste the text into the jQuery Import Theme box.
The scheme of Cisco's end-user portals is compatible with jQuery ThemeRoller. You can easily edit the look for an
entire portal using the ThemeRoller web site. ThemeRoller “swatches” each contain a unique scheme, which defines
the colors, textures, and font settings for the primary UI elements, such as toolbars, content blocks, buttons, list items,
and font text-shadow. A scheme also defines the settings for various interaction states of the buttons: normal, hover,
and pressed.
You cannot apply additional swatches, unless you add HTML code (to the Optional Content, for example) with
elements that use the newly added swatches. This is beyond the scope of this document and would require someone
with advanced web publishing skills.
For additional information on swatches and themes in jQuery Mobile ThemeRoller, see "Theming Overview" in
Creating a Custom Theme with ThemeRoller. Use the online help in jQuery Mobile ThemeRoller to learn how to
download, import, and share your custom themes.
For tutorials on how to use HTML, CSS, and Javascript code to customize the text and content that appears on your
portal pages, visit Code Academy.
Let’s try changing some of the elements and see how they show in our portal on ISE.
Swatch A - Drag a color from the top color chooser of the tool page to the background
Swatch B – change your Active item, such as the Button Color
Swatch C – if you choose to change error conditions color
After implementation of the new theme, you will see the changes to Swatch A (background) and
Swatch B (button color) in the mini-preview on the page. To see the changes to Swatch C (f you
made them) then use the portal test URL by testing the actual flow
Note: This customization can still be combined with other changes to the page editors and CSS. It cannot be combined with the portal builder, as
the portal builder will overwrite with its own JavaScript overlay file.
The Cisco ISE portal builder is a web-based tool that allows you to customize the various portals in ISE,
including hotspot portals, self-registered and sponsored guest portals, BYOD portals, client-provisioning
portals, MDM portals, and My Devices Portals. The ISE portal builder allows you do powerful things with portal
customization that are not possible through the basic ISE GUI portal customization interface.
Once you have designed a custom portal, the ISE portal builder allows you to export the custom portal as a
single zip file. A simple Firefox plugin is then loaded that interacts with ISE upon login. The plugin allows easy
uploading and management of custom portals.
The portal builder main purpose is for those customers who don’t have the expertise on-staff or who would
need to pay someone to make changes that are not easily done in ISE. Example: Injecting a background
image, moving elements around on the page, changing the button color, and adding an announcement image.
If you only need to make a few minor changes to the portal it is not recommended to use the portal builder. It
would be recommended to implement these in the portal directly on ISE itself.
In this scenario, you will explore the ISE portal builder, create a custom hotspot and upload the custom portal
to ISE.
Exercise Objective
In this exercise, your goal is to complete the following task:
Explore the ISE Portal Builder
Create a portal
Export the portal
Upload the portal to ISE
Exercise Tasks
Step 1 Using Firefox, navigate to the ISE Portal Builder Site at http://isepb.cisco.com
Step 2 Click FAQ at the top right of the screen to review the Frequently Asked Questions. Get familiar with them.
Step 4 Click Demos at the top right of the screen and review the two short videos on creating a portal and
uploading a portal using the Firefox plugin.
Step 5 Go back to the ISE Portal Builder tab and click Sign In With Cisco ID.
Private Images—upload your own custom images that can later be used for portal customization.
Public Images—contains various images for use for things like portal backgrounds, banners and logos.
Step 8 Click Upload Images, and select a background image you would like to use or you can user on the public
images.
Step 9 Click Open. This image will be the custom background for our custom hotspot portal.
Step 10 After the image has been uploaded, click X to close the image manager.
Step 11 Click on the Template Gallery icon in the left column. The ISE Portal Builder comes loaded with different
templates.
Figure 33
Template Gallery
Icon
Step 12 Hover over the Default template and click the check mark to start creating a custom portal based on this
template.
Step 16 Click the Cisco logo on the upper left side of the top banner. This opens the Logo Editor.
Step 18 Navigate to the Public Images section and select the ISEisCOOL Hotspot logo. Click Select.
Step 20 Click on the Hotspot Portal text and drag it to the left and put in the trash can that will appear.
Step 21 Click on the top banner image (not the logo) to bring up the banner Block editor. The pointer will change to a
hand and then you can click on it.
Step 22 Click Replace to replace the default banner image.
Step 24 Click the Banner tag on the right so that only banner images display.
Step 25 Select the ISEisC00L banner (looks like mountains) and click Select.
Step 26 Click anywhere in the default white background to show the Background editor.
Step 28 Select the mountain image you uploaded before. Click Select
Step 29 Click the text inside the Acceptable Use Policy to open the Text editor.
Step 30 Click Edit, highlight the existing text and replace with an example, like in the image below. Bold the first line
of text to show that you can change text attributes, as well.
Step 32 Click on the Accept button for the Acceptable Use Policy to bring up the Button editor.
Step 33 Click Background-color to change the background color of the button to red. Click OK.
Step 34 Click the X in the Button editor to return to the main portal editor.
Step 35 Click the gear icon to open the portal Settings page.
Step 36 Check the box for Require an access code. Enter iseiscool in the Access code box and click X.
Figure 47 Export
Step 38 Do not change the portal name (HotspotPB) and the type (Hotspot Guest Portal).
Step 39 Click on the Get ISEPB Portal Upload & Config Tool in the bottom left of the notification screen. This will
download to your local machine.
Step 40 Install the add-on to Firefox (process varies depending on Apple or Windows OS)
Now you have created and exported your custom portal using the ISE portal builder web interface. Next you will import
the portal into ISE using the ISE portal builder add-on for Firefox.
Note: The Uploader and config tool monitors your connections to ISE and won’t start until it sees a new connection
Step 43 Close out of any browser tab that has ISE opened
Step 48 Click Browse on the ISEPB Portal Upload & Config Tool pop up.
Step 49 From the File Upload window, select the custom portal zip file you exported in the earlier scenario and click
Open.
Step 50 When finished uploading, click OK on the ISEPB Portal Upload & Config Tool pop up.
Note: This populates the Portal Name and Description. Do not make any changes to those fields.
It is not necessary to click Save, as the tool saves the changes. If you click save within ISE, you may lose changes.
When you implement a portal using the ISE portal builder tool, it is important to make all changes to portal settings inside the portal builder, before
exporting the portal. Creating a portal with the ISE portal builder and editing the portal settings within ISE will likely have unpredictably bad results. If
you have created a portal with the portal builder, imported it into ISE and then need to make changes to the portal settings, you should implement
the changes inside ISE portal builder, and export/import the portal again
Step 51 Click Portal test URL to preview your custom imported portal.
Step 52 This displays your custom portal. Close the tab that opened for the portal test URL and click Close on the ISE
page.