If you have an instance of PeopleTools 8.53, you may have noticed a new component at PeopleTools > Portal > Branding > Branding Objects. This new component allows you to upload images, HTML definitions, JavaScript definitions, and Stylesheet (CSS) definitions. The uploaded definitions become managed definitions in Application Designer. The point is to make it possible for customers to create and maintain user experience definitions online rather than having to log into App Designer to create and maintain these definitions. Once uploaded, if you prefer, you can still view and maintain these same definitions with Application Designer (but it is recommended that you maintain them using the Branding Objects component instead of App Designer). Note: the image upload does not yet support PNG (can you imagine a beautiful web without PNG? Me neither). I hope to see PNG in a future release. You can still create PNG's in App Designer, just not through the new Branding Objects component.
Being able to upload and create App Designer images, JavaScripts, and CSS files through an online component is nice, but where can you use these definitions? Just about anywhere that you see an image prompt. Here are some examples:
- Navigation Collections
- Pagelet icons
- Pagelet Wizard HTML and XSL
Navigation Collections are pretty self explanatory. You use the prompt to select an image. Pagelet Wizard, on the other hand, is quite open. One way you can use these images is with Pagelet Wizard's custom XSL PSIMG tag:
<PSIMG ID="MY_UPLOADED_IMAGE" BORDER="0" />
Another way to use these definitions (and any other JavaScript, CSS, or image definition in App Designer) with Pagelet Wizard is through a collection of new iScripts (with examples):
- IScript_GET_JS: http://your.peoplesoft.server/psc/ps/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_JS?ID=PT_JQUERY_1_6_2_JS
- IScript_GET_CSS: http://your.peoplesoft.server/psc/ps/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_CSS?ID=PSJQUERY_BASE_1_8_17
- IScript_GET_IMAGE: http://your.peoplesoft.server/psc/ps/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_IMAGE?ID=PT_LOCK_ICN
I avoid hard coding server names in URL's if at all possible. To avoid hard coding the server name, start your URL with /psc/, skipping the server portion. When using this relative approach, though, keep in mind the pagelet's runtime context. If this is a local pagelet in a content provider or Interaction Hub, a relative URL will work just fine. However, if the pagelet is a remote pagelet, coming from a content provider, this relative approach will not work. Another thing to keep in mind when using these iScripts is your instances site name. Even with a relative URL, you still have to hard code your instance's site name, which usually differs between development, test, QA, and production instances.
34 comments:
Hi Jim,
This is really a PT8.52 question, but it probably applies to 8.53 as well. How do you set the overall doctype for the portal? I tried changing the PT_HNAV_TEMPLATE doctype but it made no effect. According to the Portal->General Settings page we are using the default template.
Thanks for the help!
Gary
@FoggyRider, did you clear your app and web server cache and restart both?
Hi Jim,
Yes, I shut down the app and web server, cleared both caches as well as my local brower cache and rebooted. I am not sure if this is relevant, but when I look at Portal Objects -> Templates for the default 8.50 template it uses the Remote by URL storage type calling the WEBLIB_PT_NAV.IScript1 function.
Thanks for the help.
Gary
@Gary, I think I misunderstood the question. I thought you wanted to change the default template for your portal. It sounds like you are already using the default template, and yes, it is an iScript.
When you say doctype, do you really mean the Content-Type response header?
Hi Jim,
I am asking about the html doctype header which is currently using the html4 standard:
We would like to try and change this to the html5 standard of:
Thanks,
Gary
@Gary, I see. If you build an iScript, you can control the doctype for the content delivered via the iScript, but PeopleSoft does not allow you to change the doctype for components, homepages, etc. Those are all delivered in IE "quirks" mode for older PeopleSoft versions (not sure about the latest 8.53) because the HTML does not conform to strict mode. You could change the doctype with a servlet filter or some other proxy based content filter. I have been told that this has no affect on Firefox or Chrome and renders poorly in IE.
Where can i find peoplesoft events and things like that?
@Eva, most events are related to user groups. For example, HEUG has their Alliance conference every March; Quest, OAUG, and IOUG have their Collaborate event in April; and HIUG has their Interact conference every June. There are also local user groups that hold periodic meetings (mine is semi-annual). The big OpenWorld customer event happens each year in the fall. A recent addition to the conference schedule is Reconnect.
Hi Jim,
I am currently working on Branding our PeopleSoft Applications. The Interaction Hub provides a Branding Center which makes it a lot easy to make branding changes, but this is not present in content provider portals (HCM, FSCM, CRM etc.)
Is there a way to migrate and assign custom themes created in Interaction Hub to the content provider portals?
Just curious - why dont the content provider portals have the Branding Center?
Thanks,
Tom
@Tom, you are correct that the content provider apps (HCM, FSCM, etc) do not have a branding module. The branding module is an application specific module that exists only in the Interaction Hub (Enterprise Portal). It is sort of like Time and Labor to HR or General Ledger to Financials, but a bit more useful across products ;). If you navigate to PeopleTools > Utilities > Administration > PeopleTools Options, you will see a branding package and class. The interaction hub has a different value from all the other apps. It is this app class that hooks into the Interaction Hub branding.
You can brand the content provider apps, but it is a lot more work. The way to brand the content providers is to subclass the app class listed in PeopleTools options, and then override any HTML, CSS, etc necessary to create the appearance you desire.
Thanks Jim. This helps.
Tom
Hi, I'm a front-end dev/designer and not familiar with People Tools at all. In application designer, is it possible to add form fields and labels by hand-coding the html - or by dragging the element into the layout and then editing the html that application designer generates?
I'm really struggling with all the td tags and inline styles that application designer is adding and I want to clean up the html. Thanks in advance.
@Daria, many of us struggle with the same table-based layout frustrations. At this time, there is no work-around. The HTML for fields and labels is generated by a C++ program running in the app server. Yes, you can create your own HTML using the HTML Area field type, but your fields would not be bound to the component processor. Right now, about all you can do is work with the CSS.
If you are interested in seeing Oracle's future strategic direction in regards to PeopleSoft front-end development, you might want to look at the OpenWorld presentation PeopleSoft PeopleTools Roadmap: The Next-Generation PeopleSoft User Interface [CON9131].
Hi Jim,
I've noticed that in PT853 the pagelet's header bar has changed slightly, forcing the actions (minimise, remove, etc) into a dropdown list. When trying to customise the look and feel of the Portal this is proving problematic. Do you have any advise on where to hook into the creation of this 'action bar', or if there's a way to revert back to the older style?
New: http://www.greyheller.com/wp-content/uploads/2013/02/pt853_hcm91_fp2.png
Old: http://gwb.blob.core.windows.net/biztalkunleashed/Windows-Live-Writer/Ins.0-on-Windows-Server-2008-with-SQL-Se_EB6E/PS%20HomePage.jpg
Thanks for any help,
Chris
@Chris, that is a great question. I actually haven't tried in 8.53. One of the things I have had problems with is the z-index on the new controls and other animations I add to homepages.
I assume you already looked at the HTML/CREF Attribute overrides? I assume you also already looked at using CSS and JavaScript with the .hpcontrols and .ptPgltControls CSS classes?
Hi Jim,
This is regarding Bar items in Header/Footer of Interaction Hub. How can we have a link here that opens in a new window? I created a Content Reference with NAVNEWWIN=true, and then added a Bar Item of type 'Link to Menu Item', but this doesn't work.
Have you seen something like this in the past? What do you think is a good approach?
Thanks,
Tom
@Tom, I believe I know what you are talking about: header bar 1, header bar 2, etc, but no, I don't believe I have tried to open them in a new window.
@Tom,
You can create a Custom HTML element (like %51) in your HEADER template then in define headers under the HTML area tab make the source for your custom HTML element an ApplClass and have it call a method that generates your html link with a target="_Blank"
Gary
@Gary, great way to solve it. It won't be in the header bar, which is wrapped in other HTML (table in some PeopleTools releases), but you can get it close, and can wrap the two in other HTML so you can apply CSS to them as a group.
Jim, this is excellent, just the resource I was looking for with regards to branding objects in pagelets.
I'm not quite grasping how to use the IScripts within the XSL however. Could you provide a simple example of how to get an image or CSS file?
Also, the "next-generation PeopleSoft UI" looks incredible, finally something quite modern looking and standards-forward! I just hope that the homepages don't default to quirks mode :) (Speaking of which, is there a reliable way to change it to default to IE9 standards or is that not a good idea?)
@Vlad, Here is what the HTML would look like:
<link rel="stylesheet" href="//your.peoplesoft.server/psc/ps/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_CSS?ID=PSJQUERY_BASE_1_8_17">
I hear that 8.54 is supposed to be standard, not quirks mode. I don't recommend trying standards mode with older PeopleTools.
@Becca, sorry, the delete button is too close to the publish button, and I inadvertently deleted your comment. How would an add get embedded in a page? PeopleSoft pages are HTML and pass through many gateways, proxies, etc. It would be possible for a user on a public, add supported network to be browsing through a proxy that injects advertisements into pages. If you are using SSL, then this wouldn't happen. The other place for injection is within the browser. If the user has a browser plugin or spyware plugin then it has full access to the page and can inject HTML containing ads.
Jim, thanks a lot for the previous answer, that helped. I have another question that I can't seem to figure out though.
If I'm creating a pagelet and accompanying XSL for a PSQuery data source and that PSQuery retrieves an image from the database (for example from PS_EMPL_PHOTO), is it possible to display that image somehow with XSL or would I have to make the pagelet through iScript instead?
@Vlad, if you were using an image from App Designer's managed image definitions, then you could use PSIMG or the iScript. But since you are using another table that stores images, I recommend that you create an iScript to serve the images and continue using Pagelet wizard. Your image source will be the iScript URL with the EMPLID (or something like that). You can find a sample iScript in this blog post.
Dear Jim, I have just started reading your blog and would like to appreciate your knowledge sharing approach.
I need your advice on below:
Summary of my understanding:(pls. correct me if I am wrong)
I am trying to parse the HTML sent by web server to browser. What I have discovered till now (through reverse engineering and your blogs) is that most of HTML code related to navigation and branding exists in application designer tables. But the main content of the component is put inside an Iframe in the HTML. This iframe links to another HTML which contains the main content page.
My requirement:
I want to write a server side script which can send the whole HTML as displayed by browser in text form to another sever. In another words the HTML sent should be what we see when we 'inspect element' in say crome, with each level of abstraction opened.
One case may be say, if the main content HTML is pre-prepared and sent to web browser, then can we 'tap' that HTML somewhere between appserver and web browser.
I have not much understanding of web technologies so please ignore if I am using wrong terminology.
thanks
Anshul Tomar
@Anshul, you certainly can inject something into the HTTP request/response. The best place to do this is in a reverse proxy server. A common configuration is to place a reverse proxy in front of PeopleSoft so web browsers communicate with the reverse proxy and the reverse proxy communicates with PeopleSoft. The reverse proxy is usually an Apache httpd derivative.
Thanks a lot Jim! :-) Let me dig out more on this reverse proxy server thing!
Hi Jim
We've just gone live with 8.53 and are investigating it's branding capabilities compared with Interaction Hub. I'm getting the impression that branding using 8.53 tools alone is more suitable to one single branding applied across the board, whereas for multiple branding, Interaction Hub would be more suitable. Do you have any information that compares the capabilities of PT 8.53 versus Interaction Hub?
Kind regards,
Sara W
@Sara, your assumptions are correct. 8.53 gives you the ability to upload images, create CSS, JavaScript, etc, but the question is where to use those. In 8.53, the primary use case is Pagelet Wizard. You can apply branding without interaction hub, but it is VERY HARD. 8.54 released on Friday. It has a version of Interaction Hub's role based branding, but I think it is actually better than the one in Interaction Hub.
Thanks Jim, that's useful to know.
Hi Jim,
Do you have ideas regarding how to put 'New Window' link on the header so that it is available on all pages, irrespective of components or homepage/dashboards? Would there be any issues doing that?
Thanks,
Tom
@Tom, Yes you can add a "New Window" link to every page. Yes, there are some things to consider (same domain iframes, etc). This isn't perfect, but will cover most situations. Create a function that uses a regex to replace the site name in the TargetFrame URL with the sitename_newwin. You don't exactly want the TargetFrame URL, but the target frame has a JavaScript variable named strCurrUrl (frames["TargetContent"].strCurrUrl).
As you know, components have a setting for the New Window link. It should be enabled unless opening a new window would break something. With that in mind, it is not safe to put a New Window link in the header because the component should make that decision. This is the theory and best practice. Unfortunately, however, there are a lot of components delivered without the New Window link that are perfectly safe. Adding a New Window link to the header seems like a reasonable way to enable new window on safe components without modifying components.
Thanks so much for the quick response Jim. Our challenge is that we have a set of user (specifically HR Helpdesk) who have the habit of using several PS tabs. Instead of using the 'New Window' functionality, they actually open a new tab and open a PS session using their browser favorites. We are seeing some undesirable behavior due to this. We are trying to enforce the users to use the 'New Window' and 'Favorites' features of PS instead.
What you explained regarding components that dont have 'New Window' makes sense. To make it less risky, would it be better to place a 'New Window' link in the header that opens the homepage in a new window?
Tom
@Tom, having a new window link to the existing component/navigation would be the least risky. It is definitely less risky than opening a new browser window. The only risk is just that the new window will open to a component that won't work. This may happen for hidden components that are accessed from other starting components (custom search components, etc).
The problem with a link to the homepage is that the URL for the homepage always resets to the first state block (with no _xx in the site name).
Post a Comment