As told in the previous part, the Content Presenter is one of the most versatile components of WebCenter. You can't live without it. Especially if you are integrating content from UCM.
In the previous part we touched the surface of this powerful component. In this part I intend to go much further and explain all the inns and outs of the Content Presenter. I will show you the best practice for integrating content from UCM into WebCenter. Content in UCM can be stored as structured information. People who are familiar with Site Studio should know how to build those structures and use them in a region template.
This is exactly what we will be doing in this part of the tutorial but adapted to WebCenter. Some people might have seen that the Content Presenter can cope with region templates but this is not the best way to go.
Region templates are stateful in Site Studio because you integrate them into placeholders and can add parameters to the request. When using region templates in WebCenter you can't do this. This means that they are stateless. There is no way to pass any parameter to a region template from WebCenter. Instead, the Content Presenter allows us to build a content presenter in ADF. By doing so, we can use both the WebCenter and ADF context. We can also make use of all the rich components available in ADF.
Another advantage of this technique is that you can make use of the skinning in ADF while if you are using region templates, you also need to create the style in Site Studio meaning that you have layout on two different places which is not good.
So far the intro. Let's get on with it.
Let's start putting some real content onto our VIE portal. As you know from the first sections, VIE provides training. In order to present a list of trainings, we need to allow trainers to enter the information about their training. A training is a typical type of content that is structured. It has a title, description, prerequisites section and maybe an image about the product. We will build this structure in Site Studio and use this in our portal so trainings can specify the details in a structured way. After this, we will also build a template that lists all of the trainings and have a read more link which will bring the user to a page with all the information about the training.
This first part will be done in Site Studio. People who do not have site studio installed can download it from their UCM installation. Just log in with the administrator, go to My Content Presenter and click on My Downloads. Click on the Site Studio link and install it.
When you open Site Studio, it will ask for a connection. If you do not have a connection created to your local UCM we'll create one now.
Press the New button to open the New Connection popup:
Specify the server CGI URL. If you have installed UCM locally, the URL should be something like this: http://localhost:16200/cs/idcplg
Press connect in order to connect to the server. You will see a login screen from UCM to authenticate.
The Site Label dropdown list should be empty unless you have created sites before with Site Studio. We will create a new one to store all our VIE material so press New next to the Site Label dropdown list.
Specify viePortal for the Id and Vie Portal for the name:
if you get a message that the default document settings have not been set then you need to go to the Administration section in UCM and select Set default Project Document Information from the Site Studio folder. From this screen you need to specify what the default metadata for your project files are.
If all is done just press OK and Done to close the popup and select the Vie Portal site in Site Studio.
The way Site Studio works with structured data is by creating elements and regions. The elements are the building blocks of your regions. In our case, a training is a region which contains elements like title, description, prerequisites and image:
We first will create each element and then we will create the Training region and add each element to it.
Let's create the title for our training.
In Site Studio select Region Elements from the Site Assets list:
This shows a list of all the existing elements. We haven't created an element yet so it is empty.
Press the create new button (icon with the page) and select New, Plain Text Element Definition
As you can see, there are multiple types of elements that we can create. The ones we will be using are the WYSIWYG, Plain Text and Image element definition.
The first element that we will create is the title which is a plain text element. We don't want the trainers to put rich text in this field.
A window will open were we need to specify the metadata of the element. As you might notice, this is a regular checkin form from UCM. All of these definitions will be stored as content in UCM which means that you have versioning, security and so on.
Select System as the type and trainingTitle as the Title. Select Secure as the Security group. All other fields can be remain the default:
click the Assign Info to create the element. It should now appear in the list.
Now create the Description. Select WYSIWYG element when you create the element.
This is the metadata:
Create a WYSIWYG element for the prerequisites:
Create an Image element for the image:
When all these elements are created, your Element Definitions list should look similar:
The content ID's may be different from your system but the Title should be the same.
Now that all the elements are created, we can create our region definition.
In Site Studio select Region Definitions from the Site Assets.
Press the create new button and select Region Definition:
You also get a popup to specify the metadata for the region:
All the other meta fields can remain their defaults. Once assigned the information the region should appear in the list. Right click on it and select edit. This opens the popup that allows us to assign the elements. Press the Add button.
As you can see, here we specify the Content ID instead of allowing the auto number. This is because we will need to reference the definition from our template in WebCenter. Otherwise we would need to use the auto number as the reference which is not that readable.
Specify a name, label and select the element that we just created from the Element Definition ID.
As you can see, the dropdown shows the Content ID instead of the title. If you are not sure, just press the Search button and you see a list of all the element definitions. From there you can select it.
Add the other elements so the list should look something like this:
Close the window. Click yes when Site Studio asks to save the definition.
That's it. We now have our structured data so trainers can start creating their trainings.
The way WebCenter can handle these structured data is by building templates for the content presenter. These templates are regular fragments. This allow us to use the complete functionality from ADF and WebCenter to build templates. That's also one of the reasons why I recommend content presenter templates instead of region templates. Region templates are templates build in Site Studio which can also be consumed by the content presenter. The biggest disadvantage of region templates is that they are stateless in a WebCenter environment while content presenter templates are statefull which allow us to pass parameters and make it more dynamic.
Each template can display the content in a separate way. The beauty of these templates is that not every template should make use of all the content elements. For example, we will create 3 templates for the Vie Portal. The first one will be a template that displays a single training in a list. The second template will be the list itself that includes the first template. The last template will be the template that shows the complete information about the training. Only the last template will display the prerequisites and the image. Everything will be clear in a few moments.
The first template will be used to show a single item. When creating a template for the content presenter you have to decide up front if the template will display a single item or multiple items. This template will be used to display a single item.
First of all let's create the folder to store our content presenter templates.
Right click on the portalapp and select New from the context menu. Select General in the list on the left and Folder in the list on the right in the New Gallery.
Folder name should be contenttemplates:
Select JSF from the list on the left and JSF Page Fragment from the list on the right.
Name the file training-list-item.jsff and press OK:
Use following code for the template:
As you can see, this is quite straight forward. The most important part is the beginning:
This tells the template that it will be a single node template. The var represents the actual content that contains all the metadata of the content. That node contains a properyMap with all the metadata. This can be accessed by providing the name of the metadata field. In order to retreive the actual content of the data file from Site Studio we need to provide the name of the region definition and the field of the definition so node.propertyMap['RD_TRAINING:title'] will return the content of the title field from the RD_TRAINING region definition.
All the rest is just regular ADF code.
If we want to reference this template in another template or we want to make it available to the portal, we must turn this template into a portal resource. This can be done by right clicking on the training-list-item.jsff item in the application navigator and select Create Portal Resource
We need to specify a display name which will be used in the list of templates in the content presenter.
Another important parameter is the View ID. This value we specify in that parameter is the value we need to use to reference the template. So for this tempalte we specify trainingListItem:
Press OK to create the resource.
The second template we will create is the one that will be used to create the list of items. This is a very simple template that will iterate all the items and include the newly created template.
So, create another fragment and call it training-list.jsff:
Use following code for the template:
This code is also quite straight forward. In the beginning we tell the template that it will be multi node template by using:
By using an iterator we can loop all the nodes passed to the template by the content presenter. Referencing another template is done by using following code:
We pass the actual node to it and the view attribute should hold the value specified in the View ID attribute from the portal resource.
Also create a portal resource from that template and call it trainingList:
The last template will be the template that displays all the information about the training including the prerequisites and an image.
So create a new fragment in the contenttempaltes folder called training-item.jsff:
Use following code for the template:
This is pretty much the same as the first template but it includes some more elements from the region definition.
Also create a portal resource from that template and call it trainingItem:
Now that our templates are build we can add the content presenter to a page and configure it to use these templates and configure the query so it only will show the training data files.
In earlier sections we have added the courses.jspx page. On this page we will add the content presenter so open the courses.jspx.
Drag and drop the content presenter on the content facet and select Region from the context menu.
Specify following parameters to the taskflow
In the source code of the JSPX page add following code just above the region containing the taskflow:
Make modifications to the URL so it points to your UCM server. In my case UCM is installed on my local system and I have configured OHS so it used port 7777 instead of 16200.
This URL will point to the interface of Site Studio so it allows us to create a new data file. As you see from the URL, we pass the cpRegDef parameter which is the Content ID of the region definition. You can also add additional metadata fields to the URL if you want to preset them.
The complete source code of the courses.jspx should look something like this:
We are not ready to run the project yet... We still need to build the details page that shows a single item. The reason for this is that we cannot edit or create new items from within a list template. Therefore we need to create another page that uses a single node template instead of a list.
Right click on the pages folder and select New.
Create a new JSPX file and name it trainingDetail.jspx:
Drag a content presenter in the content facet and provide following parameters:
Now add the trainingDetail.jspx to the pages.xml and make sure the visible attribute is set to false because we don't want the page to appear in the navigation.
That's it. Now we can run the application and test our effort.
If the courses.jspx is not already added to your pages.xml and navigation model you can do this now. This is how the pages.xml and navigation model should look like:
Notice that the trainingDetail.jspx has not been added to the navigation model. We only have added this to the pages.xml so the page can be accessed by the users. There is no reason to show the detail page as an item in the navigation model.
So now run the application and login with the weblogic user and browse to the Courses page:
Because we currently don't have any trainings, we don't see anything. Click on the Create New link so we can finally create the training. If you get the login screen from UCM that's normal. The reason for this is because there is no single sign on configured between our application and UCM. For our tutorial this is not bad but once you are planning on using this in a production environment you should install OAM and configure SSO between UCM and WebCenter.
In the popup select New Contributor data file. In the next screen you need to specify the metadata of the file. Change the title to something meaningful like WebCenter training and put the file in the Vie Portal folder. Press Next and select Edit Content Item now. This will open the contribution mode in Site Studio:
Specify some value for all the elements and press the Save and Close button in the top right corner.
When you return to the portal and refresh the page it should look something like this:
If you wish, you can add more trainings to see the functionality of the list. When you press the read more link of an item you will be redirected to the item and it will show all the content:
As you can see, this template will also display the prerequisites as well as the image. This shows how flexible and versatile these templates are.
I know this is quite a large one and probably a difficult one. If there are some issues or sections that are not clear, please let me know by posting a comment. If I forgot something I can update the section.
Hope you guys like this section. It's a very usefull section that will be used in almost every project. Displaying content is very important and this section shows exactly how to do it in a dynamic way.