Wednesday, January 31, 2007

Importing Custom Stylesheets into PeopleSoft Pages

Adding Web 2.0 behaviors to a PeopleSoft application usually requires adding Javascript, CSS, and HTML to a delivered PeopleSoft page. One way to do this (besides Monkeygrease) is to add an HTML area to a page and place your custom Javascript, CSS, and HTML inside that HTML Area. For more dynamic, data-driven customizations, you can use PeopleCode, HTML definitions, and a derived/work record to set and modify the contents of the HTML Area.

An issue that needs to be resolved when adding Web 2.0 behavior to PeopleSoft pages is how to style those custom HTML elements. If the elements are standard HTML form elements and you want to maintain a consistent look and feel with the PeopleSoft UI, then you can use the standard PeopleSoft CSS class names. However, if you want to go beyond the standard form elements, then you are going to need to add some additional style classes that may or may not be available through PeopleTools stylesheets. For example, the jQuery Thickbox plugin requires additional styles to implement the Thickbox behavior. If you were a web developer in complete control of the rendered HTML, you would either add these styles as a style element inside the head element or you would link them into the document by adding a link element inside the HTML document's head element. The problem is, even though you may be a web developer, you are not in complete control of the HTML rendered by the PeopleSoft application. Instead, you are a web developer that is in complete control of a piece of HTML that will be rendered inside the body element. Therefore, to comply with standards, you must avoid adding style and link elements using a PeopleTools HTML Area. Fortunately, we can use Javascript to import stylesheets. Here is a function I use to import custom jQuery plugin stylesheets:

function importStylesheet(sheetUrl) {
var ss = document.createElement("link");
ss.rel = "stylesheet";
ss.href = sheetUrl;
ss.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(ss);
}

If you plan on reusing this function, then place it in a file on your web server and call it like this:

<script type="text/javascript">
importStylesheet("/css/thickbox.css");
</script>

I tested this on both IE 6.0 and Firefox. I believe this is a standards compliant DOM manipulation. However, you may need to modify this for other browsers.

22 comments:

kalyan said...

Hi Jim, your blog has lots of information that is worth learning. Recently, I came across a situation in PeopleSoft PeopleTools and I'm hoping you can provide some insight. I tried creating a custom stylesheet class for just one particular Grid's Body Area background Style to somehow show a scroll bar along the height of the Grid.(This Grid has Occurs count of 15 and if the reslts are > 15, then a scroll bar should appear). But of no avail, the overflow's assignment in the Stylesheet class's properties didn't work. Well, there is no place holder to define fixed height for Overflow to trigger. If only "div" tag makes the scroll bar appear, can we make use of it via PeopleCode/Java Script? If so, how? Thanks in advance for your reponse. Kal.

mymithraa said...

Jim,
Am Trying to import Custom CSS into Peoplesoft pages...but not able to see any changes in the page :-(..

1) Inserted one HTML area in the page where i am going to import custom css

2) Below is the code pasted in the HTML area
(Not able to use HTML tags)
script type="text/javascript" src="Webserver Path/jquery.js"
/script

script type="text/javascript" src="Webserver Path>/thickbox.js"
/script

script type="text/javascript"
{
var ss = document.createElement("link");
ss.rel = "stylesheet";
ss.href = "/thickbox.css";
ss.type = "text/css";
ss.media="screen";
document.getElementsByTagName("head")[0].appendChild(ss);

}

/script

3) After placing files...even bounced the webserver but not able to see any difference..

Need ur suggestions...dont know what i missed...

Jim Marion said...

@mymithraa, did you try typing the URL for thickbox.css, thickbox.js, and jquery.js into your web browser? Does it find those files or return a 404 error? If it finds the files, do the file paths match the paths used in the HTML Area?

Tobias said...

I have a question. How do we use the free from stylesheet in peoplesoft. Example if I want to give a curved background look for a group box how can I apply a free form stylesheet on the group box?. I am not able to see any free from style class in the style definition option on the groupbox property. I can see all the standard style class of the page overide style sheet i applied. Please help

Jim Marion said...

@Tobias, there are two ways to accomplish this. First, though create your free form stylesheet within App Designer. Second, attach the free form stylesheet to another top level stylesheet. Here is where you have options. If you only want the change on this page, then clone the page's stylesheet and then attach your stylesheet to the page's stylesheet. Otherwise, don't clone, just attach to the delivered page stylesheet.

If you want to keep close to vanilla, then go to PeopleTools > Utilities > Administration > PeopleTools Options and find the stylesheet for your install. Usually PSSTYLEDEF or PSSTYLEDEF_SWAN. Clone that stylesheet, and then attach your free form stylesheet to your new cloned top level stylesheet. Next, update the stylesheet on the PeopleTools Options page.

Note: If you clone the PeopleTools options one and it was a _SWAN stylesheet, make sure you use the _SWAN suffix as well. Failure to do so will remove all the new SWAN HTML and images from your new style.

