Monday, October 03, 2011

Accordion Navigation Collections

A few months ago we released a White paper about PeopleSoft Applications Portal and WorkCenter Pages that showed screen shots of an accordion menu. A lot of you asked how we created these pagelets. Tomorrow in our OOW session PeopleSoft Answers: How to Create a Great PeopleSoft UI, I will demonstrate creating the pagelet, but we won't have time to walk through the XSL -- the critical piece. For those of you that will be there (and those that won't but know how to use Pagelet Wizard), here is the XSL: accordion-nav-hosted.xsl.

Disclaimer: I make no warranty regarding the use of this XSL.

Security Warning: To make sure the XSL will work "out of the box," I pointed the JavaScript at Google's hosted JavaScript API's. Since this code is used on your enterprise home pages, I suggest you replace these references with references to your own site's versions of these libraries. The thought of allowing some external service to run code on my pages makes me a bit nervous.

I have to point out a minor difference between the output of this XSL and the output shown in the white paper: This XSL opens links in the current window or a new window. It does not use modal dialogs. Navigation Collection XML contains absolute PSP URL's, which don't display well in a modal dialog. The version shown in the White paper actually uses a custom transformer and some PeopleCode to convert psp URL's into psc URL's for dialogs.

Update March 5, 2012: Leandro, a reader of this blog, posted his derivative of this stylesheet. You can download it here. Leandro wants to make sure you know that it works on the single nav collection for which he tested, but other exceptions may arise. I looked through the XSL, and it looks good. Here is a list of the differences between Leandro's version and mine:

  • Updated the links to jQuery and jQuery UI (JS and CSS) to the latest versions.
  • Commented out the custom dialog framework code that would open jQuery UI dialog IFrames (because the code to make the iframe is not present in Jim's original).
  • Included the description of the top-level folders in the H3 tag's title attribute, so mouse-over of the accordion items will display the description of the menu. (This was already done by you for inner folders and shortcuts.)
  • The resulting accordion menu will be sorted as you would typically find in a PeopleSoft navigation collection: all folders before all shortcuts, and the "# more..." pseudofolder (if any) at the end.

77 comments:

Toby said...

Great work!
Any chance you could provide an example of your custom transformer.

Jim Marion said...

@Toby, thank you.

Yes, there is a great chance I will provide my example transform program. The transform uses the Meta-HTML app class from chapter 9 of my PeopleTools Tips and Techniques book. You don't have to wait for my post though. The transform is just a copy of the delivered XSL transform with a line added to perform the Meta-HTML transform.

Surinder Dhillon said...

Jim, thank you for the Accordian menu information. Now I am trying to get the image setup in a similar way that you had in the demo with the cycling of the various screens and the two right columns merged into one (visually anyhow).

Is that the same as the transform that was asked about in the previous post? Thx

Jim Marion said...

@Surinder, no, I haven't blogged about the jQuery Cycle plugin yet.

Surinder Dhillon said...

oh ok, so is the content for the jQuery Cycle image files that are being cycled thru or are you cycling App Designer objects? Just wondering if these are stored in the application or offline files.

Jim Marion said...

@Surinder, you can cycle just about anything. In my case, I'm cycling images from Enterprise (Applications) Portal's news publications. You could just as easily cycle App Designer image definitions, uploaded file attachments, etc.

Manoj said...

@Jim, thanks for the XSL, its very short and neat.

I noticed one difference though, with IE (used IE8), the accordion animation is a bit jerky. Just curious, was your demo on OOW had the same issues?

Jim Marion said...

@Manoj, I avoid IE 8 at all costs. I use Firefox and Chrome. The IE 8 and lower JavaScript engine and hardware acceleration is not as good.

I haven't used IE 9 so I can't comment on it.

Manoj said...

@Jim, Ah ok, I share the same emotions about IE. Unfortunately, most of our user base use IE.

Surinder Dhillon said...

Jim, really silly question, where did you get the icons on the accordian menu that you demoed at OpenWorld? Thx

Jim Marion said...

@Surinder, some of my nav collections use delivered images. The ones in the Employee Self Service menu came from a graphics artist we hired. You can find icon packs online (free or for purchase).

Don C said...

Jim -

Thanks for posting. Did you have any issues with this in Firefox? My accordion nav collection works fine in IE, but in FireFox 3.5.6, it works fine in the Pagelet wizard preview area, but not on the homepage. Just curious if you ran into anything similar.

Don

Jim Marion said...

@Don, I use Firefox 7 exclusively. I haven't tested on FF 3.5. I've had problems with Type Ahead on FF 7 and my PT version (PT 8.51.04), but from a UI perspective, I enjoy FF 7 so much more.

By the way, if it is working in Pagelet wizard and not on the homepage, it would be hard to blame the browser, because it is obviously working in the browser, just from a different location... but then there is the fact that it works on IE. If I were trying to troubleshoot this, I would open Firebug and see if the pagelet content exists if expected. I would also look for errors in the console when the page loads, and I would also put a breakpoint in the $(document).ready to make sure it is firing correctly.

Don C said...

@Jim - thanks for responding. I walked through in Firebug and see the Accordion get kicked off, but I never see the IsReady property get set to true. What's interesting is it works in the Pagelet Wizard preview (Step 5) when I first go in, but if I click Save, it stops working.

John said...

@Jim,

The accordian works great. I've used similar menu UI's and they are a great alternative to the delivered menu.

Is there any chance you can share a sample of the code for the news pagelet? It's hard to get a feel for the functionality without being able to see it in action. Thanks.

Giri said...

Hi Jim,

How do i use PNG images in PeopleSoft.

GIri

Jim Marion said...

@Giri, Even though App Designer only displays certain types of image formats, it allows you to import any type of image (including PNG images).

Jim Marion said...

@John, I posted the news publication XSL here.

Giri said...

Thanks Jim, I am able to use PNG image format. I have another issue with Jquery UI JS.

I am using your accordion xsl transform for navigation collection. When i use JS from Google site its working fine, but if i save them as js in my application getting issue as below.

No issue using Jquery , its with Jquery_ui.js

illegal character
[Break On This Error] var proto = $.ui[ module\u00c2\u00a0].prototype;

Giri said...

I got resolved by using Jquery Ui mini script.

Thanks Jim

Gratian Dicu said...

Wow... you've just opened a new chapter in PeopleTools for me, before PT i has working only on UI with jQuery and when started with PT i was really upset that i have to let down my jQuery experience ... but not anymore :) . Thanks for the great posts that you provide to the community.

Kevin Weaver said...

I have an interesting issue trying to add a link to a third party learning management system. In order to authenicate with the third party system we need to submit a form with the user's credentials. I have successfull built this html and my thought was to create a content reference to an iScript that would generate this html in a new window. When I click the link from the menu navigation it works like a champ. But when I click the link from a navigation collection it redirects the user to the third party system, but then I get "Cannot display the webpage" error. I don't know what is blocking the content, but I figrued out that if I remove the Query String parameter "&FolderPath=PORTAL_ROOT_OBJECT.PORTAL_BASE_DATA.CO_NAVIGATION_COLLECTIONS.ADMN_HCM_SELF_SERVICE.ADMN_F201009281606311334178602.ADMN_S201009281800152410893017" from the url in the navigation collection it works. How can I remove this parameter from the navigation collection? Any thoughts?

Jim Marion said...

@Kevin,

First, I recommend using Fiddler to see the HTTP requests sent by the nav collection, and then to see the iScript redirects as well. If I understand correctly, the nav collection item should point to the iScript, and the iScript should send down an HTML form with JavaScript to post the form to the third party system.

Can you tell which part is failing? Is PeopleSoft failing to send back the iScript contents? Your iScript should be able to ignore the additional query string parameters, and your form post should not include them unless you specifically tell it to include them.

The navigation collection shouldn't send a request directly to the third party system unless you configure an external CREF that points at the external system. If this is the case, then, yes, PeopleSoft will send all those extra URL parameters to the external system. It doesn't sound like you want an external URL though, it sounds like you want an iScript URL that posts to the external system.

Kevin Weaver said...

Thanks Jim. I download fidder and it is pretty cool. I am glad I finally followed your recommendation. What I discovered is that I get to the third party website from the iScript. But from there it makes some calls that get a 304. So it is erroring on the third party site.

However, if I remove the folderpath query string parmeter from the oringinal request to the query string it works. I am not passing querystring from the iScript to the form post? So I don't know why it matters. Do you know any magic in the content reference to remove the query string from the navigation collection or how to get around this 304?

Thanks!

Kevin Weaver

Jim Marion said...

@Kevin, no, I do not know of any way to remove the additional query string parameters sent to an iScript from a nav collection. It seems really odd that it would act this way. Your iScript can ignore the parameters with no issue, and the third party should not have any knowledge of them. Very strange.

You can try changing the iScript CREF to either a generic PeopleSoft URL or an external URL and see if that removes the additional parameters. I can't imagine that PeopleSoft would send that extra info to a non-PeopleSoft site.

Kevin Weaver said...

Thanks Jim, changing it to an non-peoplesoft url fixed the issue. However, now I am having to place the whole url into the portal url. Will I need to modify this in every environment to point to the local environment's url. Example in Development this is my url:

http://capp111c.umb.com:11100/psc/pa91dev/EMPLOYEE/EMPL/s/WEBLIB_ZZ_EDCOM.ISCRIPT1.FieldFormula.IScript_EDCOMMXFER

In production it would be:

http://psportal.intranet.umb.com/psc/paprd/EMPLOYEE/EMPL/s/WEBLIB_ZZ_EDCOM.ISCRIPT1.FieldFormula.IScript_EDCOMMXFER

Or should we just manually maintain this. Thanks again for your help!

Kevin

Jim Marion said...

@Kevin, I had the same thought when I gave the response. The answer is no, you can set it in one place, not each one. Even though it is a non-PeopleSoft URL, you can still use a node definition. Whenever you have a server definition with a few different URL's, create a node for that server. In the portal tab for the node, set the base URL for the portal and content URL's, and then use that node in your CREF's. For the URL portion of the CREF, use whatever comes after the base part of the URL.

Since this is already a PeopleSoft node (portal would be EMPL) you should already have that node defined, and you can just use whatever comes after the base portion of the URL from the node defintion. Then you don't have to update anything when migrating.

Kevin Weaver said...

Thanks Jim,

Everything is working and this is going to make our business partner very happy.

It is funny how something that seemed so simple took so much time!

Kevin

Jim Marion said...

@Kevin: 80/20, 90/10 Seems like it always that last little thing that takes forever.

John said...

Hi Jim,

Is there any reason this XSL would not work outside of Enterprise Portal? I have tried using it directly in PeopleSoft HR 9.1/8.52 and the accordion doesn't seem to work. Using the exact same XSL in Portal 8.9/8.49 works as expected. Just wondering if you would expect this to be the case or if I'm missing something obvious. Thanks.

Jim Marion said...

@John, I'm glad to hear you had success in a portal environment. However, I do expect it to work the same regardless.

I'm sure you've already tried a number of ways to debug this, but here is what I would do:

1. Compare the XML between portal and HR. You can find the XML in the upper box of pagelet wizard on step 5. If the tags and shape match, then the XML isn't the issue.

2. Check to make sure the JavaScript, CSS, etc is getting loaded into your page. You can see this in firebug in the scripts or CSS tabs, just use the drop-down.

3. Check the selector used to start the accordion. This is in the $(document).ready. Look at the code generated by looking at the contents through Firebug, and then paste that $("...") stuff into Firebug (the part right before .accordion) and see if it selects anything.

4. See if accordion is loaded by typing $.fn.accordion into Firebug. You should see function() as the result.

Giri said...

I have used this in 8.51 and its working fine. When i open a link its opening in target window. but for the same in 8.52 the link is opening in new window.

I am using work center and navigation collection.

Jim Marion said...

@Giri, use Firebug or IE Developer tools or Chrome tools to check the link's target attribute. Also, check your nav collection "Open in New Window" checkbox.

Leandro said...

Jim, great stuff! A question about the JS libraries: if I want to have two navigation collection pagelets formatted this way, would there be any issue if the JQuery and JQueryUI JavaScript libraries were referenced multiple times in the page?

Jim Marion said...

@Leandro, good question. Yes, all will work, but performance could be better. JavaScript libraries are large. Each instance requires reparsing. Each instance will recreate all of the jQuery and jQuery UI objects. Obviously, this is not efficient. JavaScript libraries are written with web apps in mind, not portals. Portals are collections of related, but unknown objects. One object can't depend on the next, so each needs to contain all of its dependencies. Here is how I handle this: C-style include protection. I wrap the jQuery and jQuery UI libraries in an if test. Here is the jQuery version:

if(!window.jQuery) {
// minified jQuery contents goes here
// end jQuery contents
}

The jQuery UI version is very similar, but tests for the existence of a jQuery UI object.

This requires you to have a copy of the jQuery libraries on your server so you can modify them rather than accessing them from the Google API site.

My favorite approach is to use one of the "require" style methods of JavaScript inclusion so the file isn't even accessed if it isn't needed, but this if(...) test is the easiest way I've found to ensure you only have jQuery once.

Subhankar Sett said...

This is fascinating! I have been fiddling with this ever since I got to read this post. While doing so, I found this situation, for which I had been trying to find an explanation for a very long time.

What I did was create a Navigation Collection with 3+ levels. By that, I mean, I had created a folder containing a folder, which is in turn containing a folder which had the link. It was like:

Folder 1 (navigation collection label)
|---Folder 1.1
   |---Folder 1.1.1
      |---Email Addresses

Now when I looked at the XML that was generated on the 5th page of Pagelet Wizard, I saw that there were only 2 levels under the tab. So, using the generated XML I am unable to find a path of the Email Addresses link.

I just wish the XML had the following structure for the above Navigation Collection. This can help me parse through the entire Navigation Collection and apply necessary transformations.

(Contents)
  (NavItem Label="Folder 1.1" Type="Folder" ... )
    (NavItem Label="Folder 1.1.1" Type="Folder" ... )
      (NavItem AbsolutePortalURL="..." Type="Shortcut" Label="Email Addresses" /)
    (/NavItem)
  (/NavItem)
(/Contents)

Do you have any solution for this?

Leandro said...

Jim, what does the following JavaScript do in your XSLT?

$("#<xsl:value-of select="$selector"/> .jjm-showas-dialog-iframe").click(function(event) {
event.preventDefault();
var $this = $(this);
var url = $this.attr("href");
var title = $this.attr("title");
jjm.dialogs.showIFrame(url, {title: title});
});

Jim Marion said...

@Leandro, that is a very good question. That JavaScript calls my custom wrapper around the jQuery UI dialogs to open a PeopleSoft component in an iFrame dialog rather than navigating directly to that page. It appears that I didn't post my dialog wrapper with this example. I'll have to update this post with that wrapper JavaScript.

Jim Marion said...

@Subhankar, In your example, you have 3 levels, but only one user defined folder at the first level. Is that the case? Do you have a 2.1 and 2.1.1? I was discussing this with development this week as well. If you only have a 1.1, then the 1.1 won't appear, it will skip right to 1.1.1. I don't agree with this, but it is by design. If you have a 2.1, then the 1.1 will appear. If this does not describe your case, then I strongly recommend you log a bug. If you, like me, disagree with the approach of ignoring 1.1 when there is no 2.1, then I recommend you log an enhancement request.

Leandro said...

Jim, I've made some enhancements to your XSLT that could prove helpful to others, and would like to share them to contribute to this fine effort of yours.

Basically, it has to do with ordering of sections and items within the sections so that it more closely mimics the standard PeopleSoft menu ordering (all folders before all shortcuts, "# more..." pseudo-folder at the end).

If you're interested, how can I send you the updated version?

Jim Marion said...

@Leandro, that would be great. Can you create a box.com, dropbox.com, or filesanywhere account and post the link to your shared file here? It doesn't have to be one of those three. Any file sharing site will work.

Leandro said...

Jim, here it is: accordion-nav-v2.xsl.

Here are the differences from your original version:
- I've updated the links to jQuery and jQuery UI (JS and CSS) to the latest versions.
- I've slightly modified the CSS selectors by using the ">" operator to indicate parent-child chaining.
- I've commented out the custom code you mentioned that would open jQuery UI dialog IFrames.
- I've included the description of the top-level folders in the H3 tag's title attribute, so mouse-over of the accordion items will display the description of the menu. (This was already done by you for inner folders and shortcuts.)
- The resulting accordion menu will be sorted as you would typically find in a PeopleSoft navigation collection: all folders before all shortcuts, and the "# more..." pseudofolder (if any) at the end.

Please note that this works on the single nav collection on which I've been testing it, but I don't know if any exceptions may arise on others. Furthermore, I'm new to XSLT, so perhaps some of the stuff I did could be better done otherwise.

Jim Marion said...

@Leandro, thank you. Your changes make a lot of sense. I believe I actually had > in my selectors, but I have to support IE 8 in quirks mode, and IE 8 in quirks mode ignores them

Leandro said...

In that case, it makes sense to get rid of the ">" operators (I've been testing only on Firefox so far).

Jim Marion said...

@Leandro, if they are doing something, then it makes sense to keep them there. Likewise, if they add clarity, then keep them as well. IE 8 will treat the selector as if the >'s weren't there, so it isn't hurt by the inclusion of them.

Leandro said...

Jim, after testing in MSIE 8, the ">" operators do in fact cause display issues. I have uploaded the corrected version to accordion-nav-v3.xsl. This will work in MSIE 8 and in Firefox.

Jim Marion said...

@Leandro, good to know. Thank you for the update.

muthu kumar said...

hi jim,
i'm trying to implement Accordion Style Pagelet. for that do i have to make any change to the xsl given in appendix A in branding red paper apart from the updating the jquery,stylesheet file names.

Jim Marion said...

@Muthu, you should not have to make changes. The XSL in this blog is an alternative to the one in the red paper.

Pawan Mundhra said...

Hi Jim,

While implementing the accordion found couple of issues on this.
The accordion is jerky on IE but this is workig in all other browser(chrome and FF). Links are leaving the current work-center and opening the page i.e in psc (issue in Tool 8.52 and working good in 8.51).

I have worked with some part of this XSL and modified the xsl to work for peopletools 8.52. But the jerk issue still exist.

I found that for IE we need to include <!DOCTYPE html> in the xsl. I tried with the
"<xsl:stylesheet version="1.0" xmlns:xsl="href="http://www.w3.org/1999/XSL/Transform"">http://www.w3.org/1999/XSL/Transform">" but no luck.

Here is the updated xsl https://www.box.com/AccordionBlue . If you have any solution to remove jerk in IE then this will be great.

I have included all jquery files at PTAL_PAGE app package so XSL can access.

Manohar Penikelapati said...

Jim,
Your blogs are of great help for many of my technical issues. Thank you.
I implemented accordion in PT8.48 version using jQuery. On tools 8.51, the accordion works just once if that is the first one to click. Any action on the page that makes a server trip breaks accordion.
Any assistance will be of great help.

Thanks
Manohar

Jim Marion said...

@Manohar, thank you for the compliments. I am glad to assist.

Are you using the accordion in a component page or a home page? On a homepage or in a workcenter, it will work without issue. In a component page, yes, it can behave differently. This is based on the way the 8.51 Ajax behaves. It may be re-initializing jQuery, etc.

Manohar Penikelapati said...

The jquery is on a component page. Accordion javascript code is on $document.ready(). How do I ensure jquery is active even after partial page refreshes.

Jim Marion said...

@Manohar, On a component, $(document).ready fires when the page loads, as you would expect, but it doesn't fire every time a change happens. I have two suggestions and I'm not sure either will work... actually, the second will, but may require trial and error to get right.

#1 I suspect the reparsing of your accordion has something to do with the accordion's HTML area on the page that is getting reloaded on FieldChange or any other partial page render event. You don't necessarily need a dom ready event to script dom elements. You just need the elements you will script to be ready. An alternative to $(document).ready is to place your script inline (preferably in a self executing JavaScript function to avoid namespace pollution) some place after the elements you intend to interact with. This ensures that the HTML elements you intend to interact with are loaded and ready.

#2 Monkey Patch net.ContentLoader (or net2.ContentLoader, depending on tools release). You can find an example of Monkey Patching net.ContentLoader in my post Monkey Patching PeopleSoft.

Manohar Penikelapati said...

I was using .click() function of jQuery for the accordion. When I replace --
$('#ELEMENT_ID').click(function (e) {
with $('#ELEMENT_ID').on("click",(function (e) { , the accordion started working.

Using .live() function also worked in jQuery 1.3.x library.

The .on() function is part of jQuery 1.7+

Jim Marion said...

@Manohar Makes sense. Good to know. Thanks for sharing!

flyboy said...

Hi jim,

I am trying to get the modal popup window to work from fancybox on an accordion style nav collection. Can you help on this? I have downloaded the fancybox js and css onto my webserver and placed the javascript in the xsl within the pagelet on step 5, but it acts like it's not calling the java.

thanks.

Jim Marion said...

@flyboy, how are you attaching fancybox to the links/click event?

Devi said...

Jim,
Thank you for this post. I used your blog and Oracle's white paper to build a pagelet using accordion style of navigation. I placed it in Homepage. Question - Is there a way to make this pagelet appear on the left side as part of the navigation area? Currently, when the user clicks on the link the target page does not show the accordion style pagelet. They would like to see that in the left side of the navigation. Thanks for your time.
Devi

Jim Marion said...

@Devi, if you have PeopleTools 8.51 or later you can use a WorkCenter with an accordion navigation pagelet. For your WorkCenter version, set each link's target to TargetContent. We do this quite often.

Devi said...

Awesome! That worked. I have tried WorkCenter before but never thought of trying it out this way. Thank you so much.
Devi

Devi said...

Thanks Jim. That addressed my need. I am not clear though about - setting each link's target to targetcontent. Where is this done? I think it could be the reason as to why when I click on a link in WorkCenter pagelet, the CREF takes me to a page without any accordion navigation. I do have wokcenter configured for all the CREFs that are referenced in the accordion pagelet. I am definitely missing something.

Jim Marion said...

@Devi, it is one of my favorite use cases. The typical/legacy Enterprise system interaction involves navigating to a component, searching for a transaction instance, and then acting upon that instance. Adding an accordion to the WorkCenter simplifies the "navigate" phase because it limits the navigation options to just those related to the business process associated with the WorkCenter.

Jim Marion said...

@Devi, I have two XSL templates and two pagelets. One is for homepages, and the other is for WorkCenters.

In the homepage XSL there is a template named resolveTarget that has two results: _blank or _top. The WorkCenter version is the same, but I replaced _top with TargetContent.

I've looked through the newer pagelets delivered by apps and I see that there is code to allow you to use one template, but I haven't taken the time to merge my templates.

Devi said...

Thank you! It worked! Thanks again for your quick response. Users will like this.
Devi

Devi said...

Jim,
Thank you for helping me out with the workcenter issue. I did tell the folks at my work about how much your session and your blog is of great help. Manager for Campus Solutions team from my work (Princeton University) would like to reach out to you at the Alliance Conference. She would like to get some expert opinion on a new student application that they are planning to develop. I see that you have a Mar 18 4.30-5.30PM session. She would like to meet you after the session. Is that ok?
Thanks,
Devi

Jim Marion said...

@Devi, yes, that would be fine.

New_to_Portal said...

Jim, we are implementing PeopleTools 8.52 and I had to pull out some customizations that were interfering with the Pagelets and Links. I have no experience in Portal and took over this when the previous developer left. At current I am trying to resolve and issue with a lot of white space when the accordion is expanded as well as a difference between Chrome and IE. Looking through the posts I see that you do not use IE, but wonder if you know of any additional changes that need to be made in the XSL. Using jquery 1.9.1 and jqueryui 1.10.1. Thx

Jim Marion said...

@New_to_Portal, it is true that I am not fond of IE 8 or earlier. I don't have much experience with IE 10. I did install it though :)

I am currently using jQuery 1.8 because it contains a lot of deprecated features that 1.9 eliminated. Have you tried jQuery 1.8?

Sachin Y said...

Hi Jim,
I attended your presentation in Alliance conference- 2013. I ave been trying to create accordion menu in out pTools 8.51. Can you advise what do I need to do next (i'm new jQuery and only know PeopleTools but Im learning this - can you point me in the right direction).
1. I created a navigation collection with the CRefs I want.
2. I used a pagelet wizard to create a pagelet from this Navigation Collection.

Can you please advise what do I need to do next to convert this pagelet in an accordiion menu.

Thanks in advance.
Sachin

Jim Marion said...

@Sachin, I hope you had a good conference. I am at the airport on my way home now. Please take a look at this OTN forum discussion thread and let me know if you still have questions after reading the comments.

Sachin Y said...

Hi Jim,
First heartfelt thanks for responding my mail, I know you are travelling so your time is much much appreciated.

I went through the OTN thread and did do all the steps. All the steps complete successfully. This includes:
a. Creating collection Navigation.
b. Created a pagelet in pagelet wizard with a data type of Navigation Collection.
c. Walked through the wizard to step 4. In step 4 I chose "Custom"
5. Pasted the XSL from the blog post, the updated one (accordion-nav-v3.xsl)into the xsl section, in step 5 of pagelet wizard.

After I paste and tab out from xsl field, following things happen:
a. In step 5, where I see the pagelet (for nav collection)- I see that pagelet changes from PS default pagelet to a pagelet which looks quite like default peoplesoft pagelet with following differences
i.) It has no background color (white)
ii.) I see folder icon next to "My Time" and "My Personal Information"
iii.) I see all the folders expanded.

It does not look like accordion menu, no animation - everything is static. Do you know what can I be missing ? Thanks in advance for your help.

Thanks again for your help,
Sachin

Jim Marion said...

@Sachin, yes, I think I know what you are seeing. The structure of the nav collection changes to match the structure defined by the XSL, but the JavaScript and CSS didn't apply, so you are not seeing it as it should be seen. I have seen this before. When this happens, I use Firebug to troubleshoot. What you are looking for in Firebug is an error message in the JavaScript console or red items in the network pane that identify files that failed to download.

Another thing I've seen happen is when loading over the network, the pagelet wizard just doesn't update fast enough. To test this, switch to step 6 and then back again and see if it formatted your pagelet. If so, then everything is just fine and when you view it on a homepage or workcenter, it will work just fine. Please note that I have never seen this behavior with locally hosted jQuery, only with remotely hosted jQuery (CDN).

Jag said...

I have a question , I have created workcenter /using Navigation collection. What I am finding is that the search record key in my case EMPLID is not being passed when moving from one link to another in the collection. How can this be done so that the search record would populate the keys from prior link.

Jim Marion said...

@Jag, I like what you are trying to accomplish. Unfortunately, there is no easy way to make that happen. The navigation collection is completely independent of the content displayed in the target area.

galaxian said...

Jim, just found your terrific site!! I have a question. I created a work center and am using pagelets based on a navigation collection. The issue i am having is when i click the link it opens the link NOT in the Target area. I have checked and double checked that the open in new window box is NOT checked but still cannot get it to work properly.

Jim Marion said...

@galaxian, what you are seeing is correct. The template I published was designed for just the homepage. I left out all of the stuff for Workcenters, etc for simplicity. If you look at one of the delivered nav collection XSL templates, you will see that it makes reference to PTAL information in the XML. This is how the delivered templates differentiate between the display locations. I have been told that the Navigation Collection data type determines its display location and specifically sets the URL to be the /psc/ URL, but I haven't tested it. This is necessary to just load the content into the TargetContent area of the Workcenter.