Working with Links in WebCenter Application

Introduction

Link management is one of the most important considerations when creating a WebCenter application.

The challenges in creating links are:

  • Easy on the eyes – The link should have a meaningful path (Pretty Url)
  • Searchable – Links must be crawl-able by search engines for SEO
  • Analytics – Analytics applications must be able to distinguish URLs
  • Back button and Bookmarkable – Back button must be supported and page must be uniquely bookmarkable
  • Control State – Webcenter must be able to track the user taskflow state.

From the above list, Control State retention is unique to WebCenter/ADF and hence it is frequently missed. This results in memory leaks. Fortunately maintaining control state is simple if the following steps are taken.

Main article

 

We have three tools in our arsenal to manage links: Navigation Model, goLink (including its variations), commandLink

Navigation model

Navigation model is a versatile tool not just for providing a navigational structure but also to pass in parameters and attributes to the page. All the pages used within the site (design time or runtime) should be added to the navigation model as page links. It can be accessed programmatically and rendered as desired.

GoLink

GoLink including its other variations like goButton, goImageLink, goMenuItem help generating anchors on the page. It solves lot of challenges mentioned above and is especially desirable for external facing Webcenter applications.

CommandLink

CommandLink including its variations like commandButton, commandMenuItem etc generate anchor tags which navigate using ADF controller navigation. In webcenter however, in order to have the above mentioned features, we need to have the following web.xml parameters. These parameters will force ADF framework to redirect instead of using ppr navigation.

<context-param>
<param-name>oracle.adf.view.rich.pprNavigation.OPTIONS</param-name>
  <param-value>off</param-value>
</context-param>
<context-param>
  <param-name>oracle.webcenter.navigationframework.REDIRECT_OPTIONS</param-name>
  <param-value>toPrettyURL</param-value>
</context-param>

Lets explore various options how these can be used in Webcenter to provide pretty URL and retain ADF control state.

Menus

As much as possible try to use out-of-box menu components provided in default page templates. These components can be skinned to achieve the desired look and feel. Other challenges is solved by adding the above context parameters to web.xml

For external facing sites we usually see customers generating menu structure on page and rendering it using css & javascript libraries.

Custom menu structure can be generated by iterating through nodes using EL

<af:iterator #{navigationContext.defaultNavigationModel.treeModel['startNode=home,includeStartNode=false,depth=2']} ... >

The link is generated using EL

<af:goLink destination="#{node.goLinkPrettyUrl}" ... />

Webcenter Custom Navigation Model

For menus other than the main menu such as Footer, add links to the same navigation model and create a visibility condition. Use the visibility condition to render the menu in the right place.

Breadcrumbs

First try to use the out-of-box breadcrumb component available in default page templates. It can be skinned as desired. Make sure to use the above context parameters.

Custom breadcrumbs can be generated iterating through the ancestors of the current selected node and rendering links via goLink.

<af:iterator value="#{navigationContext.defaultNavigationModel.currentSelection.ancestors}" ... >

Links within Pages

Within a page, link can be created for a particular Webcenter page using following: Where ‘pagepath’ is the path of the page in navigation model eg: home/products

<af:goLink destination="#{navigationContext.defaultNavigationModel.node['pagepath'].goLinkPrettyUrl}"} text=”mylink” />

Page path for current page can be found using #{navigationContext.defaultNavigationModel.currentSelection.prettyUrl}

Links within Spaces

Within Spaces the node object is obtained using spaceContext object. Below is an example using commandLink, a similar logic can be used for goLink

<af:commandLink text="#{spaceContext.currentSpace.rootAncestor.displayName}"
  actionListener="#{navigationContext.processAction}" action="pprnav" id="pt_c21">
  <f:attribute name="node" value="#{spaceContext.currentSpace.rootAncestor}"/>
</af:commandLink>

Links within Content

When creating a link to a page from within a content file, use externalId attribute of the page. Within the content create a link as $wcUrl(‘externalId’) which will be translated by Webcenter to pretty Url when the content is rendered. As of PS5BP5 add the following param to web.xml to show the right url.

<context-param>
  <param-name>oracle.webcenter.navigationframework.TRANSLATE_EXTERNAL_ID_TO_PRETTY_URL</param-name>
  <param-value>true</param-value>
</context-param>

Using External Id for Navigation

Buttons & Image links

For buttons and image as links use the variations of goLink: goButton and goImageLink. The destination attribute will remain the same as above examples.

Programmatically

If all above options are exhausted and you need a dynamic redirection to a particular page, use the following java code:

    public void redirectToPageLinkId(String pageLinkId) {
        NavigationModel navModel = SiteStructureContext.getInstance().getCurrentNavigationModel();
        FacesContext fctx = FacesContext.getCurrentInstance();
        ExternalContext ectx = fctx.getExternalContext();
        try {
            NavigationResource navResource = navModel.getResource(pageLinkId);
            String prettyUrl = ectx.getRequestContextPath() + navResource.getGoLinkPrettyUrl();

            ectx.redirect( prettyUrl);
            fctx.responseComplete();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (ResourceNotFoundException e) {
            //TODO log and show error to user
            System.out.println("Resource "+pageLinkId+" not found in navigation model");
        }
    }

Further References
EL Expressions documentation
Portal Navigation model
Spaces Navigation model

 

 

 

Add Your Comment