Designing Custom Publisher Portlets

Custom Portlet Development using Web Center Interaction Publisher How to Create a Custom Address Book Portlet Using Publisher Data Entry & Presentation Templates

Author: Danya D. Smith Revised: 22 April 2009

Table of Contents Table of Contents.............................................................. ............................2 Overview...................................................................... ...............................3 Portlet Infrastructure........................................................... ..........................3 Create the Content Server Sections............................. ....................................5 Create the “Categories” Selection List..............................................................6 Create the “Contact Sheet” Data Entry Template........................................... .....7 Create the “Portlet Index” Data Entry Template.................................................9 Create the Contact Sheet Presentation Template HTML Code..............................11 Presentation Template Sample Code........................................ ....................13 Create Your First Content Item.............................................. ........................17 HTML Preview in Authoring Tool.................................... ..............................20 HTML/JavaScript Output in Browser................................................. ............21 Framework Sample Code............................................ ...............................21 Convert HTML to Portlet Code.................................................................... ....26 Remove HTML, HEAD and BODY Tags.......................................................... .26 Ensure Unique Object Names & IDs............................................. ................26 Example: Append a PCS ID Tag to the Form Name and ID..............................26 Example: HTML Output........................................................................ ......26 Portlet Sample Code with PCS Tags.............................................................27 Create Unique DIVs and Alter JavaScript............................................ .............33 Create Index Presentation Template............................................ ...................38 Create Index Content Item........................................... ................................40 Dynamically Generate Select Tag Options................................................ ........42 Revised Code Snippet....................................................................... .........44 “View Source” Output.................................................................... ...........44 Dynamically Generate DIV Elements.............................................................45 Revised Code Snippet....................................................................... .........45 “View Source” Output....................................................................... .........46 Portlet Preview.................................................................... .....................47 Dynamically Generate Table Rows.............................................. ....................49 Revised Code Snippet....................................................................... .........49 “View Source” Output....................................................................... .........50 Portlet Preview.................................................................... .....................51 Remove Framework Element Color-Coding......................................................53 Final Presentation Template Source Code.....................................................53 Create Content Server Portlet.................................................................... ....56 Publish Index When New Content Items are Published......................................58 Credits and Disclaimers............................................................. ...................59

Danya D. Smith

Content Server Portlet Development Page 2 of 59

Overview This Content Server portlet allows community owners to view and manage categorized contact lists. The portlet contains an action bar with a categories dropdown list. Below the action bar, there is a summary list of contacts that belong to the category in focus. The contact icon appears as a hyperlink. On click, the hyperlink opens the full-text content item. New contacts can be added to the portlet using the appropriate data entry template.

The portlet was written using Content Server data entry and presentation templates. Contact categories are managed using a Content Server selection list. The Presentation Templates were written using XHTML 1.0 Transitional syntax, PCS tags and custom JavaScript.

Portlet Infrastructure The following Content Server sections (folders), templates, selection lists and content items are required: Content Server Sections Plumtree Address Book: This folder contains the “Index” presentation template, data entry template and content item. It also contains the Contacts subfolder. Contacts: This folder contains the “Contact Sheet” presentation template, data entry template and content items. It also contains the Categories selection list. Selection Lists Categories Selection List: This selection list contains the categories that end users will use to sort contacts within the portlet. Data Entry Templates

Danya D. Smith

Content Server Portlet Development Page 3 of 59

Contact Sheet Data Entry Template: This template lists the available fields for each Contact Sheet along with other properties (data type, required field status, etc.). Portlet “Index” Data Entry Template: This template exposes the Categories Selection List to the Content Administrator. The Administrator must highlight the categories that should be selectable in the portlet action bar drop-down list. Presentation Templates Contact Sheet Presentation Template: This template details the HTML and CSS styles that should be used to present a Contact Sheet content item to an end user. PCS tags are included within the HTML code to expose content item fields. Portlet “Index” Presentation Template: This template details the HTML, CSS styles and JavaScript that should be used to present the portlet to an end user. Content Items Portlet “Index”: The Portlet “Index” templates are used to create this content item. When the content item is created, published and associated with a Web Page portlet, it is displayed in a portlet window. Contact List Entries: A new content item is created when Community Owners use the Contact Sheet data entry template to add new contacts to the portlet. Each content item is stored in the Contacts subfolder.

