PeopleSoft pages use CSS-based stylesheets for defining the look (style) of each page element. CSS is a web standard for defining the presentation of a webpage. If you’re new to this concept and want to know more, there’s tons of tutorials and articles. PeopleSoft StyleSheets are created in Application Designer using a GUI editor which looks somewhat similar to Nvu’s CSS Editor:


An apparent advantage of this is that a PeopleSoft developer does not have to be knowledgeable about CSS to use styles. The GUI however does not allow direct editing of CSS, hence we’re limited to CSS properties that are available to the GUI. Another limitation is that there is no way to define media-specific styles.

Following is a technique for creating a hand-coded CSS stylesheet and inserting it to a PeopleSoft page via javascript.

  1. Create a HTML definition for writing your CSS
  2. Insert the following javascipt to your page: 
    
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
 window.onload = func;
} else {
 window.onload = function() {
   oldonload();
   func();
 }
}
}
 
addLoadEvent(function() {
  if (document.createStyleSheet) document.createStyleSheet('%JavaScript([HTMLDefinition])');
  else {
    var s = document.createElement('link');
    s.setAttribute('rel','stylesheet');
    s.setAttribute('type','text/css');
    s.setAttribute('href','%JavaScript([HTMLDefinition])');
    document.getElementsByTagName('head')[0].appendChild(s);
  }
});
</script>

    where [HTMLDefinition] is the name of the HTML definition you just created. Note: do not prefix this with HTML.. For example, if you created the HTML definition named MY_CSS, then the above code should say '%JavaScript(MY_CSS)'.

Explanation of the technique

First, if you haven’t done so, read the post about inserting javascript to a PeopleSoft page.

In the following code, there were two ways of injecting the style 


  if (document.createStyleSheet) document.createStyleSheet('%JavaScript([HTMLDefinition])');
  else {
    var s = document.createElement('link');
    s.setAttribute('rel','stylesheet');
    s.setAttribute('type','text/css');
    s.setAttribute('href','%JavaScript([HTMLDefinition])');
    document.getElementsByTagName('head')[0].appendChild(s);
  }

These two ways were presented for cross-browser compatibility. [1] document.createStyleSheet, if available (implying IE), will be used to inject the style, otherwise the standard DOM manipulation, which works for Gecko/Opera is used to append the stylesheet in the head element. [2]

%JavaScript([HTMLDefinition]) is a PeopleSoft meta-html function, which means it is evaluated and will not actually show up in the actual HTML that is sent to the browser. When a PeopleSoft HTML Area contains %JavaScript([HTMLDefinition]) code, PeopleSoft saves the content of the HTML definition to a temporary file in the server cache, and substitutes the URL of the file to the %JavaScript([HTMLDefinition]) snippet.

Caveat Implementor: The file served by %JavaScript([HTMLDefinition]) has a content-type of application/x-javascript. Thus far, it is handled well by current browsers (IE/Gecko/Opera). In the unlikely event that this would become a problem in the future, another alternative for storing the CSS in PeopleSoft is by usage of IScript pages, which allows us the dictate the content-type of the output. For the time being, because of the need for defining security, using IScript is too troublesome for this purpose.

[1] Although in corporate environments, your application will likely be displayed in IE. One thing that impresses me about PeopleSoft is how their pages were designed to render consistently across browsers (IE/Gecko/Opera). As much as possible, I also consider cross-browser issues when applying solutions.

[2] document.createStyleSheet is only available on IE, and IE does not allow the DOM insertion of a link element inside the head element.

Related Posts