Jasig Spring 2010 Tab Tags
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Jasig Spring 2010 Tab Tags



Hello, here are the slides to the presentation "Implementing Multi-leve Navigation in uPortal"

Hello, here are the slides to the presentation "Implementing Multi-leve Navigation in uPortal"



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.slideshare.net 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • need to have a method of organizing A LOT of content for a diverse set of users without alienating any of the many content providers
  • worked out really well for student portal… able to have a lot of content by default without it being overwhelming
  • technology advances provide for a an alternative to multiple levels of navigation, but there are scaling issues to consider
  • from the beginning this approach was very appealing
  • we feel it may benefit others as well, and jeff is going to share some details on how to take it for a test drive
  • I am logged in as the demo user.
  • Identify our nomenclature tab -> page -> portlet. Though our pages are really uportal tabs.
  • This allows for portlets that our best viewed full screen to have their own tab. My user has 18 tabs that contain content.
  • show demo on local machine.
  • This will produce the effect as in the previous slide, where the tab named "Developement" is a  sub-tab or sub-page of the tabTag container "Demo"
  • This will get you there, but it probably isn't enough. That is when a user adds a tab, it won't be tagged correctly.  or a users open tab won't persist when navigation between tabTags.
  • note, this is leveraging existing functionality in uPortal that is available to add and track custom structure attributes.
  • notice the tabTag folder attribute. If we added this to the fragment layout.
  • Need to add snapshot of incoming theme xml and show tabTagList
  • Screenshot from navigation.xsl
  • urls get large – passing through more sturct and theme params – we will see.
  • For example, if a user wants to add a new tab to the group of tabs that are within the admin tabTag group, the add tab functionality needs to add this page to the correct group.
  • selector finds value of the activeTabTag… mention that bold text is new or changed…
  • currently, we use the import/export utility to add new tabs (with tab tags)
  • show image