Danya D. Smith

Content Server Portlet Development Page 4 of 59

Create the Content Server Sections In our development environment, we created a Content Section called “Proof-ofConcepts” for custom Content Server development and testing. Inside this top-level section, (or the section of your choice) create a sub-section called Plumtree Address Book:

Inside the Plumtree Address Book folder, create a sub-folder called Contacts:

The Plumtree Address Book folder and Contacts sub-folder will serve as containers for all the objects you need to create this portlet.

Danya D. Smith

Content Server Portlet Development Page 5 of 59

Create the “Categories” Selection List Navigate to the Contacts sub-folder and create a Selection List called Plumtree Contact Types:

Enter the Name of the Selection List and n number of Values:

Click Save.

Danya D. Smith

Content Server Portlet Development Page 6 of 59

Create the “Contact Sheet” Data Entry Template At the top of the Data Entry Template form, enter Plumtree Contact Sheet in the Name field, and enter the following data into the Instructions Rich Text field: Use this Data Entry template to add a new Address Book entry to the Plumtree Contacts portlet.

At the bottom of the form, you will see the following properties:

You will need to add the following properties: Property Name contactType contactTitle address1 address2 city state zip phone cell email

Danya D. Smith

Display Name Contact Type Title Address 1 Address 2 City State or Province Postal Code Telephone Cell Phone E-mail Address

Type Selection List Text Text Text Text Text Text Text Text Text

Required Yes No No No No No No Yes No Yes

Actions

Content Server Portlet Development Page 7 of 59

To add the contactType property, fill out the Configure Property form with the following data:

When all of the properties have been added, the Properties section of your Data Entry Template form should look like this:

Danya D. Smith

Content Server Portlet Development Page 8 of 59

Click the Save button at the top of the wizard, then click Close.

Create the “Portlet Index” Data Entry Template This Data Entry Template only requires one custom property. To create the types Property, fill out the Configure Property form with the following data:

Danya D. Smith

Content Server Portlet Development Page 9 of 59

Fill out the Data Entry Template with the following data:

Save and Close the Template.

Danya D. Smith

Content Server Portlet Development Page 10 of 59

Create the Contact Sheet Presentation Template HTML Code Data Entry Templates and Presentation Templates work together. The Data Entry template provides a list of all of the optional and required properties you can include in content items created from the template. The presentation template is typically mocked up in HTML using CSS and is used to create a presentation layer for the data as it will be viewed in the browser. The first step when creating a Presentation template is to mock up the presentation layer including sample data. This is the HTML Preview of our mock up:

Next, we remove the sample data and replace it with PCS tags. The PCS tags are used like variables in an application. To include the name Property from a specific Content Item (instead of the hard-coded text “Full Name” in the above example) we will need to place this PCS tag in our Presentation Template:

PCS Tags also provide the ability to add additional logic to the display of a Content Item. We only have three required properties in our Plumtree Contact Sheet Data Entry Template. If we wanted to hide the address1 property if it is empty, we could use the following code: Danya D. Smith

Content Server Portlet Development Page 11 of 59



Danya D. Smith

Content Server Portlet Development Page 12 of 59

Presentation Template Sample Code

Danya D. Smith

Content Server Portlet Development Page 14 of 59

Create the Contact Sheet Presentation Template Now that we have completed the HTML code for our Contact Sheet Presentation Template, we need to plug it into a Presentation Template and link the Presentation Template to the Data Entry Template. To do so, create a new Presentation Template:

1. Attach the Plumtree Contact Sheet Data Entry Template 2. Enter .html as the Published Document Extension 3. Paste the HTML Code created in the previous step into the multi-line Code Text Box Danya D. Smith

Content Server Portlet Development Page 15 of 59

