Tuesday May 13, 2014

How to: Create a Custom Component to build a new Content Server page and modify the System Menu

The Oracle Content Server provides a framework to create and/or modify functionality through components. Almost everything within the Content Server can be customized using components right from the user interfaces like the checkin screens, to the core content server functionality (involves Java programming).

The best way to create and modify components is to use the Component Wizard utility which is shipped along with the content server. The Component Wizard provides all the tools and resources required to create components as well as bundle them for deployment to different content servers. You may also use Mozilla Firefox with the Web Developer extension, for creating/modifying user interfaces as it is a wonderful tool to check your JavaScripts and CSS. Although, components can be created without the Wizard, I would highly recommend it as it makes the life of the developer easy.

In this post, I will demonstrate how to add a new Navigation Menu item to the content server. The new menu item will display a new content server page that will execute a service to run a query to fetch the list of content types available within the Content Server. After creating and installing the custom component, the Content Server will show additional menus for the new page created (as shown in the screenshot below).


Create a Resource - HTML Include/String to add the new Menu Item

  1. Start the Component Wizard. On the Component List dialog, click on the Add... button.

  2. Name the new component as SampleComponent01 and keep the rest of the values as is.

  3. Click Ok to create the component and open it up in the Component Wizard.
  4. Add a new resource to add the new menu item. Under the Resource Definition tab, click on the Add... button.
  5. In the Add resource dialog, select the Resource - HTML Include/String Type. Accept the defaults for all the other fields.

  6. Click Next.
  7. In the Add HTML Resource Include/String dialog, create a Data Include. This is the new way to edit navigation items in 11g. Please note that prior to 11g, the NavBuilder JavaScript API was used to tweak the navigation items which is now deprecated in 11g. The new method takes advantage of a new data table construct in 11g Idoc Script called Dynamic Data Tables. These allow you to create tables of data in Idoc Script and dynamically change them as opposed to the static table definitions. This is useful for data that changes frequently and may be user specific like the navigation menu.
  8. Select the Data Include checkbox.
  9. Click Finish.
  10. This will create the resource file and will open it up in the Text Editor for editing.
  11. Enter the following code and save the file. The file will look like the image below. Alternatively, you can also use the wizard to create these data includes. The section on the right hand side allows you to create these includes. I prefer the Text Editor method as it is faster.
  12. To view the results, enable the component and restart the Content Server. Go to Options -> Enable and restart the Content Server.
  13. Log in to the Content Server to view the changes.

Create a Query to fetch the list of Content Types

  1. Return to the Component Wizard.
  2. Under the Resource Definition tab, click on the Add... button.
  3. In the Add resource dialog, select the Query Type. Accept the defaults for all the other fields.
  4. Click Next.
  5. In the Add Query Table Information click Next.
  6. In the Add Query dialog, enter the Name and the Query. Here you can also specify parameters for the query just like you would create a PreparedStatement in Java. The query should have "?" for the parameters. Specify the parameters in the Parameters section below. The sequence of the parameters is defined by the order in the Parameters list.
  7. Click Finish.
  8. You can add more queries to the file by directly editing the file or using the wizard options on the right hand side.

Create a Template to display the Resultset

  1. In the Component Wizard, create a template. A template is nothing but a page that will display the final results of a service call. We will create the template before we create the service.
  2. Before starting with the template, we need to layout the page. What we are trying to do here is display the content types as a table. Since we will be executing a query, we need a resultset to loop through the results. Let us say that the resultset name is SC01DOCTYPES for now.
  3. Under the Resource Definition tab, click on the Add... button.
  4. In the Add resource dialog, select the Template Type. Accept the defaults for all the other fields.
  5. In the Add Template Table Information dialog, keep the default details as is and click Next.

  6. In the Add IntradocTemplate dialog, enter the details as given below:
  7. Click Finish.
  8. Click on the Launch Editor... button on the right hand side to open up the newly created template and make the changes shown below.
  9. Save the File and close the external editor. Note that we are looping through the resultset name that we had decided earlier.

Create a Service to execute the query and populate the Resultset

  1. In the Component Wizard, create a new service. This service will execute the query created above and will redirect the results to the new template. The results of the query will be populated into a RESULTSET named above, that is SC01DOCTYPES.
  2. Under the Resource Definition tab, click on the Add... button.
  3. In the Add resource dialog, select the Service Type. Accept the defaults for all the other fields.
  4. In the Add Service Table Information dialog, keep the default data and click Next.
  5. In the Add Service dialog, enter the details as shown below.
  6. In the Actions section, click on the Add... button and fill in the details as shown below. Note that the parameter field has the Resultset name. This will allow the service to populate the query results into a resultset with this name.
  7. Click Ok and Ok again to create the Service.
  8. Restart the Content Server.

Use existing HTML includes to build a standard Content Server page

  1. Return to the Component Wizard and select the template from the Resource Definition list.
  2. Select the SC01_CONTENT_TYPES template from the right hand side box and click on the Launch editor... button at the bottom.
  3. This opens up the template in the text editor. Update the code to include the the following.
  4. What we have done here is include a set to predefined system includes that are used to build any content server page.
  5. Restart the content server.
  6. Log in to the Content Server to view the component in action. Just use the link, http://localhost:16200/cs/idcplg?IdcService=SC01_GET_DOCTYPES(make sure that you replace localhost:16200 with the hostname and port of your instance) and view the page to see the results.
About

Welcome to the Oracle WebCenter Suite Consulting team blog. We'll use this site for sharing important product information, our experience as well as tips and tricks for the Oracle WebCenter Content, Portal and Sites products.

Contributors

Search

Archives
« March 2015
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    
       
Today