Jasig Spring 2010 Tab Tags Presentation Transcript

  • 1. Implementing Multi-Level Navigation in uPortal JASIG Spring 2010 Conference
  • 2. Basic Problem…
    • Sizable Multi-Campus implementation with hundreds of portlet publications
    • Governance is very distributed, and there is a lot of content that the committees want provided by default
    • How do we organize this information in a usable way?
  • 3. Lesson Learned
    • In uPortal 2, we implemented a subtab structure to support this
    • This required a lot of custom code
    • This was a structural change that made our uPortal 3 upgrade much more difficult
    • The import/export scripts had to be changed and augmented to account for the new level of hierarchy in the layout
  • 4. Things to Consider
    • Tab Carousels
      • suffer from an out of sight out of mind dilemma
      • still have a usability issue, when tab numbers are high… how many tabs will a user scroll through?
    • Click counts
      • how do we get people to what the need quickly?
  • 5. Revelation
    • One of the things our users like is the ability to find things at a glance and drill down for more detail
    • We needed a new approach that would provide the same functionality without the upgrade and maintenance headaches
    • Jeff conceptualized tabTags…
  • 6. The tabTag Approach
    • Does not change the structure of the layout XML
    • Uses out-of-box uPortal “structure attribute” functionality to track tags associated with at tab
    • Is implemented via an optional new theme
  • 7. The tabTag Approach
    • Requires minimal code enhancements (to remember the selected tab)
    • Has no code changes that break the out-of-box uPortal theme
    • Quickly became a clear choice to meet our needs
  • 8. Currently, uPortal only has single level navigation at the tab level . I am logged in as the staff user on the default uPortal32 install.
  • 9.  
  • 10.  
  • 11. So how do we produce multi-level navigation? In this screenshot the Admin “tab container” is a navigational construct which contains three tabs: Development, Testing, Admin Tools
  • 12. The tabTag idea
      • What if we could give each tab a label, and then filter by that label?
      • Essentially, assign a non-hierarchical   type of metadata to a tab, or "tag" the "tab".
      • Analogous to labeling emails in gmail or tagging bookmarks in delicious.
      • These "tabTags" can be used to identify like tabs, and organize them accordingly during the rendering pipeline.
  • 13. How does one “tag” a tab? The power of the folder structure attribute
    • Once tabTag functionality is implemented, all one needs to do is add the structure attribute as a child of the <tab> element in a .fragment-layout or .layout file.
    <tab unremovable=&quot;N&quot; immutable=&quot;N&quot; hidden=&quot;N&quot; name=” Development &quot;>        <structure-attribute type=&quot;folder&quot;>            <name> tabTag </name>            <value> Admin </value>        </structure-attribute>
  • 14. Multi-Level Navigation Implementation Overview
      • Small footprint - non-invasive
      • Implementated in the rendering pipeline
      • UP_LAYOUT_STRUCT table remains unchanged
      • All UI components, ( css, javascript ), remain compatible
    So how do we implement this... In a nutshell, we are leveraging the power of the default uPortal distribution with minimal customizations.
  • 15. List of files need to implement tabTag functionality at its most basic level.
      • DLM_Tabs_and_columns-1.structure
      • columns.xsl ( structure transform )
      • navigation.xsl ( theme transform )
      • fragment layout files -- add tabTag folder structure attribute to these.
    However, at this basic level, “add a tab” customization does not work properly. In addition, persistent navigation at a subtab level is not possible. We will address these enhancement later in this talk.
  • 16. DLM_Tabs_and_columns-1.structure
    • <parameter>
    • <name> tabTag </name>
    • <default-value> UNTAGGED </default-value>
    • <description> Value of tabTag to apply set on a tab </description>
    • <type> 2 </type>
    • </parameter>
    Add the following parameter to structure entity file This will add a row to the UP_SS_STRUCT_PAR . Any tab that is not assigned a tabTag folder structure attribute, will default to the UNTAGGED value.
  • 17. Modified Structure and Theme Transforms
    • columnsTabTag
      • columns.xsl
    • universalityTabTag
      • navigation.xsl
  • 18. columns.xsl
    • 1. The activeTab param being passed into this transform that is used to determine the activeTabId is NOT the position of the tab, but rather the Tab Id itself.
    • 2. A few new params are being passed through – the most important being the activeTabTag
    • 3. This is where all the tabTag folder attributes are sorted for display, and the tabs with a tabTag = activeTabTag is selected.
    This file is the most extensively modified. There are three important changes to take note of:
  • 19. Incoming XML to structure <folder ID=&quot;u10l1s4&quot; dlm:fragment=&quot;6&quot; dlm:precedence=&quot;40.0&quot; hidden=&quot;false&quot; immutable=&quot;false&quot; locale=&quot;en_US&quot; name=&quot;Development&quot; type=&quot;regular&quot; unremovable=&quot;false&quot; externalId=&quot;&quot; width=&quot;100%&quot; tabTag=&quot;Admin&quot; activeChildId=&quot;doNotPersist&quot; xmlns:dlm=&quot;http://www.uportal.org/layout/dlm&quot;> This is the <folder> element for the Development tab. Every folder that represents a tab will have the tabTag attribute.
  • 20. How are these tabTags sorted in columns.xsl
    • <!-- #### CUSTOM-TABTAG #### 
    • <tabTagList>
    • <xsl:attribute name=&quot;activeTabTag&quot;>
    • <xsl:value-of select=&quot;$TAB_TAG&quot;/>
    • </xsl:attribute>
    • <xsl:for-each select=&quot;/layout/folder/folder[generate-id() = generate-id(key('tabTagKey',@tabTag)[1])]&quot;>
    • <tabTagListItem>
    • <xsl:value-of select=&quot;@tabTag&quot;/>
    • </tabTagListItem>
    • </xsl:for-each>
    • </tabTagList>
    • <!-- #### END-CUSTOM-TABTAG #### -->
    This code produces a <tabTagList> sent to the theme.
  • 21. Incoming XML to theme
    • <tabTagList activeTabTag=&quot;Admin” >
    • <tabTagListItem> Welcome </tabTagListItem>
    • <tabTagListItem> Staff </tabTagListItem>
    • <tabTagListItem> Admin </tabTagListItem>
    • </tabTagList>
    This is then transformed by navigation.xsl in the theme.
  • 22. navigation.xsl
    • <tabTagList> is transformed into the navigational display.
    • All URLs are modifed to pass through new params such as activeTabID and activeTabTag
    • These URLs include tabTag, Tab, Portlet, and portlet flyout urls.
    • The tabTag containers cannot be moved, nor can there names be changed by the user. As of this point, these tags are decided by the implementers.
  • 23.  
  • 24. tabTag Enhancements
    • Add Tab functionality
      • DLM_XHTML-1.theme
      • ajax-preferences-jquery.js
      • UpdatePreferencesServlet.java
    • Navigation Persistence
      • DLM_Tabs_and_columns-1.structure
      • RDBMDistributedLayoutStore.java
    • Theme Housekeeping (set global vars for readable URLs)
      • universality.xsl
  • 25. Implement “Add Tab” functionality in multi-level navigation
      • DLM_XHTML-1.theme
      • ajax-preferences-jquery.js
      • UpdatePreferencesServlet.java
    When a user adds a tab to their layout, the new tab needs to have the active tabTag value assigned to it as structure folder attribute. List of files modified:
  • 26. DLM_XHTML-1.theme
    • <parameter>
    • <name> newTabTag </name>
    • <value> Welcome </value>
    • <description> Add new tabTag to new tab </description>
    • <type> 1 </type>
    • </parameter>
    This inserts a new row into UP_SS_THEME_PARM Need to add new theme param:
  • 27. ajax-preferences-jquery.js
    • // Tab editing persistence functions
    • var addTab = function() {
    • var newTagTabVal = $(&quot;#activeTabTag&quot;).text();
    • $.post(settings.preferencesUrl, {action: 'addTab', newTabTag: newTagTabVal },
    • function(xml) {
    • if ($(&quot;success&quot;, xml).text() == 'false') { handleServerError(xml); return false; }
    • window.location = settings.portalUrl +
    • &quot;?uP_root=root&uP_sparam=activeTab&activeTab=&quot; +
    • ($(&quot;#portalNavigationList > li&quot;).length + 1) +
    • &quot;&uP_sparam=prevTabTag&prevTabTag=&quot; + newTagTabVal;
    • });
    • };
    The addTab function needs to modified to include the newly added theme param newTabTag.
  • 28. updatePreferencesServlet.java This servlet gets the the newTabTag value sent by ajax-preferences and persists and binds it as the folder structure attribute for the newly added tab.
  • 29. Navigation Persistence
    • This is not strictly necessary, but it is a nice usability enhancement.
    • Essentially, this functionality keeps track of the currently viewed tab under a specific tabTag as a user navigates across tabTags.
    • Files involved are:
      • DLM_Tabs_and_columns-1.structure
      • RDBMDistributedLayoutStore.java
  • 30. DLM_Tabs_and_columns-1.structure
    • <parameter>
    • <name> activeChildId </name>
    • <default-value> doNotPersist </default-value>
    • <description> activeTabId of activeTabTag </description>
    • <type> 2 </type>
    • </parameter>
    Once again, add a new parameter to the structure entity file This will add a row to the UP_SS_STRUCT_PAR
  • 31. RDBMDistributedLayoutStore.java
    • /*
    • * Persist folder attributes defined in the stylesheet
    • * description only if the user value is non null and
    • * there is no default or the user value
    • * differs from the default.
    • *
    • * CUSTOM-TABTAG - if default value of attribute is &quot;doNotPersist&quot;,
    • * do not persist this attribute to the database. This was customized
    • * so that activeChildId will not be persisted between sessions.
    • * See UP_SS_STRUCT_PAR to view default value for a type 2 attribute.
    • */
    Not going to show code – it isn’t difficult or complex, but the snippet of code is verbose, so instead I will include the comments.
  • 32. Done.... build and deploy
  • 33. Add tabTag param to fragment-layout files. For example... <tab unremovable=&quot;N&quot; immutable=&quot;N&quot; hidden=&quot;N&quot; name=” Development &quot;>        <structure-attribute type=&quot;folder&quot;>            <name> tabTag </name>            <value> Admin </value>        </structure-attribute> ... and import
  • 34. yeah... multi-level navigation
  • 35. Next Steps and Ideas…
    • Work toward including tabTag theme in future version of uP3.x
    • Create Admin settings options
      • support setting tabTag outside of fragment import process
      • this will better support existing implementations that want to migrate to this theme
    • Create more theme options
      • portletTag drop down theme… no tabs or pages... just select a tag in a drop down that results in those portlets showing on a page
      • portletTag filter theme… a list of portlets that users can label/tag which results in the creation of tabs for each label
      • one of these might be a nice mobile theme option
  • 36. Contacts: Tim Carroll [email_address] Jeff Dimpsey [email_address]