Tobias said...

Hi Jim, Thanks for attended my question. I understood what you said. My question is about how to apply this newly added style sheet to any page element. Normally if I look on to the element's property and I check the stylesheet definition available I am not seeing any freeform style sheets but only the other ones. So if I need to apply this freeform style sheet on the element how will i do it.? Will it work if i assign it through peoplecode by setting the style property?

Jim Marion said...

@Tobias, you don't apply stylesheets to elements. You apply style classes to elements. The classes must exist in your stylesheet. The stylesheet is either applied at the page or system level. Using the information I gave you before, you need to create your stylesheet, assign it to the page or system, and then you can use an individual style class from that stylesheet.

Kevin Weaver said...

Jim,

I have been working on a more UI friendly version of our department security tree. We use the tree not only for row level security in PeopleSoft, but we also use it for the same purpose in OBIEE. This brought about the need for a more UI friendly tree view of our organizational structure. I found a project on github and quickly had a UI friendly version of the tree. However, it only works well in IE7, our corp. standard, if I render the tree via an iScript. The problem I am having now is applying delivered style sheets to the iScript version of the tree. I have registered the iScript to be accessed via the a menu path, and I can see that the delivered css is in the HTML, but when I reference them, they don't work. I suspect this is due to the fact the iScript renders itself in it's own html tags with its own header. When I attempt to use javascript to add the style sheet to the header, peoplesoft strips this code out? I suspect there is a way I could use the css in the header from the menu, but I have not figured that out yet. How can I use css from the main html area in my iScript and/or how can I add a style sheet to an iscript rendered via the menu path?


Thanks Kevin

Jim Marion said...

@Kevin, just to confirm... You have an iScript with the tree and everything is working great, except that it doesn't use delivered PeopleSoft style sheets. You also created a CREF for your iScript so you could access the iScript from a menu item.

The default template for a CREF uses a frame. In 8.50+ it uses an iframe for content. Prior to 8.50, PeopleTools used framesets. Either way, the stylesheets in the header, etc are not available to the transaction page because they are in different frames, completely isolated. To import delivered stylesheets into your iScript, add a link tag to your HTML and get the URL for your stylesheet from %Response.GetStyleSheetURL. If you have a specific stylesheet you want to add to your page, then you can hard code it. If you want to use the default, then select it from the STYLESHEET field in PSOPTIONS.

Kevin Weaver said...

Thanks Jim! I did not know I could use the response object to add the stylesheet. I guess this would have been one of those instances where reading peoplebooks would have paid off! I have it working and boy is it slick. I should make this my first ever blog entry, then maybe someone like you can help make this tree searchable. I have a few ideas on how do it, but might be running out of time on this project.

Jim Marion said...

@Kevin, you should blog it. You are a smart person and do some really cool things. And yes, then someone from the community can help you make it searchable. If all the content is local, then you can use the jQuery contains selector to search content. I used this Stackoverflow answer to create a case insensitive Contains selector.

Kevin Weaver said...

You asked for it. Here is my first ever blog entry, http://pskcw.blogspot.com/ . Make sure you use the tree demo I put in the blog post.

Let me know what you think?

Jim Marion said...

@Kevin, well done! Don't you just love tree SQL?

Rachana Murkute said...

Hi Jim,

Can you please let me know, how do I add or use delivered PeopleSoft StyleSheet in Iscripts for Mobile Devices. Kindly help.

Thanks & Regards,
Rachana

Jim Marion said...

@Rachana, The PeopleBooks entry for %Response.GetStylesheetURL contains an example of how to get the URL and then insert that into the response. Rather than concatenate strings like what is shown in the example, however, I recommend that you use HTML definitions with bind variables.

Rachana Murkute said...

Thanks a lot Jim !!! I used HTML definitions with bind variables and its working.

Rachana Murkute said...

Hi Jim,
I did Iscript which work on mobile devices. However it is not adjusting its size according to mobile screen.It fits screen horizontally properly.
However size of buttons and fonts are small. Can you suggest,what I exactly need to do to make it auto adjust as per mobile screen ?

Jim Marion said...

@Rachana, I think you want responsive design. This does not happen automatically. You have to add Media Queries to your CSS.

Rachana Murkute said...

Thanks a lot Jim !!! Will try implementing the same. Will let u know once its done.

Rachana Murkute said...

Hi Jim... It worked out well with Media Queries. Thanks a lot for your guidance.

Sans....Says said...

Jim,

I have a requirement to show rotated text on PeopleSoft page.

We used html area with text associated with
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)

This works well for IE version below 9. IE 9+ browsers or Non-IE browsers do not behave similarly.

Is there a way to get proper rotated text on a PeopleSoft page and which can be compatible with modern browsers consistently.

Santh

Jim Marion said...

@Sans CSS transform.