How to Turn On the mUniversality Mobile View

By default, uPortal 4.1 uses the Respondr theme and has the mUniversality mobile view disabled.  Even if you switch to use the Universality theme, mUniversality mobile view is disabled.  If you want to re-enable it for either theme, follow the steps on this page.

There are a number of ways to edit this file to do this. The snippet above adds a mapping that will always match and set the profile to mobileDefault. This should be the first mapping.

Step 1: Edit userContext.xml

• Open userContext.xml for editing (uportal-war/src/main/resources/properties/contexts/userContext.xml)

• Uncomment the reference to the bean userAgentProfileMapper in the profileMapper bean.
  
  

  ....
      <bean id="profileMapper" class="org.jasig.portal.layout.ChainingProfileMapperImpl">
          <property name="defaultProfileName" value="default" />
          <property name="subMappers">
              <util:list>
                  <ref bean="sessionAttributeProfileMapper" />
                  <!--
                   | uPortal 4.1 promotes a responsive design theme Respondr.  The older uPortal 3.x, 4.0x
                   | mUniversality view is by default disabled.  To re-enable it so those user agent strings that
                   | match the regex instruction get the mUniversality view, uncomment the following bean.
                   +-->
                  <ref bean="userAgentProfileMapper" />
  .....
      </bean>

Step 2 (optional):  Update the user-agent pattern strings

<!-- 
 | When a user-agent profile mapping is enabled (see userContext.xml), uPortal uses this expression to
 | determine whether the user is on a mobile device, such as a phone or a tablet, or a desktop/laptop
 | browser;  users may also choose the mobile/non-mobile experience when they log in.
 +-->
<mobile.user.agent.regex>(.*iPhone.*)|(.*Android.*)|(.*IEMobile.*)|(.*Safari.*Pre.*)|(.*Nokia.*AppleWebKit.*)|(.*Black[Bb]erry.*)|(.*Opera Mobile.*)|(.*Windows Phone.*)|(.*Fennec.*)|(.*Minimo.*)</mobile.user.agent.regex>

Step 3: Rebuild/Redeploy uPortal

ant clean deploy-war

Step 4: Restart tomcat

Restart your tomcat server to see the changes.

Step 5: Test your changes using the User Agent

You can make sure that your full site is being rendered by verifying the mobile view is being displaying by doing the following:  

uPortal4 decides to serve the desktop or mobile themes based on the User Agent string sent by the browser headers. All browsers allow you to switch your User Agent string to pretend to be a different browser. This is done either through built in debug tools (Safari, Chrome, IE) or through an addon (FireFox and Chrome). The User Agent is detected once and then stored in your session. You need to clear your cookies after changing the User Agent. Some browsers/tools reset the User Agent when they are restarted.

5a) Approach 1 (preferred): Changing the User Agent

Changing the User Agent in Safari

1. Click on the sprocket icon to open the Settings menu, then choose Preferences. 
2. On the Advanced tab, tick the "Show Develop menu in menu bar" checkbox. 
3. Then close the Preferences window.
4. Next, click on the page icon to open the Current Page menu and choose Develop > User Agent. 
5. Select a User Agent from the list.

Since the theme setting is saved in your session, you need to clear your cookies after you change the User Agent string:

1. In Safari, go to Settings > Preferences > Privacy. 
2. Under "Cookies and other website data" click on the "Details" button. 
3. Search for your uPortal domain, select it from the list, and click the "Remove" button. 
4. Then refresh the page.

Changing the User Agent in Chrome

1. Click on the wrench icon to open the Settings menu, and choose Tools > Developer Tools. 
2. Click on the sprocket icon at the bottom right of the Developer Tools window.
3. Under "Network", tick the "Override User Agent" checkbox and then choose a User Agent string.

The uPortal theme is saved in your session, so you need to delete the session cookie:

1. In the Developer Tools window, under the "Resources" tab, select your domain under "Cookies" on the left panel. 
2. Then right click the JSESSIONID cookie and choose "Delete". 
3. The refresh the page.

Changing the User Agent in FireFox

Changing the User Agent string in FireFox is tedious, so it is best to use an Add On. There are several available from the Get Add-ons tool in FireFox. (User Agent Switcher by Chris Pederick is a good one.)

After you change the User Agent, you need to clear your cookies because uPortal saves the theme selection in your session:

1. From the navigation menu (you might have to press Alt to see it) choose Tools > Options. 
2. Under the Privacy tab, click the "remove individual cookies" link. 
3. Search for your domain name and remove the "JSESSIONID" cookie.

Changing the User Agent in Internet Explorer

1. From the navigation menu (You might have to press Alt to see it) choose Tools > F12 Developer Tools. This will open the Developer Tools window. 
2. From the Developer Tools window, choose Tools > change User Agent string, then choose the User Agent. 
3. If a User Agent isn't listed, choose "Custom" to add one. (Refer to the list of Common Mobile User Agent Strings in the list below)
4. Click the "Add" button, then choose the User Agent and click the "Set" button. 
5. Restart the Browser to reset the User Agent string to default.

1. In the Developer Tools, choose Cache > clear session cookies to clear your session.

5b) Approach 2 (not preferred): Forcing mUnversality for any user-agent string

Alternately, you can temporarily edit pom.xml to always serve the mobile theme regardless of User Agent. Modify the user-agent string to a mapping that matches ".*".  This approach is not preferred because if you leave this, you would always have a mobile experience, even for desktop environments.

<!-- 
 | When a user-agent profile mapping is enabled (see userContext.xml), uPortal uses this expression to
 | determine whether the user is on a mobile device, such as a phone or a tablet, or a desktop/laptop
 | browser;  users may also choose the mobile/non-mobile experience when they log in.
 +-->
<mobile.user.agent.regex>.*</mobile.user.agent.regex>