Friday, June 21, 2013

New PeopleTools 8.53 Branding Tools

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.

19 comments:

FoggyRider said...

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

Jim Marion said...

@FoggyRider, did you clear your app and web server cache and restart both?

FoggyRider said...

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

Jim Marion said...

@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?

FoggyRider said...

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

Jim Marion said...

@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.

Eva Lona said...

Where can i find peoplesoft events and things like that?

Jim Marion said...

@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.

Unknown said...

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

Jim Marion said...

@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.

Unknown said...

Thanks Jim. This helps.

Tom

Daria Kempka said...

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.

Jim Marion said...

@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].

Chris said...

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

Jim Marion said...

@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?

Tom Mannanchery said...

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

Jim Marion said...

@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.

FoggyRider said...

@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

Jim Marion said...

@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.