4. Click the Validate button to make sure all of the PCS Tags were entered properly 5. Save and Close the Presentation Template

Danya D. Smith

Content Server Portlet Development Page 16 of 59

Create Your First Content Item Now that we have a Data Entry Template and Presentation Template completed for Plumtree Contacts, we can create the first entry for our address book. To do so, right-click on the Data Entry Template and select New Content Item…:

Fill out the Properties section with the Contact’s data, then Check In the new Content Item.

Danya D. Smith

Content Server Portlet Development Page 17 of 59

Danya D. Smith

Content Server Portlet Development Page 18 of 59

Click Preview to confirm that the Presentation Template will display this item properly when it is published:

Click Publish then Close the Content Item Editor. Now your Contacts folder should contain the following objects:

Danya D. Smith

Content Server Portlet Development Page 19 of 59

Create the Portlet Framework (HTML/JavaScript) In the preceding steps, we completed the infrastructure required to create our address book entries. Next, we need to create a Presentation Template for our Portlet. The framework of this Content Server portlet is a collection of nested tables. There are two wrapper tables (Portlet Border Wrapper Table and Portlet Content Table). The Portlet Content Table contains 1 + n tables—the Action Bar table and n DIV elements. The Tables are presented inside a form which displays a drop-down list of selectable options. When the page loads, inline style attributes on the all DIV elements are set to: style="display:none;" so they are hidden. The isChanged() JavaScript function is called when an end user changes the value of the Select element. This function works with a hidden form field (id=lastSelected) to determine which of the n DIV elements should be displayed on the page.

HTML Preview in Authoring Tool

Danya D. Smith

Content Server Portlet Development Page 20 of 59

HTML/JavaScript Output in Browser

Framework Sample Code Note: You can plug this sample code into an .html file then launch the file in a web browser to see it work. <style> body {font-family:Verdana;}

teal;">Item 1b teal;">Item 1b teal;">Item 1b teal;">Item 1b Content Server Portlet Development Page 22 of 59 <select name="conType" id="conType" onchange="isChanged()" class="formPullDownText"> Danya D. Smith Content Server Portlet Development Page 21 of 59 Category Category Category Category Category 1 2 3 4 5   Contact Person E-mail Address Telephone Mobile Phone   Item 1a Item 1a Item 1a Item 1a Danya D. Smith style="border:1px style="border:1px style="border:1px style="border:1px style="border:1px dotted dotted dotted dotted dotted teal;">  Contact Person E-mail Address Telephone Mobile Phone   Item 2a Item 2a Item 2a Item 2a   Item 2b Item 2b Item 2b Item 2b Danya D. Smith Content Server Portlet Development Page 23 of 59 Contact Person E-mail Address Telephone Mobile Phone   Item 3a Item 3a Item 3a Item 3a   Item 3b Item 3b Item 3b Item 3b Contact Person E-mail Address Telephone Mobile Phone   Item 4a Item 4a Item 4a Item 4a   Item 4b Item 4b Item 4b Item 4b Danya D. Smith Content Server Portlet Development Page 24 of 59 Contact Person E-mail Address Telephone Mobile Phone   Item 5a Item 5a Item 5a Item 5a   Item 5b Item 5b Item 5b Item 5b

 

<script language="JavaScript"> function isChanged() { var lastValue = document.frmPlumtreeContacts.lastSelected.value; var objDivToHide = document.getElementById(lastValue); objDivToHide.style.display = "none"; var element = document.frmPlumtreeContacts.conType; var optionValue = element.options[element.selectedIndex].value; document.frmPlumtreeContacts.lastSelected.value = optionValue; var objDivToShow = document.getElementById(optionValue); objDivToShow.style.display = "block"; }

Content Server Portlet Development Page 25 of 59

Convert HTML to Portlet Code First we will explain the steps required to change our HTML Framework Sample Code into Portlet Code:

Remove HTML, HEAD and BODY Tags Now that we have a working example of what the Index Presentation Template should output to the Portlet, we need to remove some of the HTML elements (including , , and tags). Instead, we will enclose this portlet code in a