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.
197 comments:
Great work!
Any chance you could provide an example of your custom transformer.
@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.
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
@Surinder, no, I haven't blogged about the jQuery Cycle plugin yet.
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.
@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.
@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?
@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.
@Jim, Ah ok, I share the same emotions about IE. Unfortunately, most of our user base use IE.
Jim, really silly question, where did you get the icons on the accordian menu that you demoed at OpenWorld? Thx
@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).
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
@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.
@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.
@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.
Hi Jim,
How do i use PNG images in PeopleSoft.
GIri
@Giri, Even though App Designer only displays certain types of image formats, it allows you to import any type of image (including PNG images).
@John, I posted the news publication XSL here.
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;
I got resolved by using Jquery Ui mini script.
Thanks Jim
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.
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?
@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.
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
@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.
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
@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.
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
@Kevin: 80/20, 90/10 Seems like it always that last little thing that takes forever.
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.
@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.
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.
@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.
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?
@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.
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?
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});
});
@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.
@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.
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?
@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.
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.
@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
In that case, it makes sense to get rid of the ">" operators (I've been testing only on Firefox so far).
@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.
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.
@Leandro, good to know. Thank you for the update.
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.
@Muthu, you should not have to make changes. The XSL in this blog is an alternative to the one in the red paper.
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.
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
@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.
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.
@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.
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+
@Manohar Makes sense. Good to know. Thanks for sharing!
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.
@flyboy, how are you attaching fancybox to the links/click event?
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
@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.
Awesome! That worked. I have tried WorkCenter before but never thought of trying it out this way. Thank you so much.
Devi
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.
@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.
@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.
Thank you! It worked! Thanks again for your quick response. Users will like this.
Devi
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
@Devi, yes, that would be fine.
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
@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?
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
@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.
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
@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).
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.
@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.
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.
@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.
@Akhilesh, I didn't post your comment because it had your e-mail address. I didn't want you to receive unwanted spam.
To create accordion pagelets, start by creating a navigation collection that contains a series of folders and links. You may have multiple folders, but only one level of folders, and only at the root of the nav collection. Links must be in folders, not at the root.
Create a new pagelet wizard pagelet and choose your navigation collection as the data type. In step 4, choose custom. Look through the comments here and find the latest version of the Accordion Navigation Collection XSL. Paste it into step 5 of the pagelet wizard. Publish in step 6. Let me know if you have further questions.
Hi Jim,
Thank you for your reply but still i am getting error i am sharing steps which i have followed :
Step 1.
i have created following Navigation Collections
- Root Folder
- Folder 1.1
--Link 1.1.1
--Link 1.1.2
-Folder 2.1
--Link 2.1.1
--Link 2.1.2
Setp 2.
Pagelet Wizard
Data Type : Navigation Collection
at Step 4 i have selected Display format as custom
in step 5 paste XSL "accordion-nav-v3" i am getting error which i mention below.
Error which Popup :
"
An error has occurred while trying to perform the XSL transformation. This is because either (1) the DataSource did not return valid XML or (2) the XSL for transformation is invalid. Correct the problem before continuing. If you continue to have trouble, contact your system administrator. This problem was detected by Pagelet Wizard.
"
Please help me out to know where i am making mistake.
@Akhilesh, that is great progress. Pagelet Wizard doesn't give you enough error details. What I usually do is copy the XML and XSL into separate files and then run a local transform using a local copy of the Xalan XSLT processor. I suspect there are online transformers as well. This will give you the line #, etc for the error.
Hi Jim,
i have copied both section XML & XSL in two different file with .xml & .xsl format and after clicking to the file, XLS file giving error.
"The XML page cannot be displayed
Cannot view XML input using style sheet. Please correct the error and then click the Refresh button, or try again later.
--------------------------------------------------------------------------------
Invalid at the top level of the document. Error processing resource 'file:///C:/Documents and Settings/Administrator/Deskto...
"
Please help me is the way to check or any other procedure to validate .
Thank you.
@Akhilesh, Yes, I would suspect the XSL. I only validated the XSL I posted. The others were created by knowledgeable contributors in the comments. My XSL referenced a JavaScript dialog library that doesn't exist, that is why I suggested you try one of the other XSL files. Leandro's version should be good.
Did you try running the transform locally with Xalan or another good XSLT processor? These command line tools show the line number and character that caused the error. A web browser isn't a very good tool for that. I've been told that there are some good online transformers that show errors, but I haven't found one. I do like XSLT Cake, but I can't get it to show errors.
Hi Jim,
As you have suggested i have tried leandro XSL "accordion-nav-v2.xsl /accordion-nav-v3.xsl" but again i am getting same error.
I have used the tool Xslt Cake to test XML / XSL but i am not getting any output after pressing run button.
As you know i am new and not have a clear idea which tool is good to validate XLS/XML. if you have any document for Accordion Navigation Collection if possible please share with me.
Please help me out.
Thanks.
@Akhilesh, I did not get any errors from accordion-nav-v3.xsl. Did you click the download button after opening the link? Does the file you downloaded start with ?xml version="1.0"?
Hi Jim,
Now i am able to see the animated accordion menu.
Thank you very much for your support and guidance.
Thank You.
Hi Jim,
I am trying to create slide show pagelets, after reading of Branding_Red_Paper i am not finding the navigation for "Browse Section Articles" from where i can add banner images.
Please share the steps which need to be followed to implement slide show pagelets.
Thank You.
@Akhilesh, The navigation is Content Management > News Publications > Browse Publications. Please note: news publications are not part of the PIH restricted use license with PeopleTools and require a full Enterprise Portal/PeopleSoft Interaction Hub license. If you satisfy that license requirement, then you can find the XSL for the slideshow on my slideshow blog post.
Hi Jim,
After completion of news publications.I have paste the slideshow XSL & i am not able to see any output in pagelet preview, in case of generating default XSL it's shows news feed.
Please help me to resolve slide show.
Thank You.
@Akhilesh, I am going to answer you on the slideshow blog post since it is more relevant to that post.
@Akhilesh Thread continued here
Have you seen any issues with 8.53? I've used in 8.51/8.52, but I'm having issues in 8.53. It renders similar to a normal navigation, but messy.
Using Firebug, it looks like it's loading the scripts. In 8.52, it loads jQuery v1.6.1 and accordion v1.8.4. In 8.53, it loads jQuery v1.7.1 and accordion v1.8.14.
Thanks.
@Brent, no. I have seen no differences between tools releases when loading JavaScript files from the web server or from a CDN (iScripts are a different story). The version of jQuery is controlled by you, so you should not see version differences unless you intentionally changed versions. If you are not seeing the accordion behavior, then you might check to see if multiple versions of jQuery are loading. This could be resetting your loaded plugins (jQuery UI).
Does it behave differently on a homepage than it does in the Pagelet Wizard? Did you try loading the pagelet through just the pagelet wizard iScript URL? These are tricks I use to debug pagelets.
I did notice why I had different versions. I got them both to the same version, but nothing changed, trying both versions.
It does behave the same on the homepage, iScript URL, and the pagelet wizard.
@Brent, that is really odd. Check your $(document).ready event handler within the XSL to make sure it is firing. I would use Firebug and console.log(...) to print stuff to the Firebug console from the $(document) method. Specifically, I would be checking:
1. That the .ready handler is triggered
2. That the accordion selector finds an element
3. That the .accordion method exists (jQuery UI loads).
You know, another requirement is the jQuery UI CSS. Is that still loading OK?
We are in the process of building a navigation collection / menu much like the accordion menu you describe here, but the users want the menu to be expanded for all the areas.
We built the navigation collections and work center links. Used pagelet wizard and in step 5 selected the “Small Images” XSL template. We modifying the XSL to use target=TargetContent
The XSL does not use and JQuery commands.
The Navigation Collection displays correctly but when a link is selected the user is transferred to a new page that displays the Work Center as the menu as if target=_blank
From the Work Center menu if a link is selected the user is transferred to the page but with its content being displayed in the entire page as if the target=_top
This is my first time using the PS Navigation Collections and Work Center and coding XSL.
Thank you for any help.
@Jeff, it sounds like you did everything correctly. TargetContent is the transaction space in a WorkCenter. When you click a link, and it opens a new window, if you alt-tab back and click another link, does it open that other link in the same new window or does it open yet another window so that you have 3 windows? If it opens in the same new window so that you only have 2 windows, then it means the target attribute is working, but something is wrong because the transaction frame does not have the same name as the link target.If this is the case, then use Firebug or Chrome or IE tools to identify the iframe name. If you end up with 3 windows, then, yes, it is acting like target="_blank"
Jim,
When running the accordion-nav-v3 using the Google APIs, everything works with the exception of a security error. However, when we attempt to reference CS & JS files stored on our local web server we get endless problems with 404 errors (etc).
How do you reference the local web server files?
Our file path is as follows:
/u01/app/psft/853/cnv/por/webserv/lvcsscnv/jquery/
Thanks,
Becca
@Becca, are you using the correct protocol for the Google hosted version (http or https)? No matter. I prefer local hosting anyway. It looks like you need to move your jQuery folder down a few more folders into the web server's root directory: /u01/app/psft/853/cnv/por/webserv/lvcsscnv/applications/peoplesoft/PORTAL.war/jquery/. The PORTAL.war directory should be the root of your web server so when you hit http://my.peoplesoft.server/jquery, it is grabbing the file from the PORTAL.war.
If that doesn't work out for you, I have a TON of other ways to serve jQuery without customizing the web server root (which will be overwritten if you have to regenerate PIA).
Jim,
Wow with the protocol call. That was a real palm-face moment...
I don't have access to the servers, but after having my request pushed through to move the files to the location you suggested I started getting some wonky stuff. When I reference the files (any/all of them) nothing works. When I look at Firebug and Chrome Developer tools, the errors are weird (i.e. Resource interpreted as Stylesheet but transferred with MIME type text/html). When I dig into the HTML (or the File Preview for the referenced files in Chrome), it looks like PeopleSoft is returning the HTML for the page calling the files rather than the CSS/JS file contents (which explains the example error above).
Any ideas why PeopleSoft would do something like this?
Thanks again,
Becca
@Becca, if your files exist on the web server and are now addressable by URL, the first thing I would do is attempt to access them directly through the URL. This is purely Weblogic (or websphere) at this point and has nothing to do with PeopleSoft. If you are getting results, then you are ready to incorporate the files into your pages. If you are not getting results, then you will need to work with the person responsible for moving the files to make sure you have the correct URL.
If straight access works fine, but it doesn't work when you add the script or link tag to your PeopleSoft page/pagelet, etc, then the next thing to look at is your script's URL. Is it absolute? Is it relative? Is it relative but from the root of the web server (preferred)? If you didn't include the leading "/" in your relative URL, then it may be thinking that the script is in the "current" directory of the request, which is really a PeopleSoft URI that has nothing to do with the real file system.
I would need to see the URL's that are getting generated and the location of the files to know for sure.
About the CDN and protocol problem, have you tried protocol relative URL's? You leave out the http: or https: and just start with //.
Jim,
We just rolled out our first set of user experience changes and the users love it. Thanks for your article. It was the starting point.
I looking at taking this to the next level - to display peoplesoft pages in an iFrame dialog. PeopleSoft red paper for User Experience has a note regarding this but restricts it to only iScript based homepage pagelet links. I see a piece of code in your xsl to display pages in an iframe. It looks like you have a custom javascript function. Can you sharesome info regarding your javascript function?
$("# .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});
});
Thanks,
Devi
Jim,
Thank you for your help with my previous problem. I was able to get things to work. I have now run into another issue.
I have created a component based homepage pagelet and a navigation collection to create a better user interface. That all seems to work fine, but I also need to have a WorkCenter object point to the same menu/component object as the homepage pagelet.
When I navigate to "Manage WorkCenter Pages" and click "Create new WorkCenter page" I cannot Select the "WorkCenter Starting Page" because there is no "Portal Objects" folder under the "Root" folder.
I also cannot create another content reference for the same menu and component used on the original object. Is there a way to do this without having to put the same component on a different menu?
I'm hope I am clear with my explanation of what I am trying to do?
Thanks.
@Jeff, I think I understand. You have a component that is registered as a pagelet. You also want to navigate to that component so you can use it as the starting page for a WorkCenter. I have 3 options for you:
1. Create a WorkCenter dashboard and place your pagelets on that dashboard. This is new in 8.53.
2. Create a CREF link to your pagelet and place the link somewhere else in the menu. In the CREF link, change the template to PTAL_APP_LANDING_PAGE. You now have a WorkCenter.
3. Create a new CREF with the same menu, market, and component. To avoid the duplicate error, add 1=1 to the additional parameters of the CREF. While you are there, you might as well change the template to PTAL_APP_LANDING_PAGE. Again, you now have a WorkCenter.
@Devi, I will add a blog post with my dialog JavaScript.
Jeff,
Thanks for all of your tips, we've finally got this bad boy working in both Portal and CSS :)
We had our server admin remove all references to the files and them upload fresh jQuery files with the version numbers removed. Once he did that and bounced/refreshed the server cache everything referenced like it should.
YAY!! Thanks!
Becca
Hi Jim
I am working on a component based pagelet development. I have created two dynamic views(with the use of %OperatorId), two pages which have 1 grid each, having one dynamic record as Main record each. Both the pages have only level 1. Both the pages are included in the component. I have registered the component Then created a content reference with use as Pagelet having url as Peoplesoft Component and assigned security as well. Pagelet is displayed on home page, with 2 tabs. But the problem is that when I click on the other tab, then the transfer to the component takes place.
For example, the home page URL is http://pqrst.xyz.com:8020/psp/ELMDEV03/EMPLOYEE/EL M/h/?tab=DEFAULT
But when I click on another tab of the pagelet, it takes me to the component
http://pqrst.xyz.com:8020/psp/ELMDEV03_1/EMPLOYEE/ ELM/c/XYZ_CUSTOM_MNU.XYZ_WEB_TRN_HPVW.GBL
What my requirement is that whenever I click on tabs the home page along with other pagelets remains in focus.
I will greatly appreciate any help you can provide.
-Shreyas
@Shreyas, what you are seeing is standard behavior. When you click a component tab, it sends a request to the component processor, which thinks it is running as a component, not as a pagelet. You will need to use a different mechanism, such as jQuery UI tabs, JavaScript, etc to change the display.
Greetings Jim,
We are trying to take advantage of Ptools 8.53.6, on both our Interaction Hub 9.1 R2 and Financial Services 9.2 Server.
I have been using the VP1 account to add "Remote Menu Item" via the Add Link section in Navigation Collections from the Hub to FS. Everything has been working fine, however now that we are testing actual user accounts, the links are no longer appearing within the Navigation Collection Pagelet. They do appear via Unified Navigation in the Main Menu (for example the Submit Expense Report Self Service Link in FS).
Is this unexpected behavior? We have tried associating number of permission lists and roles in the portal to the account (PAPP0000, PAPP_USER, Peoplesoft User) to no avail. I am wondering if we should take a second look at our node configurations, or perhaps there are specific delivered roles we need to consider.
Thank you so much for your time ~ again this resource has proven invaluable for adopters of this system!
@Simon, this is NOT expected behavior. It sounds like something is broken in your system. If you can see the menu items in remote unified nav, then you should see them in the nav collection as well. The steps you described sound correct. You don't need to add the permission lists to portal. The remote navigation (navigation collections and remote unified nav) delegate security to the content provider app. You may need to file a support ticket for this.
thanks Jim... I just got it figured out. On the Finance Server, I added the "Peoplesoft User" role to the account we are testing, and now it's working in the Hub. I'll have to chat with our security guy: it looks like he has paired the permissions down too much!
FYI, and thanks Jim. It is strange the main menu was working. Hope this can help someone else in the future!
Hi Jim
i am trying to extend the menu so that it includes contextual information within the menu itself
- Root Folder
- Folder 1.1
-- Folder 1.1.1
--- Link 1.1.1.1 (key 1)
--- Link 1.1.1.2 (key 2)
-Folder 2.1
--Link 2.1.1
--Link 2.1.2
Real life example
- root folder
- Personal information
-- Adresses
--- Home
--- Mailing
-- Dependant information
--- John
--- Jane
Etc
I can create the menu driven navigation using the navigation collections and I can create data driven navigation using the pagelet wizard with a query data source but struggling to combine the two. I tried adding the query pagelet template to the nav collection but not working as it show as a a link
Any ideas?
@Stephen, as you probably noticed, you can only have one data type. Your Pagelet is either based on a nav collection or a query, but not both. Since your Pagelet is data driven, I think a query makes sense. Your comment is on the Accordion Nav post, so I assume this is in reference to the accordion nav, but your structure is too deep (unless you have nested accordions). If it is, then you can use the accordion with a query, you just need to change the template. If your question is not related to the accordion nav, but just about queries and navigation collections, I think the way I would approach this is to use data in a query like you did, and then add links to CREF's using PSREGISTEREDLINK. Another alternative is to join to the portal registry tables in your query to get additional URL-like fields (or portal registry PORTAL_NAME and PORTAL_OBJNAME) to build PSREGISTEREDLINK URL's. If using PSREGISTEREDLINK, be sure to include xsl:output with method=xml and doctype for xhtml so the XSL processor will output valid XML for post-processing steps.
Hi Jim,
The XSL works really nice for me. I have a question regarding the HTML Layout of the homepage where this pagelet is used.
I am using a custom 3 column html layout with a pagelet expanding 2 columns, from one of the Oracle red papers (I am very sure you know this red paper - Configuring a Contemporary User Experience in PeopleSoft Interaction Hub :) ).
In IE 8 and Firefox, this banner pagelet ends up having a bottom padding, creating a gap with the pagelets below and this gaps expands when an accordion in the left-most column is expanded. In chrome this works fine.
Do you have any suggestions regarding how to fix this?
Thanks,
Tom
@Tom, does your accordion span 2 columns or does another pagelet span two columns? Actually, I guess it shouldn't matter. When you expand the accordion, does it move content in multiple columns, or just the column containing the pagelet? As far as the padding, I would have to use Firebug or IE developer tools to experiment with the CSS and table attributes to find a solution.
Hi Jim.
The accordion spans 1 column.
There is another pagelet that spans 2 columns.
When I expand the accordion, it increases the bottom padding of the the pagelet that spans 2 columns.
We solved this by changing the html layout.
Is it ok if I send you the code?
Thanks,
Tom
@Tom, I am glad you have it solved. Thank you.
Hi Jim,
Using Interaction Hub, we can add Remote Menu Items to our navigation collections. Trying to add a link helps do that. Is there a way to add remote folders to navigation collections? 'Add Folder' functionality doesn't seem to support this. Do you have any ideas to work this around?
Thanks,
Tom
@Tom, that is a good question. I have not tried that before. You might want to ask this question at support.oracle.com.
Thanks Jim. We 'cheated' a bit to get that working :). But I will surely ask the question to Oracle Support. It is a good feature to have.
Also, is it possible to add remote dashboards to navigation collections in Interaction Hub? When trying to add remote dashboards, some of them appear as menu items (like Manager Dashboard in HCM), but some don't (like HR Helpdesk Agent Dashboard in CRM). Have you seen this before?
Thanks,
Tom
@Tom, I have added remote dashboards. Where I have had problems is with remote dashboards used as landing pages in WorkCenters.
If you find a use case that doesn't work, then I suggest you file a support case for it. I know that development wants to see use cases that don't work so they can resolve them.
Hi Jim,
We came across a weird breadcrumb issue while using the accordion xsl in Interaction Hub. We are using a navigation collection with remote menu items. After applying the accordion xsl, clicking on any CRef would navigate correctly, but the breadcrumb on the component would show names of all components visited before.
For eg, if I click Personal Information Summary, and then Compensation History, the breadcrumb would be like: Main Menu > Personal Information Summary > Compensation History.
We solved this by adding the following to the AbsolutePortalURLs:
PORTALPARAM_PTCNAV=& EOPP.SCNode=& EOPP.SCPortal=& EOPP.SCName=& EOPP.SCLabel=& EOPP.SCPTcname=
(We got this from the delivered xsl for Self Service)
Just wanted to check if you have seen something like this and if you did something different.
Thanks,
Tom
@Tom, I have seen that. This is based on updates to the menu code for remote unified nav.
Did you append those parameters with empty values just like that or did you add values in your XSL?
Thanks Jim. That's a relief.
We initialized the values as shown below. We got this from the delivered xsl. Is this the right way to do it or is there a better way?
Thanks,
Tom
Sorry Jim. I just noticed that all the xml/xsl tags were filtered by the site.
What we did was,
1. We initialized the following variables:
scnode as value of "/NavCollection/SCNode" ,
scportal as value of "/NavCollection/SCPortal",
scname as value of "/NavCollection/@Name",
sclabel as value of "/NavCollection/Label",
scptcname as value of "/NavCollection/NavPageName",
IScript_AppHP as value of "/NavCollection/IScript_AppHP"
2. We then added the following values to the @AbsolutePortalURL:
PORTALPARAM_PTCNAV=@TargetCRefName&EOPP.SCNode=$scnode&EOPP.SCPortal=$scportal&EOPP.SCName=$scname&EOPP.SCLabel=$sclabel&EOPP.SCPTcname=$scptcname
Thanks,
Tom
@Tom, perfect. Thanks for sharing!
Interestingly, this solution works on local pagelets with navigation collections having remote links, but doesn't work with remote pagelets (with navigation collections) imported in Interaction Hub. Banging my head now! :)
@Tom, I can definitely relate to your experience. There are two ways to accomplish this:
1. Create the navigation collection in the content provider and publish it as a pagelet from the content provider.
2. Create the navigation collection in Interaction Hub using remote menu items.
I believe #1 is recommended. The problem caused by Remote Unified Nav is this: Interaction Hub has no information about the remote portal registry and therefore can't display the bread crumbs correctly. When using the menu directly, it builds the bread crumbs as you click, but going from a homepage pagelet directly to an item using a remote pagelet doesn't provide the proper context. I have experienced these frustrations and do not yet have a solution.
Hi Jim,
We went with option#2 because in our navigation collection we have menu items from multiple content providers.
In this regard, have you noticed any performance issues with pagelets that are created from navigation collections containing remote menu items?
Thanks,
Tom
@Tom, I haven not.
Jim
I am trying to create more than one pagelets on the same tab that use accordian style navigation collections. When I do this, the 2nd pagelet doesn't have the control working and it appears in maximised/expanded state.
Is there any way to resolve this issue?
Many thanks
@random, yes, absolutely. There are two things that can cause this:
1. Not using a unique ID in your XSL. My XSL uses unique ID's for each collection, so you should be OK there.
2. Including jQuery multiple times. I suspect this is the problem you are having. My post jQuery plugin Include Protection may offer a solution for you.
Hi Jim, I tried to follow the steps to create the accordion navigation. But, I am getting just normal view. I am not sure, what is missing here. It is just showing the links under a folder. Please help!!
@Harika, I'm not sure. Can you use Firebug or Chrome developer tools to inspect the generated HTML or JavaScript? Also check the JavaScript console for errors.
Greetings Jim,
We have been running pretty smoothly with our IH<->FS implementation last November. In the coming months we are linking our IH with HR and CS ~ lots of work ahead.
One thing that we got working in our current implementation is adding "Remote Menu Item" via the Add Link section in Navigation Collections.
I was under the assumption that these links would behave much like how they would in Unified Nav. IE if you add a component that a user didn't have access to, it would not appear, and conversely it would show up if you did have access.
Indeed this was working for us, until we started using the IB to add other remote content providers. I've contacted oracle support, and they have insisted if it was working the way I assumed, that was not as designed. Their stance is each navigation collection should be seen as a whole, so you assign the navigation collection to a particular role, and the user should see all the links, or not see the collection at all.
Is this the case? if so, I thought I'd put this out there to spare someone else the confusion. I do think it is useful to have Navigation Collections dynamically pickup security based on the user's security permissions in the remote content provider. It would simplify administration and usability, as there would be less security to worry about and less navigation collections if one could handle all the security.
Thanks!
-Simon Chiu
@Simon, your assumption is correct. Navigation Collections are not a "whole or nothing" deal. If you don't have permission for a particular item, it should not show it. Navigation Collections are built on the portal registry API which should not include items for which you do not have access. If it is, then that is a bug. Please tell the support person to contact myself, Pramod, and Frank. We will look into this and confirm if there is a misunderstanding or something.
thanks so much Jim!! glad to know we weren't wrong after all. I'll follow up with Support and get this straightened out!
Hi Jim,
I was able to successfully implement Accordion navigation after following the instructions. I have created the accordion navigation for Selfservice folder and Manager self service folder. Selfservice navigation is perfect. However, for manager selfservice, for few employees links do not appear. Let us say, under MSS, I have folder Learning and Development. Under Learning and development, there are two links. User is able to see only one. I dont have any issue with my id. It is happening for few employees. They are able to access all the links under normal navigation. Could you please suggest?
@Harika, interesting. The only thing I can think of is security. One thing I noticed with navigation collections is that if you only have access to one item, it will eliminate the folder.
Jim, I have your PeopleTools Tips and Techniques book and I have seen you on a few occassions at Open World and Collaborate. I have implemented your accordion menu in 8.53 utilizing the now-delivered jQuery and jQuery UI libraries. My question now is could you please explain how you implemented the carousel navigation that you have demonstrated in some of your sessions/ presentations? Any assistance you could provide is greatly apprciated. Thanks, Leo
@Leo, the data for the carousel comes from a Navigation Collection. I used pagelet wizard and an XSL transform to create the carousel. I wrote my own JavaScript and CSS for the Carousel effect. I have not published it and I have not seen anyone else with a published version.
Hi Jim,
Is it ok to use the meta tag in pagelet to perform a redirect?
meta http-equiv="refresh" content="0; url=http://new.example.com/address"
Thanks,
Tom
@Tom, it is my experience that PeopleTools strips a lot of the head information out of pagelets. You can certainly try it, but I'm not confident it will work. An alternative would be to add a JavaScript that sets window.location.href to your target location. Of course, be sure to save before you get to step 5, because the Pagelet Wizard will load your pagelet content and redirect before you have a chance to save :). You may also have trouble getting to step 6 to register, but that is OK, because step 6 just automates creating a CREF for your pagelet. That is something that you can create manually by reviewing the values of other pagelet Wizard pagelets.
You guess it right Jim. It didn't work with IE, but worked with Chrome. I will do the JS redirect.
Thanks for the help. :)
Greetings Jim:
We will be connecting our IH with HCM and CS in the next few months. We have been using tabs that contain work centers (thanks to your help!) for our implementation of FS via IH.
A bit of marketing on Oracle’s site has interested me:
https://www.youtube.com/watch?v=gIZ1WC5-LM0&feature=youtu.be&t=2m55s
(see what happens when “Time Sheet” is clicked)
It looks like LightBox was implemented with Jquery UI. I have read the Configuring a Contemporary User Experience red paper and was successfully able to get the slider function to work, but I can’t find any documentation on loading components into a Modal window as shown.
A couple of questions:
a) Are Navigation Collections iScript Pagelets? Is it possible to wrap links in Peoplesoft’s openContentInModal function?
b) Modifying peoplecode for DoModal and DoModalComponent only seems to be available as a secondary screen as it has to launch from an original component ~ is this the solution?
c) You mentioned above a custom Transformer and PeopleCode to convert PSP urls into PSC urls is required for this ~ I’m a little lost as to how to proceed here.
Thanks!!
-Simon
@Simon, yes the video uses a Navigation Collection, which, as you probably know, is in Portal Utilities. It is published through Pagelet Wizard. Pagelet Wizard's run time is an iScript. The Pagelet Wizard designer takes a Nav Collection in XML format and transforms it into HTML using XSL. With XSL you can do pretty much anything. What I am doing is creating the accordion, which it sounds like you have working. I also add an attribute to the links that DON'T have "open in new window" or "replace window" selected. I then use jQuery onload JavaScript to attach a click handler to those links that need to open in a dialog. The click handler uses a jQuery UI dialog that contains an iframe to open the link's href in a dialog iframe, making it look like the content is on the same page inside a dialog.
I am converting PSP into PSC using a custom data type. The data type uses the Meta-HTML processor from my PeopleTools Tips book to replace %ComponentContentUrl(PORTAL, NODE,_CREFID) with the content (psc) URL. This is required because navigation collections contain the portal URL, not the content URL. It is not safe to just replace /psp/ with /psc/ because content providers usually have different web servers, node names, etc.
Hi Jim,
Just want to say thank you for all that you share on these topics. Really does help.
I am having an issue with my accordion menu. For current employees, it works great. For new hires, the bottom 3 levels are showing strangely. I've checked security and they all have the same roles, so I am not sure what's happening and am completely stumped.
Have you encountered this or heard of it before?
@Jenn, usually what you are describing happens because of security. If you investigate the HTML structure of the accordion for these new hires, you may notice something like a header missing. This is because the nav collection data type eliminates folders if a folder only has one item, or even worse, makes it a single level nav collection if there is only one folder accessible to the user. I understand that you say they have the same roles, so that is perplexing. Unfortunately, that is the only time I've seen this odd behavior. If you have Interaction Hub, make sure that the roles match between the content provider and the Interaction Hub. Also make sure the nav collection links/CREF's have the permission lists you expect them to have.
HI,
When entering the XSL code the pagelet generated has few graphics and appears just as a long list menu and doesn't retract nor have any background. I can't seem to figure out the issue. Any ideas?
@James are you seeing this behavior in Pagelet Wizard or on homepages? Sometimes the Pagelet Wizard ajax code doesn't load external scripts. Moving forward to step 6 and back to step 5 will often clear this. The other thing you want to check is the JavaScript console for error and the Network tab to see if your JavaScript files and CSS files were downloaded.
Hi jim,
Im seeing this behaviour in both the pagelet wizard and the home pages as well. I had checked the CSS files and all seemed to be in order. I also had a similar issue when adding a slideshow news pagelet in which the graphics were not working. Im not sure if this is related but I thought it was worth mentioning. Any suggestions?
Thanks
@James, check the JavaScript resources as well. You should see jQuery and jQuery UI for the accordion and cycle for the slideshow. Also check the JavaScript console for errors. You can find all of this in Fiddler or in Chrome developer tools, and most of it in IE developer tools. Next, if that all looks good, put a console.log statement in the $(document).ready(function() {...}) event handler. Also verify the selector generated by Pagelet Wizard. From Pagelet Wizard, use the following snippet in the console:
frames["TargetContent"].jQuery("selector goes here")
See if you get a result
On a homepage, use $("selector goes here")
Hi Jim.
Can you please let me know how to delete a image in Navigation collection in Peoplesoft .
Thanks
@Sai, can you open the navigation collection and clear out the specified override image?
Thank You Jim for your quick reply.
I clear out the specified override image, but its taking Image based on PeopleTools-->Portal-->Portal Utilites-->System Options.
Business do not want to display images on quick links( only for this quick links Navigation collection) .
Can you please let me know ,is any other way to delete image .
Regards
Sai
@Sai, got it. That makes sense. The alternative is to copy the XSL template, change the image (or comment out the image), adjusting the XSL to satisfy your requirements.
Hi Jim,
Can you please let me know how to hide a link in Navigation Collections . I need to hide some of deliverd links in Quick links Navigation collcetion . (PeopleTools-->Portal-->Portal Utilites-->Navigation collection.
Thanks
Sai
@Sai, use a custom XSL template and add an XPath decision based on CREF ID.
Thanks Jim,
Can you please know how to Generate custom XSL templates
Regards
Sai
@Sai, Pagelet Wizard step 5 contains an existing XSL template. You can start with that one and modify it to satisfy your requirements or create a new one and paste it into the XSL text field of step 5. Use the XML from step 5 as your data source when creating a new or modifying an existing XSL template.
Hi Jim,
I have two pagelets. One pagelet with naviagation collection(with accordion xsl) and other is plain navigation collection. "Open in new window" option works in normal navigation collection but not in navigation collection with accordion. Please advice.
Thanks,
Krithika
@Krithika, you will have to check the XSL and make sure it is setting target="_blank" if the @isNewWindow attribute is true.
Hi Jim,
Thanks for the reply.I tried using @isNewWindow attribute to open the url in new window, but everytime it goes to Otherwise condition and _self is exected.Please check the syntax.
xsl:when test="@isNewWindow = 'true'"
xsl:value-of select="'_blank'"/
/xsl:when
xsl:otherwise
xsl:value-of select="'_self'"/
/xsl:otherwise
Please provide your inputs.
@Krithika, that looks correct. Make sure your XPath context is correct, meaning the current node is a NavItem node.
Jim I'm using the setup in Portal 9.1 Revision 3 (PT8.54.04) and am using a portal nav collection that I've put on the homepage.
The accordian functionality is working fine, but the PTPPB_ACCORDIAN_CSS styles aren't being applied in IE9 (it looks fine in FF and Chrome [sigh]).
Not sure if you have used the accordian yourself in this application yet?
@Banksy, you are doing better than me. I finally gave up and downloaded the latest jQuery and jQuery UI and am using that instead of the delivered CSS, JavaScript, and XSL.
Hi Jim,
I'm currently using the XSL from the whitepaper and that one seems to be working for me. we're on 8.53 tools. However, when i try the one from your blog, I couldn't seem to make it work. :(
with the whitepaper xsl there are a few things Id like to ask:
- when i click a link in any of those i've provided in the accordion, It doesn't open in a new window even if i force it on portal registry level with NAVNEWWIN parameter to True. is there any way to make this one work?
- When I try to have 2 pagelets in the landing page to use accordion, only 1 works. IS there a work around with this?
- the accordion seems to work for a few computer at work, but for other workstations it doesnt. i've updated their java and also updated their browsers but still get the same problem.
any help would be appreciated.
Thanks,
jowe
@Jowe, the XSL on this blog post is quite dated. It predates the Oracle published document.
As you probably know, Nav Collections have an Open In New Window checkbox. The way I handle this scenario is to check that box and then modify the XSL to look for the @isNewWindow parameter. If the CREF has that parameter, then add the target="_blank" attribute to the resultant hyperlink (a tag).
Thanks for this Jim. Would you by any chance have a sample of this? D
I have already ticked the New Window in the nav collection level but Im missing the part of checking the @isnewwindow parameter. Did you mean adding that validation in the XSL I use for the Jquery accordion style as well? it's those links that I need to open in a new window.
Also, is it possible to have 2 accordions in one page?
@Jowe, the XSL that doesn't work shows: 1) how to use @isNewWindow and 2) use of $selector variable. You can have multiple accordions on the same page IF you differentiate between them. The $selector variable in my XSL is what I use to differentiate between accordions.
Thanks for that Jim. I'll try it out.
Also, I've created a component pagelet and placed it in a workcentre dashboard. I had to create a customized one instead of using the Pending Approvals delivered from Peoplesoft.
The problem I'm having is when I click on the link I've placed in my component pagelet, it doesn't work to load just that page in that Target Content Area Dashboard alone.
Is there a way that I can only load into that specific IFrame alone?
Thanks
jowe
@Jowe, it depends on how you created the pagelet. If it is a pagelet wizard pagelet/query pagelet, then create the link in pagelet wizard rather than in query. If you created the pagelet using an iscript or component or other PeopleCode method, then use the GenerateXxxContentUrl method rather than the GenerateXxxPortalUrl method.
Hi Jim,
I tried to follow the posting and couldn't find info for current release and delivered OVA containing these samples. I am using Virtual Box for IHUB 9.1 Rev 3 and HCM 9.2 PI#9. The accordion menu XSL in PT8.54.06 has a bug, once I modified the XSL, it showed as accordion style. Questions are (1) I can't find delivered navigation collection HC_SC_MYHR_NAV and DEMO_SLIDESHOW, how do I recreate those? I figured HC_SC_MYHR_NAV is created in HCM 9.2. Correct? How to display those images with "expandable arrow" on the right of the images? Is there some delivered images for those? (2) I don't know where to find info on creating "Rotating news images are linked to news publication articles". Is it posted on any white/red paper?
I appreciate your help.
Thanks,
YF
@YF, as you noted, the accordion XSL is delivered, but nothing else. You need to create your own navigation collections. I don't believe the slide show was ever delivered. I originally designed it to work with Interaction Hub news publication top stories.
@Jim
I have created accordion menu style in pagelet .Every link is in folder but when i expand the folder there is lot of white space is there between link and folder. How can i remove that white space.
Do i need to reboot the appserver/webserver cache of portal. ?
@Ankur, I have not experienced that before. I would use Chrome developer tools to inspect the region with too much white space.
@JIM
thanks jim. it solved but reason was that I have not put the links into folders and place directly to root folder it causes too much white spaces b/w links/folder.
@jim : A pagelet is having navigation collection and there are 4 folders in this navigation collection. I have implemented the accrodian style menu for this .there is one folder which have only one link and to access this folder user should have a particular role .
Issue is , when user have multiple roles so that he can access all of the folders or more than 1 folder of this pagelet then it's work fine but if user has only access to one folder not others in this case all of the links of this folders individually displayed .It means if a folder is having 2 links then each link will have own folder with the same name of link name.Example: if a folder is having "test1" and "test2" links then we have assigned the respective role to user to access this then pagelet shows two folders as "test1" and "test2" and two links as "test1" and "test2" respectively.
it should displayed only one folder and two link as "test1" and "test2". Can you please help me out on this?
@Ankur, if security makes it so the nav collection only shows one folder, then PeopleSoft will drop that folder and just display the folder's links. I don't like that it does this, but that is how it works. The only alternative I know of is to use security to keep the pagelet from being available to users with only one folder and give them a different pagelet.
@Jim: In your earlier post you are referencing that you added attribute to the links that DON'T have "open in new window" or "replace window" selected. How do you check for this attribute in XSL to replace @AbsolutePortalURL with %ComponentContentUrl(PORTAL, NODE,_CREFID)
@Steve, I check both the @isNewWindow and @isTopWindow attributes. Both will be false.
Hi Jim, Can we open external links as "pop ups" in an accordion menu? I used NAVNEWWIN = TRUE but it opens the external link in a new window. I need to be able to open it as a pop up instead.
Hi Jim, how do I make the top level folders of an accordion menu colorful? I see in the demos & whitepapers the tiles [or the top level folders] to be in different colors; whereas when I use the code provided here [also Appendix A of the white paper] - I get the standard light blue PS menu background color.
@Sarita, I used jQuery UI dialogs to open links in dialogs. I used the isNewWindow attribute to determine how to open links. One of the red papers shows how to do it with PeopleTools JavaScript dialogs.
I colored the folders by using special CSS selectors for the folders as well as a CSS background image specified as base64.
Thanks Jim for the reply, I will try this. However, I have another question now. Have you tried the "Is folder navigation disabled" CREF property in an accordion menu? I have multiple levels within the accordion menu am implementing & the user doesn't want the folder navigation to display in the target area when the second level folder is displayed. Instead they would like to either see a flyout or the sub folders expanding beneath the main folder. Please advise!
@Sarita, I have not tried that. Seems like a reasonable idea though.
Hi Jim, I am not able to get sub folders to expand within an accordion menu on a portal homepage, instead the "standard navigation page" pops up even if the "Is folder navigation disabled option" is selected on the CREF definition.
I noticed the sub folders work only in "Enterprise Menu" & "Menu" pagelets ; both of these delivered menu types use application packages to build the folder hierarchy & have the expansion/ collapse behavior. However for pagelets using navigation collection as data source behave differently & do not hold information of the sub folders but only an HREF to the standard navigation page. Is my understanding correct?
So, question is, it possible to build an accordion menu which has sub folders with the expansion/ collapse behavior? OR can we stylicize the delivered enterprise menu to work like an accordion?
We have a lot of content in the system & need to have the ability to categorise the content into sub folders/ display it in accordion format with all the sub folders expanding/ collapsing in the menu frame.
Please advise!
@Sarita, navigation collections have their own folder hierarchy. If you create new folders in a navigation collection and then add content references to those folders, you will have expandable content. Try creating navigation collections with just one level of folders with content inside those folders.
Hi Jim, agreed, navigation collections have their own folder hierarchy. I created "user defined" folders & sub folders (level2) in navigation collection as well. However, when we use the accordion XSLT - the second level folder continues to open the standard PeopleSoft navigation page instead of expanding the folder beneath it within the menu. I am looking for a nested accordion. Is that possible via the delivered registry & navigation collection framework?
@Sarita, nested accordion, I have not created one. It is certainly possible.
Hi Jim, how do we raise an enhancement request with Oracle? And what is the usual turn around time? We are running on 8.53/ 9.1 & plan to upgrade to 8.54 next year. I had a look at 8.54 as well & don't think nested accordions are delivered. Would rather have this functionality delivered than building complex custom code.
@Sarita, you log enhancement requests through My Oracle Support. The turn-around time is based on many factors, so it is not possible for me to predict. I suspect that you will find it faster to build your own rather than wait for Oracle. I built the accordion navigation several years before it made it into the product.
Hi Jim, OK. Another question, is it possible to create mega menus off the portal registry? Looks like the users are not happy with the nested accordion anymore, they are seeking a cleaner view of the content. Have you created one before or can direct me to some good tutorial?
@Sarita, I have not created one.
There are no limitations. If you have seen it done on the internet, then you can do it in a pagelet.
Hi Jim,
I created the mega menu and it worked fantastic. Now there's another problem with the accordion !
I used the xslt that is mentioned on this blog in 8.53 toolset and it worked fine. However, when I use the same xslt in 8.54.18 version - I get an "out of memory" error. Is there a way to fix this?
Also, will you be able to share the enhanced version of the transformer code where the top menu appear in different colors with the drop down arrow?
@Sarita, I believe the problem is with the link element in the XSL. If I remember correctly, that stylesheet import needs to be moved into the style element using the CSS import directive.
Hi Jim,
We recently upgraded to PeopleSoft 9.2 HRMS, tools 8.54. Here is the issue, We implemented accordion navigation on HomePage with self-service links. It appears that some buttons (save/approve) buttons are missing when we navigate to different pages through accordion navigation. However, there is no issue if we navigate through PeopleSoft delivered Navigation.
This appears to be an issue with IE, it works fine with chrome. Any thoughts on this issue?
Hi Jim. A little unrelated but have you created an navigation collection where the first content reference is a non-PeopleSoft url? I am looking for a way to override the default behavior which automatically opens the external web page when the nav collection initializes. Thanks.
Post a Comment