The PeopleSoft Interaction Hub uses Paglets (also called Portlets in other systems and Grouplets in 8.54) to display a number of types of content within Tabs.
Pagelets use multiple Data Sources to display different types of content. In this article, we will focus mostly on the Free Text Data Type to provide different examples of what can be done with various HTML elements. Another data type we will examine will be type URL, which can read html pages (for example XML data) and display data in a particular format: (for example RSS).
Getting started ~ Create an RSS Pagelet in PeopleSoft:
You will need the following role: "Portal Administrator" assigned to your account to complete these steps.If you haven't used the pagelet wizard, it can be found within:
- Main Menu -> PeopleTools -> Portal -> Pagelet Wizard -> Pagelet Wizard.
- You will need to "Add a New Value" Pagelet ID here: ensure to fix a customized prefix to the title: IE CUST_ to ensure you don't have conflicts with existing functionality or subsequent updates.
- The Pagelet title is required, and you must click another box to get the next button enabled
- Click next and set the Data Type as: URL ~ this can be used with an RSS Feed.
Setting the Data Source
- paste an RSS Feed URL in the URL Data Source
- Click next and leave data source parameters as default
- Click next and Specify Display Options as Custom
- Click next and For the XSL template select RSS
I used the following XSL template (paste into XSL Box):
<?xml version="1.0"?>
<!--
Description: XSLT supplied with the Pagelet Wizard.
Transforms a RSS 0.91 document to a pagelet, as a bulletted list,
with image and textinput if available.
Copyright: (c) PeopleSoft Inc. 2002.
Product: Enterprise Portal Solutions. Rel 8.8
-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<xsl:apply-templates select="/rss/channel"/>
</xsl:template>
<!--
Begining of RSS channel section
Displayes the base table structure, as well as calling the various
secitons for image, item, and textinput.
-->
<xsl:template match="/rss/channel">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td>
<font class="PABOLDBLUETEXT">
<a href="{link}" title="{description}" target="_blank">
<xsl:value-of select="title"/>
</a>
</font>
</td>
<td align="right">
<font class="PABOLDBLUETEXT">
<xsl:value-of select="pubDate"/>
</font>
</td>
</tr>
<xsl:apply-templates select="image"/>
<tr>
<td colspen="2">
<ul>
<xsl:apply-templates select="item[position() <= 3]"/>
</ul>
</td>
</tr>
</table>
<xsl:apply-templates select="textinput"/>
</xsl:template>
<!--
Begining of Image Section.
This section is called by the channel section to dispaly the RSS image
if present.
-->
<xsl:template match="/rss/channel/image">
<tr>
<td colspen="2">
<a href="{link}">
<img src="{url}">
<xsl:if test="title">
<xsl:attribute name="alt"><xsl:value-of select="title"/></xsl:attribute>
</xsl:if>
<xsl:if test="width">
<xsl:attribute name="width"><xsl:value-of select="width"/></xsl:attribute>
</xsl:if>
<xsl:if test="height">
<xsl:attribute name="height"><xsl:value-of select="height"/></xsl:attribute>
</xsl:if>
</img>
</a>
<br/>
</td>
</tr>
</xsl:template>
<!--
Begining of Item Section.
This section is called by the channel section. Each item present in the RSS feed
is processed and displayed in turn.
-->
<xsl:template match="/rss/channel/item">
<li>
<a href="{link}" class="PSHYPERLINK" title="{description}" target="_blank">
<xsl:value-of select="title"/>
</a>
<div class="portlet-font">
<xsl:value-of select="description" disable-output-escaping="yes"/>
</div>
</li>
</xsl:template>
<!--
Begining of textinput Section.
This section is called by the channel section. If a textinput is present, it will
be displayed.
-->
<xsl:template match="/rss/channel/textinput">
<form action="{link}">
<xsl:value-of select="description"/>
<br/>
<input type="text" name="name"/>
<br/>
<input type="submit" value="title"/>
<br/>
</form>
</xsl:template>
</xsl:stylesheet>
If you see the red markup < =3, you can adjust this to the number of articles you prefer to display.
- The Pagelet Preview window should correctly display your RSS feed.
- Click Next and Check the box for a Home Page pagelet.
- Select a logical folder you would like to place this Pagelet in.
- You also have an opportunity to set security here. Please check out my Security Architecture section for information on how to copy Roles from another Peoplesoft server ~ this would be useful if say you only want to display this RSS feed to a particular type of user.
- Click Save or Finish -either button should do the trick.
- To have your new Pagelet display on a tab (IE the home tab) you'll need to add it within structure and content.
- Navigate to: Main Menu -> PeopleTools -> Portal -> Structure and Content
- Navigate to folder: Portal Objects > Homepage > Tabs
- You should see a list of Tabs, which are also content references. I have more information about tabs in the portal registry here.
- Click the Edit button of one of the tabs that already appears on your home screen ~ the default "home" tab is always the one with the lowest sequence number you have access to.
- You should be able to find your new pagelet in Tab Content. (under the folder you placed it under in the last step of the pagelet wizard)
- You will need to set the following options:
- Check the box beside the title (Custom RSS Pagelet) and select the drop down.
- Opt-Dflt: Show the pagelet by default. Allow users to choose to add/remove and move it via the Layout link on their home page.
- Optional: Do not show the pagelet by default. Allow users to choose to add/remove and move it via the Layout link on their home page.
- Req-Fix: Show the pagelet by default. Do not allow users to choose to add/remove it via Layout link on the home page: they can move it around.
- Required: Show the pagelet by default. Do not allow users to choose to add/remove nor move it on the Layout link on the home page.
- Select the option that makes the most sense for you to use.
- Select Tab Layout and move the pagelet we you would like to default it to. (If you choose Req-Fix the system will ensure it stays among the top left of other required-fixed pagelets).
- Save
Free Text Data Source Examples:
The process above, give or take is similar for other pagelets. When you arrive at the data source and select "Free Text", here are some options to post in the Free Text box:
Iframe:
Essentially cuts a hole in your portal to allow other content to be exposed. It would be very effective to implement SAML authentication, thus allowing you to link to other sites already authenticated. That is in our future todo list of projects.
<iframe scrolling="auto" frameborder="0" width="100%" height="1600" src="https://mcmaster.ca/mosaic/student-guide/student5.html">No iframe support</iframe>
*it is important to use HTTPS to prevent security errors in browsers (referencing unsecured content on a secured session)
Youtube Video:
There are some tricks to having a youtube video appear properly: wrapping the div tag around it will force the video to change size with the window size.
<div style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;" >
<iframe frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/0l--Xxxxxx0?rel=0&version=3&autohide=1&showinfo=0&">no iframe support</iframe>
</div>
Fluid Image:
You can have a banner pagelet (in step 6 of the Pagelet Wizard, under advanced options you can set a pagelet as a banner one, and it will span across the entire 3 columns.)
You can also have it adjust fluidly to the size of your window as follows:
<img src ="/psc/drepuat/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_IMAGE?ID=CUST_BANNER"
style='width: 100%;border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;'/>
This uses an iscript to return the image you need. The image is stored in the database (you can upload images via: Main Menu -> PeopleTools -> Portal -> Branding -> Branding Objects. Select the imge tab, and upload a JPEG or GIF image. Once saved, you can reference it using the iscript, and it will appear as a pagelet.
I hope you found this article useful: sound off in the comments if you have any feedback. Happy Pageleting!
