Oracle Webcenter Sites 11G For Developers: Activity Guide

Oracle Internal & Oracle Academy Use Only
Oracle WebCenter Sites 11g for

Developers
Activity Guide
D78300GC20
Edition 2.0
January 2014
D84337
Copyright © 2014, Oracle and/or its affiliates. All rights reserved.
Disclaimer
This document contains proprietary information and is protected by copyright and other intellectual property laws. You may copy and
print this document solely for your own use in an Oracle training course. The document may not be modified or altered in any way.
Except where your use constitutes "fair use" under copyright law, you may not use, share, download, upload, copy, print, display,
perform, reproduce, publish, license, post, transmit, or distribute this document in whole or in part without the express authorization
of Oracle.
The information contained in this document is subject to change without notice. If you find any problems in the document, please
report them in writing to: Oracle University, 500 Oracle Parkway, Redwood Shores, California 94065 USA. This document is not
warranted to be error-free.
Restricted Rights Notice
If this documentation is delivered to the United States Government or anyone using the documentation on behalf of the United
States Government, the following notice is applicable:
U.S. GOVERNMENT RIGHTS

The U.S. Government’s rights to use, modify, reproduce, release, perform, display, or disclose these training materials are restricted

by the terms of the applicable Oracle license agreement and/or the applicable U.S. Government contract.
Trademark Notice
Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective
owners.
Author
Jenny Wongtangswad
Technical Contributors and Reviewers

Deirdre Duffy, Upsana Dewangan, Saikat Chauduri
This book was published using: Oracle Tutor

Table of Contents
Practices for Lesson 1: Course Introduction.................................................................................................1-1
Practices for Lesson 1....................................................................................................................................1-2
Practices for Lesson 2: Introduction to Oracle WebCenter Sites 11g .........................................................2-1
Practices for Lesson 3: Oracle WebCenter Sites 11g: User Interfaces .......................................................3-1
Case Study: Course Implementation: Design Document .............................................................................4-1
Case Study: AviSports Store Design Document ............................................................................................4-2
Practices for Lesson 5: Creating and Configuring a New Content Management Site ...............................5-1
Practices for Lesson 5: Overview ...................................................................................................................5-2
Practice 5-1: Creating a CM Site in WebCenter Sites ....................................................................................5-3

Practice 5-2: Creating Users in the WEM Admin Interface .............................................................................5-8
Practice 5-3: Creating and Assigning Roles in the WEM Admin Interface .....................................................5-10
Practices for Lesson 6: Building the Content Model ....................................................................................6-1
Practice 6-1: Creating the AviProduct Asset Family .......................................................................................6-3
Practice 6-2: Creating Product Assets ...........................................................................................................6-9
Practice 6-3: Sharing Assets Between CM Sites............................................................................................6-13
Practice 6-4: Creating Page Assets ...............................................................................................................6-16
Practice 6-5: Creating Asset Associations .....................................................................................................6-19
Practice 6-6: Creating a Named Association ..................................................................................................6-23
Practice 6-7: Creating a Recommendation Asset...........................................................................................6-25
Practices for Lesson 7: Administrating and Enhancing the Usability of your Content Management Site
...........................................................................................................................................................................7-1
Practice 7-1: Working With Tree Tabs ...........................................................................................................7-3
Practice 7-2: Configuring Start Menu Items ...................................................................................................7-7
Practice 7-3: Working With Attribute Editors ..................................................................................................7-9
Practice 7-4: Configuring WebRoot ................................................................................................................7-13
Practice 7-5: Configuring Auto-Generated URLs ...........................................................................................7-14
Practices for Lesson 8: Configuring Dynamic Publishing ...........................................................................8-1
Practice 8-1: Configuring a Dynamic Publish Destination ..............................................................................8-3
Practice 8-2: Configuring a Site for the Destination Server ............................................................................8-7
Practice 8-3: Approving and Publishing Content to the Destination Server ....................................................8-10
Practices for Lesson 9: Advanced Topics: Asset Data Modeling ................................................................9-1
Practice 9-1: Creating a Basic Asset ..............................................................................................................9-3
Practice 9-2: Creating Filter Assets ................................................................................................................9-7
Practices for Lesson 10: Working with WebCenter Sites 11g Tools and Utilities ......................................10-1
Practices for Lesson 10: Overview .................................................................................................................10-2
Practice 10-1: Importing Assets Using WSDT ................................................................................................10-3
Practices for Lesson 11: Programming with WebCenter Sites 11g .............................................................11-1
Practice 11-1: Creating a Simple Template ....................................................................................................11-3
Oracle WebCenter Sites 11g for Developers Table of Contents

i
Practices for Lesson 12: Building Templates ................................................................................................12-1
Practice 12-1: Creating the Product Layout Template....................................................................................12-3
Practice 12-2: Rendering the Product Detail Page .........................................................................................12-7
Practice 12-3: Rendering a Product Asset in Summary Form ........................................................................12-9
Practice 12-4: Building Links ..........................................................................................................................12-11
Practice 12-5: Creating the Page Layout Template........................................................................................12-13
Practice 12-6: Rendering a Page Asset in Detail ...........................................................................................12-16
Practice 12-7: Rendering a Simple Article in Detail ........................................................................................12-18
Practice 12-8: Rendering a Recommendation List .........................................................................................12-19
Practice 12-9: Building the Navigation Bar .....................................................................................................12-20
Practice 12-10: Creating a Dynamic Search with Searchstates .....................................................................12-21
Practices for Lesson 13: Coding Templates for In-Context Editing ............................................................13-1

Practice 13-1: Coding for Content Editing in Web Mode ................................................................................13-3
Practice 13-2: Coding for Presentation Editing ..............................................................................................13-6
Practice 13-3: Coding for Content Creation in Web Mode .............................................................................13-10
Practices for Lesson 14: Caching...................................................................................................................14-1
Oracle WebCenter Sites 11g for Developers Table of Contents

ii
Oracle Middleware Learning Stream
A New Innovative Continuous Learning Solution

Ideal for supplementing what you learned in the classroom
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. 1

Oracle Middleware Learning Stream
Keep Your Skills Current through Continuous Learning

Expert Delivered
Hundreds of instructional videos delivered by Oracle
subject matter experts
Training Across Fusion Middleware

For professionals of all experience levels interested in
staying up-to-date
Continuously Refreshed Content

Covers product overviews through performance tips for
the broad range of Fusion Middleware products
Request Topics that Interest You
Sample Content Available for Viewing

NOW!
education.oracle.com/streams/middleware
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. 2

Practices for Lesson 1:
Course Introduction
Chapter 1
Practices for Lesson 1: Course Introduction

Chapter 1 - Page 1
Practices for Lesson 1
There are no practices for this Lesson.
Practices for Lesson 1: Course Introduction

Chapter 1 - Page 2
Introduction to Oracle
WebCenter Sites 11g
Chapter 2
Practices for Lesson 2: Introduction to Oracle WebCenter Sites 11g

Chapter 2 - Page 1
Practices for Lesson 2: Introduction to Oracle WebCenter Sites 11g

Chapter 2 - Page 2
Oracle WebCenter Sites 11g:
User Interfaces
Chapter 3
Practices for Lesson 3: Oracle WebCenter Sites 11g: User Interfaces

Chapter 3 - Page 1
Practices for Lesson 3: Oracle WebCenter Sites 11g: User Interfaces

Chapter 3 - Page 2
Case Study: Course
Implementation: Design
Document
Chapter 4
Case Study: Course Implementation: Design Document

Chapter 4 - Page 1
Case Study: AviSports Store Design Document
Objectives
At the end of this case study, you should be able to:
• Explain the purpose of this design document
• Describe the approach to the project implementation
• Identify the different asset types required for the implementation
• List and describe the different templates and elements required for the implementation
Introduction
The purpose of this document is to detail the technical design for the AviSports Store website.
This document outlines the solution architecture for the overall implementation from the content
management site to delivery of the website.

This document will continue to be a living reference guide, periodically updated to reflect any
changes in the design.
Overview
AviSports currently has a website geared toward sports enthusiasts and hosts a number of
informative articles and news articles across a variety of different types of sports.

Chapter 4 - Page 2
The AviSports Marketing team is looking to expand their business by introducing a retail arm,
the AviSports Store. This design document outlines the implementation design for this new
project. The general idea is not to veer too far from the parent site’s look and feel. The image
below is a mock-up of the AviSports Store homepage:

For more information on the AviSports Store website and its proposed mock-ups, see the
section titled “The AviSports Store Website.”
Project Participants
Name Project Role Contact Information
Taylor Solutions Architect taylor@avisports.com
<insert your name here> Lead Developer <yourname>@avisports.com
Florence Product Manager flo@avisports.com
Hayden Project Manager hayden@avisports.com

Chapter 4 - Page 3
Technology Primer
Keyword Meaning
Asset The items that you manage in WebCenter Sites are called assets. Assets are
based on one of two models: basic or flex. All assets can be divided into two
loosely defined categories: Content assets are items that visitors read and
examine on your site. Design assets are items that organize and format the
content assets. The assets available to a site depend on the content
applications and sample sites that are installed. As a general rule, the
applications deliver design assets, and the sample sites deliver content assets.
Attribute Content Attribute defines the properties of a WebCenter Sites asset.
Site The concept of grouping assets by a site within the CMS allows for dividing a
complex task of managing a large set of assets into smaller groups. The assets
within a group are distinguished by the nature of assigned roles and personnel
belonging to the site. A site within the CMS usually has no direct one to one
relationships with the published sites that are viewed by the internet visitors.

The concept of site within the CMS is limited completely to the logically
grouping of assets based on some pre-defined criteria. It is common to share
assets across multiple sites. The sites within the CMS are limited to managing
the content (data) and the segregation of content into multiple sites is not
related to the website design (presentation).
Page Page stores references to other assets, organizing them according to the site
design. You associate the content that renders the webpage with the Page
asset
Role In WebCenter Sites, responsibilities are called roles, people are called users,
and everyone has a user name that they use to log in and identify themselves
with.
ACL This stands for Access Control Lists. ACLs are assigned for three purposes:
• To enable a user
• To restrict access to a table
• To restrict access to pages in a site
Publish Assets that are approved for publishing are marked as such in the database,
waiting a publish event. That event can be triggered at any time from the
Publish Console, or it can be an event scheduled to occur at a specific calendar
date and time. In either case, publishing happens in background, that is, the
WebCenter Sites interface remains available during a publish event. When you
publish, WebCenter Sites either creates static HTML files on a local or
networked disk, or mirrors the assets by sending them to another server that is
also running WebCenter Sites. The way you publish assets depends on your
organization and the publishing methods it uses.
Business user, Creates the content to be displayed on the online site
Content user, or
Content Contributor
Visitor, Site User, or A visitor to one or more of the sites
Site Visitor
User Any Person who accesses the WebCenter Sites User Interface (Admin or
Contributor). For example, any “Internal” User who is accessing WebCenter Sites
Admin or Contributor UI in the DEV, QA ,Test or Prod Environment

Chapter 4 - Page 4
The AviSports Store Website
This section documents the expected look and feel of the AviSports Store website. There are
three distinct pages on the website: Landing Pages, Product Detail Pages, and Article Pages.
Each of the mock-ups appears below and includes detail on major components for each display.
Landing Pages
Landing Pages are represented by Page assets in WebCenter Sites and make up the links in
the main navigation. There will be three landing pages: Home, Baseball, and Winter Sports to
start with. The image below shows the typical layout for a Landing Page.
Main Navigation

Page Banner
Page Description
Featured Products
Footer

Chapter 4 - Page 5
Product Pages
Products have to be displayed in two distinct ways according to the mock-ups. The first way is in
full detail, where the product asset’s attributes are all rendered on a single page. The product
attributes include ProductName, ProductNumber, ProductPrice, ProductImage, and
ProductInformation. For further details about the Product asset type, see the section titled
“Asset Types.”
Main Navigation
Side Navigation
Product Detail

Footer
The second way a product is rendered is in summary format. Product summaries are rendered
in Landing Pages as “Featured Products.” Each summary contains a link that when clicked,
brings visitors to the product’s detail page.

Chapter 4 - Page 6
Article Pages
A Simple Article asset type will also be introduced for informational pages such as the About Us,
Return Policy, and Contact Us pages. Ideally, content contributors should be able to edit article
content within the context of the full rendered website using WebCenter Sites’ Web Mode
editing features. The following is an example of how the article pages should be rendered.
Main Navigation
Side Navigation

Article Detail
Footer
Navigational Components
The AviSports Store website requires three navigational components: Main Navigation, Footer,
and Side Navigation (Product and Article Detail pages only).
Main Navigation
Side Navigation
Footer

Chapter 4 - Page 7
The Main Navigation and Footer components will have links to Page assets based off of the
nodes in the Site Plan/Site Tree in the user interfaces.
The Side Navigation will be based off of the Product Catalog tree where Baseball and Winter
Sports are product category parents and will each have a list of links for their respective children
underneath.
Asset Types
The AviSports Store is an online retail site where customers will be able to browse a selection of
products for various sports. The following documents the asset types needed for this
implementation:
Asset Type Attributes Attribute Type Attribute Editor
Product ProductName string
ProductNumber string

ProductImage asset (Image)
ProductInformation text CKEditor
ProductPrice money
ProductCategory CategoryName string

CategoryType string
Landing Page PageBanner* blob

PageTitle* string
PageDescription* text CKEditor
FeaturedProducts asset (Product)
Article Page PageTitle* string

PageDescription text
Article title* string

Body text
Author string
Image imageFile blob

Caption string
alternateText string
Width int
Height int
Note:
• The Image asset type will be shared from the AviSports site.
• The AviSports Store site will also make use of core WebCenter Sites asset types, such as
Recommendations, Attribute Editors, Templates, CSElements, and SiteEntry assets.

Chapter 4 - Page 8
Template Design
The following table lists the templates and elements to be created for the AviSports Store
implementation:
Template/Element Name For Asset Type Template/CSElement
Layout Product Typed Template
Detail Product Typed Template
Summary Product Typed Template
Link - CSElement
Layout Page Typed Template
Navbar - CSElement
Sidenav - CSElement
Footer - CSElement

User Interface Requirements
The AviSports Store content management site will make use of the Web Mode content
contribution features of WebCenter Sites 11g’s Contributor interface. Functional requirements
are as follows:
• Content contributors will be able to edit content on a Product asset within an editable
preview of the webpage in Web Mode.
• Content contributors will be able to change layout templates for Page assets.
• Content contributors will be able to change layout templates for pagelets on a Page
asset.
• Content contributors will be able to author articles through Web Mode.
Business Requirements
Users and Roles
Roles are used to manage access to content management sites and their components. The
assignment of roles to users and interface functions on a given content management site
determines whether the interface functions are enabled for users or hidden from them. If the
user’s roles match the roles that are assigned to the interface functions, the functions are
enabled for the other. Otherwise they are hidden.
We have two main types of users for AviSports Store. They are administrators and contributors:
Contributors:
• florence, ProductManager
Administrators:
• fwadmin, GeneralAdmin
Developers and site administrators must make sure that the following interface functions are
considered when applying roles:
• start menu items
• tree tabs

Chapter 4 - Page 9
Publishing
The AviSports Store site will use RealTime publishing to push content to the delivery
environment. Content contributors will be able to approve content to the Dynamic Publish
destination with publishes executed periodically.

Chapter 4 - Page 10
Creating and Configuring a
New Content Management
Site
Chapter 5
Practices for Lesson 5: Creating and Configuring a New Content Management Site
Chapter 5 - Page 1
Practices for Lesson 5: Overview
Practices Overview
In these practices, you will start your WebCenter Sites project by creating a new content
management site, creating new roles, and assigning those roles to new users. Completing the
practices in this lesson will also give you an overview of the WEM Admin user interface.
Chapter 5 - Page 2
Practice 5-1: Creating a CM Site in WebCenter Sites
Overview
In this practice, you will:
• Create a new Content Management Site in the WEM UI
• Manage users and applications for your newly created CM site
• Explain what happens when a new CM Site is created
• Explain what components are not created when a CM Site is created
Assumptions
• You have located the Start Developer JSK icon on your desktop
Tasks

1. Start the WebCenter Sites Jumpstart Kit (JSK).
a. Locate the Start Developer JSK.bat icon on your desktop.
b. Double-click the icon to start the JSK.
c. In the JSK window, click Start. This action will start the Tomcat application server and
the WebCenter Sites application.
d. After the JSK window’s status bar displays, “Started Application Server,” you can log in
to the web-based interface.
2. Launch the web-based interface. Log in to the AdminSite.
a. In the JSK window, navigate to Launch > Contributor UI.
b. Log in as the fwadmin user (password: xceladmin). You will then be asked to select
a Site and select an App to log in to:
Chapter 5 - Page 3
c. From the “Site” drop-down menu, select AdminSite.

d. For “Select App,” select WEM Admin.
This will bring you to the WEM Admin interface.
Chapter 5 - Page 4
3. Add a new CM site:
a. Click Add Site. You will be brought to the “Add Site” screen:

b. For “Name,” enter avisports_store.
c. For “Description,” enter AviSports Store.
d. Click Save and Close. You will be brought back to the Sites page, where the Sites list
will be updated with the newly created AviSports Store site:
4. Next, assign access to the AviSports Store CM Site for the fwadmin user:
a. Right-click avisports_store. A shortcut menu should appear similar to the following:
b. From the shortcut menu, select Manage Site Users. You will be brought to the
“Manage Site Users” page.
Chapter 5 - Page 5
c. Click Assign Users. You will then be brought to the “Select Users for Site” screen.
d. From the list of available users, select fwadmin, and click the right arrow to move your
selection to the “Selected” list.

e. Click Continue. You will then be brought to the “Assign Roles to User” screen.
f. From the list of available Roles, select the following and click the right arrow button to
move your selection to the “Selected” list:
1) AdvancedUser
2) Designer
3) GeneralAdmin
4) MobileSitesDeveloper
5) SiteAdmin
6) SitesUser
7) WorkflowAdmin
Chapter 5 - Page 6
g. Click Save and Close. You will then be brought back to the Manage Site Users page,
updated to reflect the fwadmin user as a user of your AviSports Store Site:
Chapter 5 - Page 7
Practice 5-2: Creating Users in the WEM Admin Interface
Overview
• Create new users for the WebCenter Sites application
• Assign ACLs to users in the WEM Admin interface
Assumptions
• Your jumpstart kit is up and running.
• You have completed Practice 5-1.
• You are logged in to the WEM Admin interface as the fwadmin user.
Tasks

1. Add a new user to the avisports_store site.
a. From the menu bar, select Users. This will bring you to the “Users” page.
b. Click Add User. You will then be brought to the Add User screen.
c. Complete the form as follows:
1) For “Name,” enter Florence.
2) For “ACLs,” select the following from the available list of ACLs and click the right
arrow button to move your selection over to the “Selected” list:
a) Browser
b) ElementReader
c) PageReader
d) UserReader
e) xceleditor
3) For “New Password,” enter password.
4) For “Confirm Password,” re-enter password.
Chapter 5 - Page 8
d. Click Save and Close. You will then be returned to the Users page, updated to reflect
your new user. (You may need to configure the screen to show more than five users
per page.)

2. Notice that Florence is not currently assigned to a CM site. In the next practice, you will
create new Sites roles for your AviSports Store Site and assign Florence with one of those
roles so she can access the CM site.
Note: If you were to log out of the system and try to log in as Florence at this time,
WebCenter Sites will not allow you to log in because Florence has not been given any rights
to access a CM site.
Chapter 5 - Page 9
Practice 5-3: Creating and Assigning Roles in the WEM Admin
Interface
Overview
• Create new roles
• Grant access to the AviSports Store Site using roles
Assumptions
• You are logged in to the WEM Admin interface as the fwadmin user.
• You have completed Practices 5-1 and 5-2 successfully.

Tasks
1. Create a new role:
a. On the menu bar, click Roles. You will be brought to the Roles page.
b. Click Add User Role. This will open the Add Role screen:

1) For “Name,” enter ProductManager.
2) For “Description,” enter Product Manager.
d. Click Save and Close. You will then be returned to the Roles screen, where the list of
roles should be updated to reflect your new addition. (You may need to configure the
screen to display more than five Roles per page.)
2. Assign the ProductManager role to Florence for the AviSports Store Site:
a. From the menu bar, click Sites. You will be brought back to the Sites page.
b. Right-click avisports_store to access the shortcut menu.
c. From the shortcut menu, select Manage Site Users. You will then be brought to the
Manage Site Users page.
d. Click Assign Users. This will open the “Assign Users” screen.
Chapter 5 - Page 10
e. From the list of available users, select Florence, and click the right arrow button to
move Florence to the “Selected” list.

f. Click Continue. You will then be brought to the “Assign Roles to User” screen.
g. From the list of available roles, select ProductManager and SitesUser, and click the
right arrow button to move your selection to the “Selected” list.
Chapter 5 - Page 11
h. Click Save and Close. You will then be brought back to the Manage Site Users page
with the list of users updated to reflect Florence as a new user to the AviSports Store
site.

3. Log out of the interface.
Chapter 5 - Page 12
Building the Content Model
Chapter 6
Practices for Lesson 6: Building the Content Model

Chapter 6 - Page 1
Practices Overview
In these practices, you will start building your content management site. You will create the
foundation of the AviProduct asset family (attributes and definitions), set up the tree structure
(parent definitions), and create sample assets. You will also work with Page assets, which will
serve as the landing pages for your website.

Chapter 6 - Page 2
Practice 6-1: Creating the AviProduct Asset Family
Overview
• Use the Admin interface to create a new Asset Family for the AviSports Store Site
• Enable the Asset Family to use with the AviSports Store Site
Assumptions
• You have completed all previous practices successfully.
• You have logged out of the WEM Admin interface.
Tasks

1. Log in to the AviSports Store Site with the Admin interface:
a. Log in to WebCenter Sites as the fwadmin user (password: xceladmin). From the
Application bar, select avisports_store from the drop-down menu:
b. If you are prompted to select an App, select the Admin interface:
If you receive the “Java Update Needed” prompt, select Do not ask again until next
update is available and click Later.
Java plugins are deactivated by default. Click Activate All Plugins.

Chapter 6 - Page 3
c. When you are logged in to the Admin interface, you should see the following:

If you are prompted to run the TreeAppletLoader, select “Do not show this for apps
from the publisher and location above” and click Run.
2. Create a new Flex Family:
a. In the Admin interface, on the left Tree Panel, navigate to Admin > Flex Family
Maker, and double-click Add New Family.
b. In the first “Add New Flex Family”

form that you encounter in the
workspace, enter the internal asset
type names for each member of the
Flex Asset Family. Enter the following:
• Flex Attribute: AviProduct_A
• Flex Parent Definition:
AviProduct_PD
• Flex Definition: AviProduct_CD
• Flex Parent: AviProduct_P
• Flex Asset: AviProduct_C
• Flex Filter: AviProduct_F

Chapter 6 - Page 4
c. Click Continue.
d. On the next screen, you are expected to specify the external names for each member
of the family. (The external name signifies the name that is seen through the Admin
and Contributor interfaces.)
Assign the following names:
Flex Attribute: AviProduct_A
• Description: AviProduct Attribute
• Plural Form: AviProduct Attributes
Flex Parent Definition: AviProduct_PD
• Description: AviProduct Parent Definition
• Plural Form: AviProduct Parent Definitions
Flex Definition: AviProduct_CD

• Description: AviProduct Definition
• Plural Form: AviProduct Definitions
Flex Parent: AviProduct_P
• Description: AviProduct Parent
• Plural Form: AviProduct Parents
Flex Asset: AviProduct_C
• Description: AviProduct
• Plural Form: AviProducts
Flex Filter: AviProduct_F
• Description: AviProduct Filter
• Plural Form: AviProduct Filters
e. Click Add New Flex Family. This action will create all the necessary database tables
and register all asset elements for each member of the family.
You should now have a new Flex Asset Family, with a single child asset type,
AviProduct_C (Product).

Chapter 6 - Page 5
3. Next, in order to use this new Asset Family with our site, you must enable it:
a. In the Tree Panel, navigate to Admin > Sites > avisports_store > Asset Types and
double-click Enable. This will load the “Enable Asset Types: avisports_store” page in
your workspace.
b. Select the following asset types by selecting a check box next to their respective
names:
− AVIImage (Image)
− AdvCols (Recommendation)
− AttrTypes (Attribute Editor)
− AviProduct_A (AviProduct Attribute)
− AviProduct_C (AviProduct)
− AviProduct_CD (AviProduct Definition)
− AviProduct_F (AviProduct Filter)

− AviProduct_P (AviProduct Parent)
− AviProduct_PD (AviProduct Parent Definition)
− CSElement
− ContentAttribute
− Page
− Page Attribute
− Page Definition
− SiteEntry
− Template
c. Click Enable Asset Types. The screen that follows displays a list of the asset types
you have selected in the previous step and their corresponding Start Menu item
selections.
Start Menu items are shortcuts that enable you and your contributors to create and
search for assets in the user interfaces (UIs). Start Menu items can be auto-generated
at this point, or they can be manually created and modified later on.

Chapter 6 - Page 6
d. Select the check box labeled “Available Start Menus.” This action will bulk select all of
the available Start Menu items for each asset type you are enabling for the AviSports
Store Site.

e. Deselect the following:
• Image:
o Enable Image (for article) for this site?
• Recommendation:
o Enable Find Recommendation, FirstSiteII for this site?
o Enable New Recommendation, FirstSiteII for this site?
• Attribute Editor:
o Enable Find Attribute Editor, FirstSiteII for this site?
o Enable New Attribute Editor, FirstSiteII for this site?
• CSElement:
o Enable Find CSElement, FirstSiteII for this site?
• Page:
o Enable Page for this site?
• Page Attribute:
o Enable Find Page Attribute, FirstSiteII for this site?
o Enable New Page Attribute, FirstSiteII for this site?
• Page Definition:
o Enable Find Page Definition, FirstSiteII for this site?
o Enable New Page Definition, FirstSiteII for this site?
• SiteEntry:
o Enable Find SiteEntry, FirstSiteII for this site?
• Template:
o Enable Find Template, FirstSiteII for this site?
Why did you just make me do that? There are some redundant selections in the list.
Ideally, there should be one option selected for “New…” and one option selected for

Chapter 6 - Page 7
“Find…” or “Search…” for each asset type. Deselecting redundant options will keep
your start menus from being overloaded with too many links and options for the same
asset types.
Why does that happen and will this happen for my full install? It happens because
there are two sample sites on your jumpstart kit and both have dedicated Start Menu
items for core asset types used. The system tries to make suggestions to you so that
you do not have to spend time creating your own Start Menu items later. Although, you
may need to return to the Start Menu items to further configure roles and permissions.
f. Scroll to the bottom of the page and click Enable Asset Types. You will be brought to
the AviSports Store Site “Inspect” screen, where the section labeled “Enabled Asset
Types” should display a list of the asset types you have selected.
You are now ready to create assets. Oracle Internal & Oracle Academy Use Only

Chapter 6 - Page 8
Practice 6-2: Creating Product Assets
Overview
To create AviProduct assets, you need to have identified to WebCenter Sites the attributes of
our AviProduct asset type and how to construct the AviProduct asset creation form (using an
AviProduct Definition).
Product Name
Product Image
Product Number

Product Price
Product Information
Assumptions
• You have created the AviProduct Asset Family and enabled their asset types for the
AviSports Store.
• You are logged in to the Admin interface of the avisports_store CM site as the
fwadmin user.
Tasks
1. Create the Product attributes (AviProduct Attributes):
a. On the menu bar, click New. The Start Menu list will load in your workspace.
b. From the Start Menu, select New AviProduct Attribute. This will load the AviProduct
Attribute creation form in your workspace.

Chapter 6 - Page 9
1) For “Name,” enter ProductName.
2) For “Description,” enter Product Name.
3) For “Attribute Type,” select string from the drop-down menu.
4) For “Number of Values,” select single.
5) Click Save.
d. Repeat steps a through c to create additional AviProduct Attributes for the following:
Attribute Asset
Name Description Type Type Number of Values
ProductImage Product Image asset Image single

ProductInformation Product Information text n/a single
ProductNumber Product Number string n/a single

ProductPrice Product Price money n/a single
CategoryName Category Name string n/a multiple
CategoryType CategoryType string n/a multiple
2. After all of the attributes have been created, create the Product Definition:
a. From the menu bar, click New. This will load the Start Menu in your workspace again.
b. From the Start Menu, select New AviProduct Definition. This will load the “AviProduct
Definition” creation form in your workspace.
1) For “Name,” enter Product.
2) For “Attributes,” select the following and click Optional, indicating that the selected
attributes will be marked as optional attributes on your Product asset creation
form:
• ProductInformation (S)
• ProductImage (S)
• ProductNumber (S)
• ProductPrice (S)

Chapter 6 - Page 10
3) Click Save.
Checkpoint
You have created what you need to start adding sample content to your AviSports Store
Site. (You can check the History tab for a list of assets you have created or conduct
searches for them.) However, you will need to take an extra step to build a hierarchical
product tree by introducing Parent assets. In order to create Parent assets (Parent assets
will serve as Product Categories in your asset tree), you need to create a Parent Definition
(which will give you access to a Product Parent asset creation form). You can then specify
the Parent Definition in the Product Definition, ultimately allowing the contributor to select a
Product Category upon creation of their Product asset.
3. Create the Product Parent Definition:

a. From the menu bar, click New.

b. From the Start Menu, select New AviProduct Parent Definition.
1) For “Name,” enter ProductCategory.
2) For “Description,” enter Product Category.
3) For “Parent Select Style,” select Type Ahead.
4) Click Save.
4. Apply the Parent Definition to the Asset Definition:
1) From the menu bar, click Search.
2) In the search menu, select Find AviProduct Definition.
3) In the Search for: AviProduct Definition screen, click Search. The Product
definition will appear in your search results list.
d. Click Edit.
e. For “AviProduct Parent Definitions,” select ProductCategory and click Required
under “Multiple Value.”
f. Click Save.

Chapter 6 - Page 11
5. Create Parent assets (Product Category assets) in the Contributor interface:
a. In the Application bar, click the icon for the Contributor interface.
b. Create Product Category assets:

1) In the Contributor Interface, navigate to Content > New > New AviProduct
Parent:

2) In the Product Category asset form that loads, enter Baseball.
3) Click Save.
4) Close the Baseball category tab.
c. Repeat steps 1 through 4 above to create the category Winter Sports.
6. Create Product Assets:
a. On the menu bar, navigate to Content > New > New AviProduct.
b. To complete the form, refer to the AviProducts.txt found under
D:\Oracle\WebCenter\Sites\DeveloperTraining\Lab_Files\Practice6-
2. Remember to save your work.
c. Create product assets for the remaining descriptions in the text file.
Checkpoint
By now, you have successfully created a new Asset Family and sample Product assets for
your CM site. To verify that you have successfully created a set of Product assets, go to the
Search bar in the Contributor interface. Narrow your search to only AviProduct assets and
click the magnifying glass to execute the search. The search pane will load, listing the
assets that meet your search criteria.

Chapter 6 - Page 12
Practice 6-3: Sharing Assets Between CM Sites
Overview
If you intend on using WebCenter Sites to manage more than one content management site,
you will have the ability to share assets among those sites. Prerequisites for sharing assets
between CM sites are:
• The asset type(s) must be enabled for both CM sites.
• The user sharing assets must have sufficient privileges to both CM sites.
• The user sharing assets must have sufficient privileges to those assets on both CM
sites.
This practice will guide you through a set of steps to share content from the AviSports Site to
the AviSports Store Site.
Assumptions

• You are logged in to the Contributor interface for the AviSports Site as the fwadmin
user.
• The assets that you will share from the AviSports Site to the AviSports Store Site are
as follows:
Asset Name Location
Baseball Glove Content Tree > Media > Square Images
Jacket Content Tree > Media > Square Images
Ski Goggles Orange Content Tree > Media > Square Images
Sport Gloves Content Tree > Media > Square Images
Sunglasses Wayfarer Two Content Tree > Media > Square Images
Tasks
1. In the Contributor interface of the AviSports site, browse for the Image assets you want to
share from the AviSports site to the AviSports Store site:
a. In the Left Navigation panel of the Contributor interface, open the Content Tree.
b. Navigate to Media > Square Images.
c. Double-click the asset you want to share (refer to the table above for a list of images to
share). The asset inspect view will load in your workspace.

Chapter 6 - Page 13
2. Share the asset:
a. When you have the asset in Inspect View, in the menu bar, navigate to Content >
Share.

The Share Content window will open.
b. In the Share Content window, select avisports_store from the list of available sites to
share this asset to.
c. Click the right-arrow button to move the selected site to the “Selected” list.

Chapter 6 - Page 14
d. Click Save. You will then be brought back to the Inspect View for your asset and a
confirmation message will be displayed:
e. Close the asset’s tab.

f. Repeat the steps above to share the rest of the assets listed in the table above the
AviSports Store site.

3. Verify that the images have been shared to the AviSports Store site:
a. In the Application bar, switch to the avisports_store site.
b. If you are not brought to the Contributor interface, click the Contributor App icon in
the Application bar.
c. Use the search bar in the Contributor interface to conduct a search for images.
d. In your search results, verify that the images you have shared from the AviSports Site
are present in the avisports_store site.

Chapter 6 - Page 15
Practice 6-4: Creating Page Assets
Overview
The Page asset type is a general core asset type provided with WebCenter Sites out of the box.
With Page Attributes and Page Definitions, you can make the Page asset your own by
specifying custom attributes that will make the Page asset meet the exact needs of your
solution.
In this practice you will:
• Create Page Attributes and Page Definitions
• Create Page assets
• Place Page assets in the Site Tree
Assumptions

• You are logged in to the Admin interface for the AviSports Store Site.
Tasks
1. Create Page attributes.
a. In the Admin interface for the avisports_store site, click New. This will load the Start
Menu in your workspace.
b. From the Start Menu, select New Page Attribute. This will load the Page Attribute
asset creation form in your workspace.
1) For “Name,” enter PageTitle.
2) For “Description,” enter Page Title.
3) For “Attribute Type,” select string.
4) Click Save.
d. Repeat the steps above to create the attributes: PageDescription (text) and
PageBanner (blob).
e. Create another Page Attribute for FeaturedProducts with the following
specifications:
• Description: Featured Products
• Attribute Type: asset
• Asset Type: AviProduct
• Asset Subtypes: Product
• Number of Values: Multiple
2. Create the Page Definitions.
a. From the menu bar, click New. This will load the Start Menu in your workspace again.
b. From the Start Menu, select New Page Definition. The Page Definition asset creation
form will then load in your workspace.
1) For “Name,” enter Landing Page.

Chapter 6 - Page 16
2) For “Attributes,” select PageTitle (S), PageDescription (S), PageBanner (S), and
click Required to move the attributes to the “Selected” list.
3) Select FeaturedProducts (M) and click Optional to move the attribute to the
“Selected” list.
d. Click Save.
e. Create another Page Definition called Article Page with attributes PageTitle
(Required) and PageDescription (Optional).
f. Create a Page Definition called NavBar with no custom attributes.
3. Create the Page assets. You must switch to the Contributor interface to create Page
assets.
a. In the Contributor interface, from the menu bar, navigate to Content > New > New
Page. The “New Page” asset creation form will load in your workspace.
b. For “Name,” enter Store_Home.

c. For “Page Definition,” select Landing Page. The form should then advance on to the
next page. If not, click Continue.
d. Complete the form as follows:
1) For “Page Title,” enter Home.
2) For “Page Description,” enter Your source for sporting goods and
apparel!
3) For “Banner Image,” upload a banner image from the Lab Files folder.
4) Click Save.
5) Close the tab.
e. Repeat the steps to create two other Landing Page assets: Store_Baseball and
Store_WinterSports. Remember to save your assets after creating them. After
creating the Page assets, they will appear under “Unplaced Pages” in the Site Tree.
f. Create Article Page assets.
1) From the menu bar, navigate to Content > New > New Page. The “New Page”
asset creation form will load in your workspace.
2) For “Name,” enter Footer_AboutUs.
3) For “Page Definition,” select Article Page. The form should then advance on to
the next page. If not, click Continue.
4) Complete the form as follows:
a) For “Page Title,” enter About Us.
b) Click Save.
c) Close the tab.
5) Create two additional Article Page assets for Footer_ContactUs and
Footer_ReturnPolicy. Remember to save your assets after creating them.
After creating the Page assets, they will appear under “Unplaced Pages” in the
Site Tree.

Chapter 6 - Page 17
g. Create NavBar Page assets, called MainNavigation and Footer, respectively.
Neither NavBar Page asset will have any custom attributes defined. Remember to save
your assets after creating them. After creating the Page assets, they will appear under
“Unplaced Pages” in the Site Tree.

4. Place Pages in the Site Tree.
a. In the Navigation Pane of the Contributor interface, navigate to the Site Tree if it is not
already open.
b. To place a page under “Default,” simply drag the Page asset from Unplaced Pages to
Default.
c. Place your Page assets so that your Page asset structure looks similar to this:

Chapter 6 - Page 18
Practice 6-5: Creating Asset Associations
Overview
After reviewing the different types of asset relationships that you can create in WebCenter Sites,
you will create an asset association between the images you have shared from the AviSports
Site to the product assets you have created earlier in this practice. In an earlier practice, you
specified the ProductImage attribute as an attribute of type asset, and it is expecting to be
associated to an asset of type Image.
Similarly, you have also created a Page Attribute called FeaturedProducts for the Landing Page
asset type. You will search for product assets to associate to the Landing Page assets to
feature on their rendered pages.
• Use the Contributor interface to edit existing product assets and conduct searches for
Images to associate

• Associate Image assets to product assets by way of an attribute of type asset
• Associate product assets to Landing Page assets
Assumptions
• You are logged in to the Contributor interface for the AviSports Store site.
Tasks
1. In the Contributor interface for the AviSports Store Site, search for your product assets.
a. In the search bar, filter your search to AviProduct assets.
b. Click the magnifying glass icon to execute the search. It will return all AviProduct
assets to your search results.
c. Without clicking the asset’s name, CTRL+click each asset icon to select all
AviProducts. They will be highlighted in blue.
d. Click the Bookmark icon to bookmark the assets.

Chapter 6 - Page 19
e. Your bookmarked assets will appear in the Left Navigation pane under the My Work
tab.

2. Edit each product asset and assign an image to the Product Image attribute.
a. Double-click a product asset under Bookmarks to inspect it.
b. Click the pencil icon to open the asset’s Edit mode.
c. Search for an image to associate to your product asset.
1) Use the search bar to search for the image that corresponds to your product asset
or you can search for all images and select from a list of available images.
2) You can dock your search results to the right panel of the Contributor interface.

Chapter 6 - Page 20
d. When you have found the image asset you want to associate to your product asset,
click and drag the image to the “Drop Zone” of your product asset edit form:

e. After you have associated an image asset to your product asset, your form will look
similar to the following:
f. Save your changes and close the tab for your modified product asset.
g. Close the AviProduct tab when you are finished editing the asset.
h. Repeat these steps for each of your AviProduct assets in your Bookmarks list to assign
the appropriate Image assets for the ProductImage attribute.
3. Associate AviProduct assets to Landing Page assets (under Default > MainNavigation in
the Site Tree).

Chapter 6 - Page 21
a. Use the Site Tree to locate Landing Page assets: Store_Home, Store_Baseball, and
Store_WinterSports.
b. Edit each Landing Page asset and use the Search bar to find AviProduct assets to
feature (up to four) on each of the Landing Page’s rendered webpage.
c. Be sure to save your changes. Your Featured Products section will appears as follows
in the Inspect view:

Chapter 6 - Page 22
Practice 6-6: Creating a Named Association
Overview
Another type of asset relationship is a Named Association. A Named Association can be
configured in the Admin interface for a specific asset type. In this practice, you will:
• Use the Admin interface to configure a Named Association between an Article Page
asset and Recommendation asset type.
• Modify the “Associated Items” Named Association and add Article Page to its list of
subtypes.
Assumptions
• You are logged in to the Admin interface for the AviSports Store Site as the fwadmin

user.
• You have successfully completed all previous practices.
Tasks
1. On the Admin tab, navigate to Asset Types > Page > Asset Associations and double-
click Add New. The “Add New Association” form will load in your workspace.
2. Complete the form as follows:

a. For “Name,” enter relatedList.
b. For “Description,” enter Related List.
c. For “Child Asset,” select Recommendation.
d. For “Page Subtype,” select Article Page.

Chapter 6 - Page 23
e. Click Add New Association. Your Named Association’s Inspect view will look similar
to the following:

Your new Named Association should appear in the Tree Panel on the Admin tab under
Asset Types > Page > Asset Associations. You may need to refresh your tree
(Right-click within the tree and click Refresh All).
3. Back in the Admin tab, locate the AssociatedItems association. Double-click it.
4. Click Edit.
5. For Page Subtypes, add Article Page to the list of subtypes.
6. Click Save.

Chapter 6 - Page 24
Practice 6-7: Creating a Recommendation Asset
Overview
To create manageable lists of content, you can use the Recommendation asset type. You are
going to use the Recommendation asset type to create related list of products that will be
associated to the About Us Page asset by way of the Named Association you created in the
previous practice. In this practice, you will:
• Create a static list Recommendation asset
• Select assets to associate to the Recommendation asset
• Associate the Recommendation asset to the About Us Page asset
Assumptions

• You are logged in to the Contributor interface for the AviSports Store site as the
fwadmin user.
Tasks
1. In the Contributor interface, create a new Recommendation Asset.
a. In the menu bar, navigate to Content > New > Recommendation. This will bring you
to the New Recommendation asset creation form.
b. For “Name,” enter ProductList.
c. For “Description,” enter Suggestions for you…
d. Click Options.
e. On the Options screen, deselect all options. From the Pick Type menu that appears,
select AviProduct.

Chapter 6 - Page 25
f. Click Detail. Your screen should look similar to the following:

g. Search for products to add to your Recommendation. You can use the Search bar to
search for AviProducts. From the search results, drag your selections to the drop zone
for your Recommendation asset:
h. Click Save and close the ProductList tab.

2. Associate the ProductList Recommendation asset with the About Us Page asset.
a. In the Left Navigation pane of the Contributor interface, navigate to Site Tree > Default
> Footer > Footer_AboutUs.
b. Double-click Footer_AboutUs to open it in your workspace.
c. Click Edit.

Chapter 6 - Page 26
d. Use the search bar to find the ProductList Recommendation asset. You can dock the
search results if it is not already docked on the right of the interface:

e. Drag the ProductList Recommendation asset to the Related List drop zone.
f. Save your changes.
g. Close the tab.

Chapter 6 - Page 27

Chapter 6 - Page 28
Administrating and
Enhancing the Usability of
your Content Management
Site
Chapter 7
Chapter 7 - Page 1
Practices Overview
In these practices, you will learn how to administrate and enhance the usability of the user
interfaces for content contributors by configuring features like the tree tabs, start menu items,
and attribute editors. Ensuring the Contributor interface is user-friendly for content contributors
helps to gain user acceptance of the application by the end user community.
Chapter 7 - Page 2
Practice 7-1: Working With Tree Tabs
Overview
• Create tree tabs to organize content in the user interfaces
• Set permissions on the tree tabs to ensure that users with specific roles can see the
appropriate tree tabs
Assumptions
• You are logged in to the Admin interface for the AviSports Store Site as the fwadmin
user.

Tasks
1. Add a new Product Tree tab for the Admin interface and Product branch in the Content
Tree for the Contributor interface:
a. In the Admin interface’s Tree Panel, navigate to Admin > Tree. Double-click Tree to
load the list of Tree Tabs in your workspace.
b. At the bottom of the list, click Add New Tree Tab. This will bring you to the Add New
Tree Tab form. Complete the form as follows:
1) For “Title,” enter AviProducts.
2) From the “Sites” list, select avisports_store.
3) For “Required Roles,” select ProductManager and SiteAdmin.
4) For “Tab Contents,” select AviProduct Parent and AviProduct (in this exact
order).
5) Click Save. Your Inspect screen should look as follows:
2. Create a new Developer Tree Tab for the Admin interface that will contain all of the
structural and design assets created for the avisports_store site.
Chapter 7 - Page 3
a. On the Admin tab of the Admin interface, double-click the Tree node to load the list of
Tree Tabs in your workspace.
b. At the bottom of the screen, click Add New Tree Tab. Complete the form as follows:
1) For “Title,” enter Developer.
2) From the “Sites” list, select avisports_store.
3) For “Required Roles,” select Designer and SiteAdmin.
4) For “Tab Contents,” select the following:
• Attribute Editor
• CSElement
• SiteEntry
• Template
• Page Attribute

• Page Definition
• AviProduct Attribute
• AviProduct Parent Definition
• AviProduct Definition
• AviProduct Filter
5) Click Save. Your Inspect screen should then look as follows:
Chapter 7 - Page 4
3. Verify the creation of Tree Tabs and content branches in the Admin and Contributor
interfaces:
a. On the menu bar of the Admin interface, click the Left Arrow icon to toggle the Tree
Panel off.
b. Click the Left Arrow icon again to toggle the Tree Panel on. This action will refresh
your tree panel. You should see a Developer tab appear after you toggle the tree back
on.

c. From the Application bar, switch to the Contributor interface.
d. In the Left Navigation pane, click Content Tree. If you find that there are no branches
displayed in the Content Tree, try logging out of the interface and logging back in to
refresh your session. The fwadmin user should see:
e. Log out of the user interface.
Chapter 7 - Page 5
f. Log in as the user Florence (password: password). Ensure that Florence can also
access the avisports_store site as well as the AviProduct branch of the Content
tree. Florence should see:

g. Log out of the user interface.
Chapter 7 - Page 6
Practice 7-2: Configuring Start Menu Items
Overview
• Locate Start Menu items in the Admin Tree Tab
• Refine Start Menu items for your asset types
• Create Start Menu items that will enable content creation through the Contributor
Interface’s Web Mode
Assumptions
• You have previously logged in to the Contributor interface as Florence to see what items

appear in her Start Menu (menu bar > Content > New).
• You are now logged in to the Admin interface for the AviSports Store Site as the
fwadmin user to complete this practice.
Tasks
1. Locate the Start Menu Items for image assets.
a. In the Tree Panel of the Admin interface, navigate to Admin > Asset Types >
AVIImage > Start Menu.
2. Hide the Image Start Menu Item from Florence.
a. Under Start Menu, double-click the first Image item to open its Inspect view in your
workspace. In the Inspect view, verify that the “Type” attribute is “New.” If not, double-
click the other Image start menu item.
b. Click Edit.
c. In the “Sites” field, deselect avisports_store.
d. Click Save.
3. Create new Start Menu Items for Landing Page, Article Page, and NavBar for the
avisports_store site.
a. In the Tree Panel, navigate to Admin > Asset Types > Page > Start Menu and
double-click Add New. You will be brought to a new Start Menu form.
Chapter 7 - Page 7
b. For “Name,” enter Landing Page.
c. For “Asset Type,” leave the selection as Page.
d. For “Flex Definition,” select Landing Page. Click Continue if you are not automatically
forwarded to the next page.
e. For “Sites,” select avisports_store.
f. For “Roles,” select ProductManager.
g. Click Save.
h. Repeat the steps above for Article Page (Flex Definition: Article Page) and NavBar
(Flex Definition: NavBar).
4. Verify your Start Menu changes.
a. Log out from the system as the fwadmin user.
b. Log in to the Contributor interface as the user Florence (password: password).
c. On the menu bar, navigate to Content > New, and you should no longer see the option

for Image. Instead, you will see new options for Landing Page, Article Page, and
NavBar.
d. Log out of the Contributor interface.
Chapter 7 - Page 8
Practice 7-3: Working With Attribute Editors
Overview
• Select one of the standard attribute editors to use with the AviProduct asset type
• Apply the CKEditor attribute editor to AviProduct and Page attributes
• Configure the attribute editor for the purpose of enhancing the usability of the AviProduct
asset creation form
Assumptions
• You are logged in to the Admin interface for the avisports_store site as the fwadmin
user.

Tasks
1. Share the CKEditor attribute editor from the AviSports CM site to the AviSports Store CM
site.
a. In the Application bar, switch to the AviSports CM site.
b. Switch to the Admin interface if necessary.
c. In the Tree Panel, navigate to Dev > Attribute Editor and double-click
CKEditor500x300. This will load the CKEditor500x300 asset Inspect screen in your
workspace.
d. Click the Share icon.
e. On the Share Attribute Editor: CKEditor500x300 screen, for “Share to,” select the
avisports_store check box.
f. Click Save Changes.

g. In the Application bar, switch back to the avisports_store CM site.
2. Assign the CKEditor attribute editor to the ProductInformation attribute.
a. In the Tree Panel of the Admin interface for the avisports_store CM site, navigate to
Developer > AviProduct Attribute > ProductInformation.
b. Double-click ProductInformation to load its Inspect view in your workspace.
Chapter 7 - Page 9
c. Click Edit.
d. In the “AviProduct Attribute: ProductInformation” attribute edit form, for “Attribute

Editor,” select CKEditor500x300.
e. Click Save.

3. Assign the CKEditor attribute editor to the PageDescription attribute.
a. Navigate to Developer > Page Attribute > PageDescription.
b. Double-click PageDescription to load its Inspect view in your workspace.
c. Click Edit.
d. In the Page Attribute: PageDescription attribute edit form, for “Attribute Editor,” select
CKEditor500x300.
e. Click Save.
4. Verify your changes for the AviProduct asset and Page asset forms.
a. Log out of the Admin interface.
b. Log in to the Contributor interface as Florence (password: password).
c. In the Left Navigation Pane, navigate to Site Tree > Default > MainNavigation >
Store_Home.
d. Double-click Store_Home to open the Inspect view in your workspace.
e. Click Edit.
Chapter 7 - Page 10
f. Click inside the text area of the “PageDescription” field. Does the CKEditor Attribute
Editor load? It should look similar to the following:

g. Close the tab to cancel your changes.
h. In the Left Navigation pane, navigate to Content Tree > AviProducts > Baseball.
i. Double-click Baseball to browse its children. From the list, select Wayfarer Two
Sunglasses.
j. Click Edit.
Chapter 7 - Page 11
k. Click inside the text area of the “Product Information” field. Does the CKEditor Attribute
Editor load? It should look similar to the following:

l. Log out of the system.
Chapter 7 - Page 12
Practice 7-4: Configuring WebRoot
Overview
In this practice, you use the Admin interface to configure WebRoot for the AviSports Store site.
Assumptions
user.
Tasks
1. In the Admin tab, expand the WebRoots node and double-click Add New. The WebRoot

form opens in your workspace.
2. Complete the WebRoot form as follows:

a. For Host Name, enter store.
b. For Root URL, enter http://www.avisports.com
c. For Virtrual Root URL:
1) For Environment, enter dev.
2) For Root URL, enter http://dev.avisports.com/cs
d. For Sites, select avisports_store.
3. Click Save.
Chapter 7 - Page 13
Practice 7-5: Configuring Auto-Generated URLs
Overview
In this practice, you use the Admin interface to configure auto-generated vanity URLs for the
AviProduct asset type based on a set pattern.
Assumptions
user.
Tasks

1. In the Admin tab, navigate to Asset Types > AviProduct_C > URL Pattern and double-
click Add New.
2. Complete the URL Pattern Form as follows:

a. For Name, enter product.
b. For Pattern, enter product/${f:spaceToDash((name).toLowerCase())}
c. Evaluate the URL Pattern:
Chapter 7 - Page 14
1) For Asset, select any available asset in the list. Your evaluated pattern will appear
next to Evaluated Pattern.
3. Click Save.
Chapter 7 - Page 15
Chapter 7 - Page 16
Configuring Dynamic
Publishing
Chapter 8
Practices for Lesson 8: Configuring Dynamic Publishing

Chapter 8 - Page 1
Practices Overview
In these practices, you will learn how to configure a new dynamic publish destination, bulk
approve assets for publish, discover how the approval process works for a content contributor,
and execute a real-time publish to your target destination.

Chapter 8 - Page 2
Practice 8-1: Configuring a Dynamic Publish Destination
Overview
• Create and configure a destination for Real-time (Dynamic) Publishing
• Publish the avisports_store CM site from your training kit to a destination kit
• Explain how approval dependencies are calculated
Assumptions
• Verify that your source jumpstart kit (DeveloperTraining) is running on port 9080.
• Verify that your destination jumpstart kit (PubDestination) is running on port 9380.
• Verify that both jumpstart kits are up and running.
• You use Internet Explorer to log in to the PubDestination. (Configure default browser

under Configure > Select Browser in jumpstart kit window.)
• Configure Internet Explorer’s cache settings. In Internet Explorer, go to Tools >
Internet Options > General tab > Browsing History > Settings and for “Check for
newer versions of stored pages,” select Every time I visit the webpage.
• You have logged in to PubDestination in Internet Explorer to observe that the only site
on the destination kit is the AdminSite.
• You have completed all other previous exercises successfully.
• You are logged in to your source jumpstart kit (DeveloperTraining) as the fwadmin
user in Firefox.
Tasks
1. Add a new Publish Destination on the source jumpstart kit:
a. On the Admin tab, go to Publishing > Destinations and double-click on Add New.

Chapter 8 - Page 3
The Add New Destination form will load in your workspace.

b. Complete the form as follows:
− For “Name,” enter Dynamic Publish.
− For “Delivery Type,” select Real-time: Copy assets to remote dynamic server.
− For “Destination Address,” enter http://localhost:9380/cs/.
− For “Remote User,” enter fwadmin.
− For “Remote Password,” enter xceladmin.
− For “Sites,” select AviSports Store.
Note:
fwadmin is one of the default user accounts that ship with WebCenter Sites. It is highly
recommended that the password for this user account is changed upon installation and
configuration of the software.
c. Click Add New Destination. You are then brought to the Dynamic Publish Inspect
screen. Verify that the connection icon is green before proceeding to the next step.

Chapter 8 - Page 4
2. Initialize the CM site on the destination server.
a. On the Dynamic Publish Inspect screen, click Initialize Realtime Destination.

b. On the Initialize Mirror Destination screen, confirm that the site selected is AviSports
Store:

Chapter 8 - Page 5
c. Click Mirror.
This action will initialize a copy of the AviSports Store’s site information to the
destination server. If this was performed successfully, you are then brought back to the
Dynamic Publish Inspect view with confirmation messages displayed:

If performed unsuccessfully, you will see error messages in place of confirmation
messages.

Chapter 8 - Page 6
Practice 8-2: Configuring a Site for the Destination Server
Overview
• Publish site configurations such as start menu items, tree tabs, and roles to the
destination server
• Bulk approve assets for the destination server
• Execute a dynamic publish
Assumptions
• Both the source and destination jumpstart kits are up and running.
• You have completed all previous exercises successfully, especially Practice 8-1.
• You are logged in to the source jumpstart kit’s Admin interface as the fwadmin user.

Tasks
1. Configure the AviSports Store CM site for the Mirror Destination on the source jumpstart kit.
a. On the Admin tab, expand the Sites node and double-click avisports_store.
b. In your workspace, scroll down to “Publish Destinations.”
c. Click the link for “Mirror site configuration for Dynamic Publish.” You are brought to the
“Mirror site configuration for: avisports_store” form.
d. Complete the form as follows:
• For “Asset Types,” leave everything as is.
• For “Start Menu Items,” leave everything as is.
• For “Tree Tabs,” select AviProducts and Developer.
• For “Roles,” select Approver, Designer, and ProductManager.
e. Click Mirror. If the mirror publish completes successfully, you will see confirmations

Chapter 8 - Page 7
2. Verify that the avisports_store CM site has been published to the destination server:
a. Use a different browser (such as Internet Explorer) to log in to the destination server as
the fwadmin user (password: xceladmin) –
http://localhost:9380/cs/wem/fatwire/home. You must use a different
browser so that your sessions do not overlap.
b. From the Site menu, select AdminSite.
c. For Select App, select WEMAdmin

d. To access the published avisports_store site, you have to give yourself access to the
site.
1) On the Sites screen, right-click avisports_store to access the shortcut menu.
2) From the shortcut menu, select Manage Site Users.
3) On the “Manage Site Users” screen, click Assign Users.
4) On the “Select Users for Site” screen, select fwadmin from the list of available
users and click the right-arrow button to move the user to the “Selected” list.
5) Click Continue.
6) On the “Assign Roles to User” screen, select the following roles and move them to
the Selected list:
• AdvancedUser
• Approver
• Designer
• GeneralAdmin
• ProductManager
• SiteAdmin
• SitesUser
7) Click Save and Close.
8) Refresh your session.
a) Log out of the interface and log back in as the fwadmin user.

Chapter 8 - Page 8
9) From the Application bar, switch to the avisports_store CM Site.
a) When prompted to select an App, select the Admin app. You will be brought
to the Admin interface for the published avisports_store CM site on the
destination server. Observe the features and asset types that are present.

Chapter 8 - Page 9
Practice 8-3: Approving and Publishing Content to the Destination
Server
Overview
• Bulk approve and publish structural assets to the destination server so that contributors
are not asked to approve them
• Observe RealTime publish sessions
• Approve and publish content assets to the destination server
• Observe how the approval engine also calculates asset dependencies
Assumptions
• Both your source and destination jumpstart kits are up and running.

• You are logged in to the Admin interface of the source (DeveloperTraining) jumpstart kit
(localhost:9080) as the fwadmin user.
Tasks
1. Approve all structural assets to the destination server.
a. In the Admin interface of your source jumpstart kit, go to Admin > Publishing >
Destinations > Dynamic Publish.
b. Double-click Dynamic Publish to load its Inspect view in your workspace.
c. Click Approve Multiple Assets.
d. On the “Approve Assets for Publish to Dynamic Publish” screen, from the “Asset
Types” list, select the following (list continues on the next page):
• Attribute
• Attribute Editor
• AviProduct Attribute
• AviProduct Definition
• AviProduct Parent Definition
• Definition
• ImageCategory
• Page Attribute
• Page Definition
• Parent Definition
e. From the “Sample queries” list, select Assets of selected asset type(s).

Chapter 8 - Page 10
f. Click Approve for Publish. You should have approximately 95 assets that are ready
for publish.

2. Publish all structural assets to the destination server.
a. In the Top Bar, click Publishing. You are brought to the Publish Console.
b. In the Publish Console, verify that the publish destination is set to “Dynamic Publish
(using RealTime).”
c. Click Select Destination. You are brought to the “Publish destination: Dynamic
Publish” screen.
d. Click Publish. When prompted, click OK. The publish session will execute and you will
be brought back to the Publish Console.

Chapter 8 - Page 11
e. On the Active tab in the Publish Console, click Dynamic Publish. You will be brought
to the “Publishing Status” screen where you can view your publish session in
RealTime. You can also hover over each of the status bars to view messages
regarding the action currently being performed.

After the publish session completes you can view or download the log for more detailed
messaging on the publish session.
3. Approve content for publish to the destination server.
a. To approve content for publish, you must switch to the Contributor interface. In the
Application bar, click the Contributor app icon.
b. In the Left Navigation Pane, navigate go to the Site Tree and right-click on Default.
c. In the context menu, go to Approve > Dynamic Publish.
The Dynamic Publish approval page will open in a tab in your workspace.

Chapter 8 - Page 12
d. On the Dynamic Publish approval page, click Approve.

e. Click Approve. You will see some assets’ status change from “Needs Approval” to
“Approved.” Other assets’ statuses have been changed to “Held.” Assets are held due
to their asset dependencies. Under the “Detail” column, you should see how many
assets are holding these assets from being approved for publish.

Chapter 8 - Page 13
f. Click the link in the “Detail” column for MainNavigation. The “Dependencies for
MainNavigation” will appear.

g. Click the Select All link to approve all blocking assets.
h. Click Approve. Your screen will refresh and display additional blocking assets. In order
for the blocking assets to be approved for publish, each of their dependent assets must
also be approved. Observe the list of blocking assets.
i. Click the Select All link and click Approve to approve this list of blocking assets.

Chapter 8 - Page 14
j. Continue to approve all blocking assets for MainNavigation until there are no additional
dependent assets to be approved for published. You must be able to explain why these
assets appear as dependent assets. Observe the lists carefully. When there are no
dependent assets left to approve, the “Detail” column should read, “Approved and
ready to Publish.”

k. Approve blocking assets for the rest of the assets in the list. Your list should then look
4. Publish content assets to the destination server.

a. To execute publish sessions to the destination server, you must be logged in to the
Admin interface. In the Application bar, click the Admin app icon to return back to the
Admin interface.
b. On the menu bar of the Admin interface, click Publishing. You will be brought to the
Publish Console.
c. Verify that the “Publish destination” is set to “Dynamic Publish (using RealTime).”
d. Click Select Destination. This will bring you to the “Publish destination: Dynamic
Publish” screen.

Chapter 8 - Page 15
e. Click Publish. When prompted, click OK. The publish session will begin and you will
be brought back to the Publish Console screen. From here, you can access the Publish
Status screen for the Dynamic Publish session. If you click the Dynamic Publish link
under the Active tab, your Publish Status screen will look similar to the following:

5. After your publish session has completed, verify that your assets have published to the
destination jumpstart kit successfully.
a. Use the other browser to log back in to the destination jumpstart kit as the fwadmin
user.
b. Log in to the Admin interface for the destination jumpstart kit and enable the Site Plan
tree tab for the Admin and Contributor interfaces.
1) In the Admin interface, click the Hide Left Hand Navigation icon in the upper right
corner of your browser.
The tree panel will disappear and additional options will become available in the
Top Bar.
2) From the Top Bar, click Admin. The Administration Tools screen will load in your
workspace.

Chapter 8 - Page 16
3) From the list of Administration Tools, go to Tree > List all Tree Tabs. Click List all
Tree Tabs.
4) From the list of Tree Tabs, click Edit (the pencil icon) for the Admin tab. The Edit
Tree Tab: Admin screen will load in your workspace.
5) For “Sites,” select avisports_store.
6) Click Save.
7) Repeat the steps above to enable the Site Plan tree tab.
8) Click the Hide Left Hand Navigation icon in the upper right corner of your
browser to unhide the tree panel.
You should be able to access the assets from the Site Plan/Site Tree in the Admin
and Contributor interfaces, respectively.
c. In the Left Hand Navigation, navigate to the Site Tree. Do you see your Default Site
Plan?

6. You can log out of the target jumpstart kit, close the browser, and stop the target jumpstart
kit.

Chapter 8 - Page 17

Chapter 8 - Page 18
Advanced Topics: Asset Data
Modeling
Chapter 9
Practices for Lesson 9: Advanced Topics: Asset Data Modeling

Chapter 9 - Page 1
Practices Overview
In these practices, you will learn the process for introducing a new custom basic asset type to
your project and review how to enable an asset type for use with your content management site.
You will also discover how Flex Filters work; creating a pair of FieldCopier filters for the
AviProduct family, assigning them to the definitions, and executing the filters by saving each
Product Parent and AviProduct.

Chapter 9 - Page 2
Practice 9-1: Creating a Basic Asset
Overview
• Upload an Asset Descriptor File (ADF) to WebCenter Sites by using the Asset Maker
Utility
• Create a new Basic Asset type for a simple article
• Create the asset table, register the asset elements, and enable the asset type for use
with your AviSports Store CM site
Assumptions
• You have located the Simple Article ADF in your Lab Files folder.

• You are logged in to the Admin interface for the AviSports Store CM site as the
fwadmin user.
Tasks
1. Upload the ADF to the Asset Maker Utility.
a. On the Admin tab of the Admin interface, go to AssetMaker > Add New.
b. Double-click Add New. The “Add New AssetMaker Asset Type” form will load in your
workspace.
c. For “Name,” enter SimpleArticle.
d. For “Descriptor File,” click Browse and locate the SimpleArticle.xml file from your Lab
Files > Practice 9-1 folder.
e. Click Save. You are then brought to the “Asset Type: Simple Article” Inspect view.
2. Create the asset table for the SimpleArticle asset type.
a. In the “Asset Type: SimpleArticle” inspect view, click the Create Asset Table… button.
The “Create Asset Table for SimpleArticle” screen will load in your workspace.
b. The “DefDir” field references the location specified in the ADF.

Chapter 9 - Page 3
c. Click Create Asset Table. You are returned to the Asset Type: SimpleArticle Inspect
view with a confirmation that the asset table was created for SimpleArticle, and a
message stating to register elements for the asset type before it is ready to use.
3. Register the Asset Elements.

a. From the Asset Type: Simple Article Inspect view, click the Register Asset Elements
button.
b. On the “Register Asset Elements for SimpleArticle” screen, click Register Asset
Elements. You are then returned to the Asset Type: SimpleArticle Inspect view with

confirmation messages that the ElementCatalog has been updated, and a list of
elements that have been registered for the SimpleArticle asset type.
4. Enable the asset type for the AviSports Store CM site.

a. On the Admin tab, go to Sites > avisports_store > Asset Types > Enable.
b. Double-click Enable. The “Enable Asset Types: avisports_store” screen will load in
your workspace.
c. From the “Enable Asset Types” list, look for SimpleArticle.
d. Select the SimpleArticle check box.
e. Click Enable Asset Types.

Chapter 9 - Page 4
f. On the “Start Menu Selection” screen, select both options for creating Search and New
start menu items for the SimpleArticle asset type.
g. Click Enable Asset Types. You are then returned to the “Enable Asset Types” screen
with a confirmation that SimpleArticle has been enabled.

h. Verify that SimpleArticle is listed in the list of “Enabled Asset Types.”
5. Create SimpleArticle assets in the Contributor interface.

a. In the Application bar, switch to the Contributor interface.

Chapter 9 - Page 5
b. In the Contributor interface, go to Content > New > New Simple Article.

This will open a new SimpleArticle asset creation form in your workspace.
c. Use the two sample article text files, Return Policy and About Us, located in your Lab
Files directory for Practice 9-1, to create two new SimpleArticle assets.
d. Be sure to save your work.
6. Associate the Return Policy and About Us SimpleArticle assets to the Return Policy and
About Us Page assets by using the “Associated Items” field.
a. In the Left Navigation pane, go to Site Tree > Default > Footer and double-click
Footer_AboutUs to load the asset in your workspace.
b. Click Edit.
c. Using the search bar, search for SimpleArticle assets. Dock your search results on the
right if it is not already.
d. Drag the About Us SimpleArticle asset from your search results to the Drop Zone for
“Associated Items.”
e. Save your changes.
f. Repeat the steps above for the Return Policy Page asset.

Chapter 9 - Page 6
Practice 9-2: Creating Filter Assets
Overview
• Create Filter assets for Product Categories and Product assets
• Apply the Filter assets to the definitions for Product Categories and Product assets
• Edit and save each of your Product Categories and Product assets to execute the filters
Assumptions
• You have completed all exercises in practice 6 successfully.
• You are logged in to the Admin interface of the AviSports Store CM site as the fwadmin
user.

Tasks
1. Create an AviProduct FieldCopier Filter asset called CategoryFieldCopier.
a. From the Top Bar of the Admin interface, click New. The Start Menu will load in your
workspace.
b. From the Start Menu, select New AviProduct Filter. The “AviProduct Filter” form will
load in your workspace.
1) For “Name,” enter CategoryFieldCopier.
2) For “Description,” enter Category Field Copier.
3) From the “Filter” menu, select FieldCopier and then click Get Arguments. An
“Arguments” field will then appear.
4) In the “Arguments” section:
a) For “Name,” select FlexDefinition.
b) For “Value,” enter CategoryType.
c) Click Add. Your arguments are added to the arguments list:
5) Add another argument for name=CategoryName.

6) Click Save.
2. Add the CategoryFieldCopier to the Product Category Parent Definition.
a. In your Tree Panel, navigate to the Developer tab.
b. Expand the AviProduct Parent Definition node and double-click ProductCategory to
open its Inspect view in your workspace.
c. Click Edit.
d. Scroll down to the “Filters” section.

Chapter 9 - Page 7
e. Click CategoryFieldCopier and click Select. This will move your selection to the

f. Click Save.
3. Create an AviProduct FieldCopier Filter asset called ProductFieldCopier.
a. From the Top Bar of the Admin interface, click New. The Start Menu will load in your
workspace.
b. From the Start Menu, select New AviProduct Filter. The “AviProduct Filter” form will
load in your workspace.
1) For “Name,” enter ProductFieldCopier.
2) For “Description,” enter Product Field Copier.
3) From the “Filter” menu, select FieldCopier and then click Get Arguments. An
“Arguments” field will then appear.
4) In the “Arguments” section:
a) For “Name,” select Name.
b) For “Value,” enter ProductName.
c) Click Add. Your arguments are added to the arguments list.
d) Click Save.
4. Add the ProductFieldCopier Filter asset to the Product Definition.
a. In your Tree Panel, navigate to the Developer tab.
b. Expand the AviProduct Definition node and double-click Product.
c. Click Edit.
d. Scroll down to the “Filters” section.

Chapter 9 - Page 8
e. Click ProductFieldCopier and click Select. This will move your selection to the

f. Click Save.
5. Execute the Filter assets for the Category assets. Switch to the Contributor interface.
a. In the Left Navigation Pane, go to Content Tree > AviProducts and right-click
Baseball to access the short-cut menu.
b. From the short-cut menu, select Inspect. The Baseball category’s Inspect screen will
load in your workspace. Take note of the attributes displayed.
c. Click Edit. Do not make any changes to the Baseball category asset.
d. Click Save. Click the magnifying glass icon to return to the Inspect screen. Do you
notice additional attributes displayed? What attributes do you see?
You should see two additional attributes for Category Name and Category Type.
e. Repeat the steps above for Winter Sports.
6. Execute the Filter assets for the Product assets. To execute the Filter assets, you must edit
and save each Product asset.
a. In the Left Navigation Pane, double-click on Baseball. The product assets associated
to the Baseball category will load in the Search Results screen.
b. Click on a product. Take note of the fields that appear in the Inspect view of the
product.
c. Click Edit. Do not make any changes to the fields on the form.
d. Click Save, then click the Inspect button (magnifying glass). Do you notice additional
attributes displayed? What attributes do you see?
You should see an additional attribute appear for ProductName at the bottom of the
page.

Chapter 9 - Page 9
e. Repeat steps 6a thru 6d for the rest of the Baseball and Winter Sports products (5 in
total).
To verify that your filters executed properly, inspect the assets. You should see additional
fields appear. For example for a Product asset, the Inspect view appears as follows:

Chapter 9 - Page 10
After editing and saving the asset (effectively executing the filter), the Inspect view of the
same asset looks as follows:

Notice the appearance of the additional field, Product Name.

Chapter 9 - Page 11
Working with WebCenter
Sites 11g Tools and Utilities
Chapter 10
Practices for Lesson 10: Working with WebCenter Sites 11g Tools and Utilities
Chapter 10 - Page 1
Practices Overview
In these practices, you will use the WebCenter Sites Developer Tools to import a set of
templates and assets into your WebCenter Sites repository.
Chapter 10 - Page 2
Practice 10-1: Importing Assets Using WSDT
Overview
• Start eclipse and configure the connection to your WebCenter Sites jumpstartkit
• Sync assets from the avisports sample site to your local workspace
• Use WSDT to import assets to your avisports store CM site
• Sync the imported assets back to WebCenter Sites for your avisports store CM site
Assumptions
• You have started eclipse with the eclipse.exe shortcut on the desktop.

• If you are prompted to select a workspace, leave the default setting. Select “Use this as
the default and do not ask again” and click OK.
Tasks
1. Install the Developer Tools plugin in Eclipse.
a. In Eclipse, go to Help and select Install New Software.
b. Next to the Work with field, click Add.
c. In the Add Repository window,
1) For Name, enter WSDT.
2) For Location, click Archive…
3) Navigate to
D:\Oracle\WebCenter\Sites\DeveloperTraining\Sites\11.1.1.8.0\
csdt\csdt-eclipse and select the
com.fatwire.EclipseCSDT_11.1.1.v8_0_r159858.zip file. Click Open.
4) Click OK.
d. Select Oracle WebCenter Sites Developer Tools from the list of available plugins.
Click Next.
e. On the Install Details screen, select Oracle WebCenter Sites Developer Tools and
click Finish.
If you receive a security warning about installing these tools, click OK.
Eclipse will prompt you that it needs to restart in order for the changes to take effect.
After Eclipse has restarted, continue on with the rest of this practice.
Chapter 10 - Page 3
2. Open the Oracle WebCenter Sites Perspective in Eclipse.
a. Go to Window > Open Perspective > Other… > Oracle WebCenter Sites. The
“Preferences” window will open.
b. Complete the configuration settings as follows:
1) For “Instance,” click Browse. Navigate to
D:\Oracle\WebCenter\Sites\DeveloperTraining\Sites\11.1.1.8.0.
2) For “Project name,” enter devtraining.
3) For “Username,” enter fwadmin.
4) For “Password,” enter xceladmin.
5) Verify that the message at the bottom of the window says “WebCenter Sites is
Running.”
Chapter 10 - Page 4
6) Click OK. You will be returned to your Eclipse workspace:

3. Sync Template and CSElement assets from your jumpstart kit to your local workspace.
a. In the WebCenter Sites toolbar, click the Synchronize Data with WebCenter Sites
button:
Chapter 10 - Page 5
b. The Synchronize Data window will open:

c. Click the Site column header. The list of resources will then sort by site name.
d. Select all resources for the avisports site:
Chapter 10 - Page 6
e. Click Sync and Close at the bottom of the window. This process may take a few
seconds to complete. When it completes, your Sites Workspace tab will populate as
follows:

You should now be able to edit template and element code in eclipse. When you click
save, your changes are automatically synced to your jumpstart kit, and the appropriate
cached items are also updated.
4. Import assets (templates, elements, and site entries) to your workspace.
a. Go to your Lab Files folder for Practice 10-1.
Chapter 10 - Page 7
b. Under Lab Files > Practice10-1 > cs_deployed, copy all files and folders.

c. Go to
D:\Oracle\WebCenter\Sites\DeveloperTraining\Sites\11.1.1.8.0\export\en
vision\cs_workspace\src\jsp\cs_deployed and paste your files and folders. If you
are asked if you want to overwrite existing files, say yes to all.
d. Go back to your Lab Files folder and go to Practice10-1 > SiteEntry. Copy the
contents under the SiteEntry folder.
Chapter 10 - Page 8
e. Go to
D:\Oracle\WebCenter\Sites\DeveloperTraining\Sites\11.1.1.8.0\export\en
vision\cs_workspace\src\_metadata\ASSET\SiteEntry and paste the contents into
this folder.
5. Sync assets back to your jumpstart kit.
a. In Eclipse, click the Refresh Tree button on your Sites Workspace tab. You will then
see avisports_store appear in the tree:

b. Click the Synchronize Data with WebCenter Sites button in the WSDT toolbar:
c. In the Synchronize Data window, switch to the Sync to WebCenter Sites tab.
d. Click the Site column to reorder the list by site name.
Chapter 10 - Page 9
e. Select all templates and elements for avisports_store:

f. Click Sync and Close located at the bottom of the window.
Chapter 10 - Page 10
6. Verify that the assets have synced successfully to your jumpstart kit.
a. Log on to the Admin interface and conduct searches of Template assets, CSElement
assets, and SiteEntry assets and verify that the assets come up in your search results.
If your elements are properly synced to Sites, the Developer tab in the Admin interface
will look similar to the following:

If you are missing templates and elements, edit and save the elements and their
respective Site Entry assets in Eclipse:
1) To edit and save a JSP, double-click on the JSP to open it in your workspace. Add
a blank space at the end of the file and click Save.
2) To edit and save a Site Entry for a template, right-click on the JSP and select
Properties. When the SiteEntry form appears, click Submit.
3) To edit and save a Site Entry for a CSElement, right-click on the JSP and go to
Site Entry > avisports_store/<name_of_siteentry>. When the SiteEntry form
opens, click Submit.

Saving the elements will automatically sync them to your jumpstart kit. Refresh the
Developer tab to verify that the elements have properly synced to Sites.
Programming with
WebCenter Sites 11g
Chapter 11
Practices for Lesson 11: Programming with WebCenter Sites 11g

Chapter 11 - Page 1
Practices Overview
In these practices, you will use the WebCenter Sites Developer Tools (WSDT) to create a
simple template, preview it using the preview browser in WSDT, and learn to handle variables
passed through the URL.

Chapter 11 - Page 2
Practice 11-1: Creating a Simple Template
Overview
• Create a typeless Template asset in WSDT called HelloWorld.
• Execute the Template asset in WSDT’s preview browser and observe what is rendered
• Pass in variables through the URL to be handled by the template code
Assumptions
• WSDT is currently running.
• You have properly configured WSDT in eclipse with your jumpstart kit.

Tasks
1. Create a new Template asset by using WSDT’s Template Wizard.
a. In the WebCenter Sites toolbar, click the New Template icon:
b. The New Template wizard will open. Complete the form as follows:
1) For “Site,” select avisports_store from the drop-down menu.
2) For “Name,” enter HelloWorld.
3) For “Description,” enter Hello World!
4) For “AssetType,” select can apply to any asset type.
5) For “Usage,” select Element defines a whole HTML page and can be called
externally.

Chapter 11 - Page 3
6) For “Element Type,” select JSP.

c. Click Next.
d. Click Finish. The Template asset will open in your editor in eclipse.
e. On the line above the </cs:ftcs> tag, input Hello World.
f. Save your changes (CTRL+S or click Save in the editor).
2. Preview the HelloWorld template in WSDT’s preview browser.
a. In the Sites Preview Browser, input the following URL in the address bar:
http://localhost:9080/cs/Satellite?pagename=avisports_store/HelloWorld

Chapter 11 - Page 4
b. Click Go. You should see “Hello World!” rendered to your preview browser.
3. Modify the template code to render a variable called myVar.

a. Add the following tag to your template code:
<ics:getvar name=”myVar” />

b. Save your changes.
4. Pass a variable in through the URL for myVar and refresh the page.
a. In your preview browser, add &myVar=Goodbye to the end of your URL string.
b. Click Go. Observe the changes to your rendered page:

Chapter 11 - Page 5

Chapter 11 - Page 6
Building Templates
Chapter 12
Practices for Lesson 12: Building Templates

Chapter 12 - Page 1
Practices Overview
In these practices, you will:
• Use WebCenter Sites JSPs and Asset API to build templates and render asset data
• Build a fully functional rendered website from the asset data modeled and created for
your AviSports Store CM site

Chapter 12 - Page 2
Practice 12-1: Creating the Product Layout Template
Overview
• Create a new Template asset for the Product asset type called, Layout
• Copy static HTML from your Lab Files folder into your template code
• Replace static divs with JSP calls to other pagelets
Assumptions
• WSDT is properly configured and a connection can be made between Eclipse and your
jumpstart kit.
• You have product assets in the system to test your template with

• You are logged in to the Admin interface as the fwadmin user for the avisports_store
CM site
Tasks
1. Create a new template in the Admin interface for the AviProduct asset type called Layout.
a. In the menu bar of the Admin interface, click New. The Start Menu will load in your
workspace.
b. From the Start Menu, select New Template. You are then brought to the New
Template asset creation form.
1) For “Name,” enter Layout.
2) For “Description,” enter Layout template for AviProduct assets.
3) For “For Asset Type,” select AviProduct from the drop-down menu.
4) For “Applies to subtypes,” select Product.
5) Click Continue.
6) For “Usage,” select Element is used as a Layout.
7) For “Create Template Element?” click JSP.
8) For “Element Logic,” go to your Lab Files directory and use Notepad to copy the
HTML out of the Layout.html for Practice 12-1. Paste the HTML into the Element
Logic field before the closing </cs:ftcs> tag.
9) Click Save.
2. Test your template.
a. Switch to the Contributor interface.
b. Navigate to the Content Tree. Go to AviProducts > Baseball. Double-click Baseball
to load its children in the workspace.
c. Click on any Product asset to load it in your workspace.
d. Click the Preview icon (binoculars). You may be prompted to select a preview
template. Select Layout from the list of options. Click Apply.

Chapter 12 - Page 3
e. Observe the rendered page. You should have a rendered page similar to the following:

3. Sync the template to your WSDT workspace.
a. In Eclipse, from the WSDT toolbar, click the Synchronize Data button.
b. In the Synchronize Data window, click the Site column header to sort the list by site
name.
c. Locate the Layout template you created in the Admin interface for the avisports_store
CM site.
d. Click Layout select it.

Chapter 12 - Page 4
e. Click the Sync and Close button. After a few moments, your “Sites Workspace” tab
will refresh and display the Layout.jsp for AviProduct_C:

4. Replace static HTML placeholders in your Layout template with WebCenter Sites JSP tags
to call to other pagelet components, such as the Navbar, Sidenav, Detail, and Footer.
a. In Eclipse, from the Sites Workspace Elements tab, go to avisports_store >
AviProduct_C and double-click Layout.jsp from the Sites Workspace tab to edit the
code.
b. Locate the HTML comment tags for the Navbar component:

c. Replace the div with the following code snippet:
<render:satellitepage pagename=”avisports_store/navbar” />
d. Next, locate the HTML comment tags for the Sidenav component:

e. Replace the div with the following code snippet:
<render:satellitepage pagename=”avisports_store/sidenav” />
f. Now locate the HTML comment tags for the Product Detail component:

g. Replace the div with the following code snippet:
<render:calltemplate tname=”Detail” args=”c,cid,d” />
h. Locate the HTML comment tags for the Footer component:

i. Replace the div with the following code snippet:
<render:callelement elementname=”avisports_store/footer” />

Chapter 12 - Page 5
j. Your code should now look like the following snippet:

k. Save your changes.
5. Test your changes.
a. Go to the Contributor interface and preview another product asset by using the Layout
template you have just modified.
b. Observe the rendered page.

Chapter 12 - Page 6
Practice 12-2: Rendering the Product Detail Page
Overview
• Use WebCenter Sites JSP tags to obtain asset data and render the asset data to a
browser
• Learn to work with WebCenter Sites lists and variables
Assumptions
• WSDT is open and a connection exists between Eclipse and your jumpstart kit.
• You have completed the previous exercise successfully.

Tasks
1. Modify the AviProduct_C/Detail template. Add code to load the asset, retrieve its attribute
values, and render the attribute values.
a. In Eclipse, open the AviProduct_C/Detail.jsp template.
b. Follow the instructions in the JSP comments within the code to complete the template.
c. Save your changes.
2. Share the AVIImage/Detail template from the AviSports sample site to the AviSports Store
site.
a. In the Admin interface, of the AviSports sample site, go to Dev > Template >
AVIImage > Detail in your Tree Panel.
b. Double-click Detail to load its Inspect view in your workspace.
c. In the asset toolbar, click Share.
d. Share the Template to the avisports_store site.

e. Click Save Changes.
f. Use the Application bar to switch back to the AviSports Store site.

Chapter 12 - Page 7
3. Test the template.
a. Preview a product asset from the Contributor interface by using the Layout template.
The Layout template will call to the Detail template and your code will be executed.
Your rendered page should look similar to the following:

If your template does not render the expected outcome, be sure to check the logs for
errors and debug your code.

Chapter 12 - Page 8
Practice 12-3: Rendering a Product Asset in Summary Form
Overview
• Create a new Template asset for the AviProduct asset type called Summary
• Use the Asset API or WebCenter Sites JSP to retrieve and render asset data
• Test the template and debug your code if necessary
Assumptions
• You have completed the previous exercises successfully.

Tasks
1. Use the Template wizard in WSDT to create a new Summary Template asset for the
AviProduct asset type.
a. From the WSDT toolbar in Eclipse, click Create New Template.
The New Template Wizard opens.

b. In the New Template Wizard window, complete the form as follows:
1) For “Site,” select avisports_store.
2) For “Name,” enter Summary.
3) For “Description,” enter Summary template for Product assets.
4) For “Asset Type,” select AviProduct_C from the drop-down menu.
5) For “Subtype,” select Product.
6) For “Usage,” select Element defines a whole HTML page and can be called
externally. (Selecting this option will allow you to test the Summary template
independent of any calling templates.)
8) Click Next.
9) Click Finish.
2. Copy in code from your Lab Files directory for Practice 12-3.
a. On your computer, go to Lab Files > Practice 12-3.
b. Open the Summary.jsp file and copy its contents.
c. Paste the contents into the Summary.jsp file in Eclipse replacing all of the existing
code.

Chapter 12 - Page 9
3. Follow the JSP comments to add the appropriate code to load a product asset, retrieve its
attribute values, and render its attribute values.
4. Test your template.
a. After you save your changes, preview a product asset from the Contributor interface by
using the Summary template. Your rendered page should look similar to the following:

b. If your template does not render the expected outcome, be sure to check the logs for

Practice 12-4: Building Links
Overview
• Create a CSElement asset
• Use the <render:gettemplateurl /> tag to create a link to a given asset
• Invoke the element from the Summary template
Assumptions
• You are logged in to the Admin interface of the avisports_store site as the fwadmin
user.

Tasks
1. Use the Admin interface to create a CSElement asset, called
avisports_store/getLink.
a. In the Admin interface menu bar, click New.
b. From the start menu, click New CSElement.
c. In the CSElement asset creation screen, complete the form as follows:
1) For “Name,” enter avisports_store/getLink.
2) For “Description,” enter Element to generate links to given assets.
3) Click Continue.
4) For “Create Element,” select JSP.
5) In the Element Logic text area, add code to your getLink CSElement to generate
a WebCenter Sites URL. Use the generated URL to create an HTML link.
a) First, add a taglib directive for the string tag family at the top of the element:
<%@ taglib prefix="string" uri="futuretense_cs/string.tld" %>
b) Prior to the closing </cs:ftcs> tag, use the <render:gettemplateurl
/> tag to generate a WebCenter Sites URL for a given asset (expected inputs:
c and cid). Set the target template (tname) to Layout.
c) The <render:gettemplateurl /> tag will generate a URL and return it to
you in the form of a variable as specified by the outstr parameter. Use the
HTML anchor tag <a href /> to build a link for linkText (input):
<a href=”<string:stream variable=”urlVar” />”>
<ics:getvar name=”linkText” />
</a>
6) Click Save.
2. Sync the CSElement to your WSDT workspace.

a. In Eclipse, from the WSDT toolbar, click the Synchronize Data with WebCenter Sites
icon.

name.
c. Locate the avisports_store/getLink CSElement you created in the Admin
interface for the avisports_store CM site.
d. Click avisports_store/getLink select it.

will refresh and display the getLink.jsp under avisports_store:
3. Modify your AviProduct_C/Summary template and add a line of code

(<render:callelement />) to call the avisports_store/getLink CSElement in
place of the static link. Be sure that you use <render:argument /> tags to pass the
expected arguments c, cid, and linkText in your element call.
4. Test your element code.
a. In the Contributor interface, go to the Content Tree and locate a Product asset.
b. Preview the product asset using the Summary template. You should be able to click
the link and be brought to the product’s Detail page.
c. If your template does not render the expected outcome, be sure to check the logs for

Practice 12-5: Creating the Page Layout Template
Overview
• Create a new Page asset template called Layout
• Use the appropriate tags to call the Navbar, Page/Detail, and Footer components
• Test your template and debug if necessary
Assumptions
• You are logged in to the Admin interface for the avisports_store site.

Tasks
1. Use the Admin interface to create a new template for the Page asset type called Layout.
a. In the menu bar, click New. The Start Menu will load in your workspace. You are then
brought to the New Template asset creation form.
2) For “Description,” enter Layout template for Page assets.
3) For “For Asset Type,” select Page from the drop-down menu.
4) For “Applies to subtypes,” select Article Page and Landing Page.
5) Click Continue.
8) For “Element Logic,” go to your Lab Files directory and use Notepad to copy the
HTML out of the Layout.html for Practice 12-5. Paste the HTML into the Element
Logic field before the closing </cs:ftcs> tag.
9) Click Continue.
10) For Cache Criteria, add bg-color to the string of parameters.
11) Click Save.
2. Sync the template to your WSDT workspace.
a. In Eclipse, from the WSDT toolbar, click the Synchronize Data with WebCenter Sites
icon.

name.
c. Locate the Page Layout template you created in the Admin interface for the
avisports_store CM site.
d. Click Layout select it.
will refresh and display the Layout.jsp for Page:

3. Follow the instructions in the JSP comments to add code to make the appropriate calls to
the Navbar element, Page/Detail template, and Footer element.
4. Save and test your template.
a. In the Contributor interface, locate a Page asset in your Site Tree.

b. Preview the Page asset using the Layout template. Your rendered page should look


Practice 12-6: Rendering a Page Asset in Detail
Overview
• Render a Page asset in detail
• Render an image
• Test your template and debug if necessary
Assumptions

Tasks
1. Open the Page/Detail.jsp file in Eclipse.
2. Follow the comments in the JSP file to replace the static placeholders with the appropriate
tags for rendering.
3. Save your changes and test your template.
a. In the Contributor interface, go to the Site Tree > Default > MainNavigation >
Store_Baseball.
b. Preview the Baseball Page asset using the Layout template. The Layout template will
call to the Page/Detail template. Your rendered page should look similar to the
following:
You should be able to preview any of the Page assets under MainNavigation and
produce similar results. Page assets under the Footer will not produce these results, as
they are of a different subtype (Landing Page versus Article Page).


Practice 12-7: Rendering a Simple Article in Detail
Overview
• Use the asset tag family to load a SimpleArticle asset and retrieve its attribute values
• Render the SimpleArticle’s attribute values to the browser
• Preview your template
Assumptions

• You have at least one sample SimpleArticle asset to test your template with.
Tasks
1. Use the New Template Wizard to create a new Template asset for the SimpleArticle asset
type named, Detail.
a. In Eclipse, from the WSDT toolbar, click Create New Template:
The New Template Wizard will open.

2) For “Name,” enter Detail.
3) For “Description,” enter Detail template for SimpleArticle assets.
4) For “Asset Type,” select SimpleArticle from the drop-down menu.
5) For “Usage,” select Element is used within an HTML page.
7) Click Next, then in the next screen, click Finish.
2. Copy sample code in from the Lab Files directory for Practice 12-7. Follow the instructions
to add tags that load the asset, retrieve the asset’s attribute values, and render the attribute
values.
3. Test your template by previewing the Footer_AboutUs or Footer_ReturnPolicy Page
assets from the Site Tree in the Contributor interface.

Practice 12-8: Rendering a Recommendation List
Overview
• Load a Recommendation asset and retrieve its name
• Use the Recommendation asset’s name to retrieve the list of recommended assets
• Iterate over the resultset list and extract values
• Render links to product assets
Assumptions

Tasks
1. Create a new template for the Recommendation asset type called, Summary.
a. In Eclipse, from the WSDT toolbar, click Create New Template.
The New Template wizard will open.

2) For “Name,” enter Summary.
3) For “Description,” enter Summary template for Recommendation assets.
4) For “Asset Type,” select AdvCols from the drop-down menu.
7) Click Next, then in the next screen, click Finish.
2. Copy sample code in from the Lab Files directory for Practice 12-8. Follow the instructions
to add tags that load the asset, retrieve the asset’s name, retrieve the list of recommended
assets, and call to the getLink CSElement to render links.
3. Test your template by previewing the Footer_AboutUs Page asset from the Site Tree in
the Contributor interface.

Practice 12-9: Building the Navigation Bar
Overview
In this practice, you will use the Siteplan tags to render the navigation bar.
Assumptions
• You have Page assets placed properly in the Site Tree in the Contributor interface.
Tasks
1. Open the avisports_store/navbar.jsp element in Eclipse.

2. Follow the instructions in the JSP comments to add the appropriate tags for loading the
Siteplan object and rendering the navigation.
3. Save and test your element.
a. In the Contributor interface, locate a Page asset in your Site Tree.
b. Preview the Page asset using the Layout template. You should be able to click the
links in the navigation bar and be brought to each of the Page assets’ Detail pages.
4. Complete the avisports_store/footer.jsp to render the Footer of your AviSports
Store website. Be sure to save your changes. You can test your element by previewing any
asset using their respective Layout template. You should be able to click on the About Us
and Return Policy links and be brought to their respective detail pages, displaying the
associated articles.

Practice 12-10: Creating a Dynamic Search with Searchstates
Overview
• Create a side navigation for Product pages that will display product categories and links
to their products
• Create a nested searchstate that will search for the product categories, and then each of
their children, using inherited values as a basis of your search
Assumptions

• Your product catalog has been properly built, and flex filters executed.
Tasks
1. Open the avisports_store/sidenav.jsp in Eclipse.
2. Follow the JSP comments to provide the appropriate searchstate tags.
3. Test your code with any Product asset using the Layout template. Your rendered page
should look similar to the following:
Be sure to also test the links to each of the product asset from the Side Navigation.


Coding Templates for In-
Context Editing
Chapter 13
Practices for Lesson 13: Coding Templates for In-Context Editing

Chapter 13 - Page 1
Practices Overview
In these practices, you will:
• Learn to use tags that will enable in-context editing capabilities to your pages when
viewed in Web Mode.
• Determine which rendering tags to replace to enable editing for specific attribute fields.
• Create templates with slots that will enable users to create new content through Web
Mode.

Chapter 13 - Page 2
Practice 13-1: Coding for Content Editing in Web Mode
Overview
• Modify the Product/Detail template to use Insite tags in place of rendering tags
• Observe your changes in the Contributor interface by switching from Form Mode to Web
Mode for a product asset
• Edit content through Web Mode and save your changes.
Assumptions
• Your jumpstart kit is up and running
• You have successfully completed the Product/Detail template from the previous lesson

Tasks
1. Edit the Product Detail template (AviProduct_C/Detail.jsp) in eclipse.
a. First, verify that the insite taglib directive to the top of your element code:
<%@ taglib prefix="insite" uri="futuretense_cs/insite.tld" %>
b. Replace rendering fields with insite fields for the Product Price and Product
Information attribute fields.
1) For Product Price, instead of the following rendering tag:
<ics:listget listname="product:ProductPrice" fieldname="value"
/>
Replace it with:
<insite:edit field="ProductPrice" list="product:ProductPrice"
column="value" />
2) For Product Information, instead of the following rendering tag:
<render:stream list="infoList" column="value" />
Replace it with:
<insite:edit list="infoList" column="value"
field="ProductInformation" editor="ckeditor" />
c. Save your changes.
2. Verify that the usage setting for the Layout template is set to “Element is used as a Layout.”
a. In the Admin interface, go to the Developer tab > Template > AviProduct_C >
Layout.
b. Edit the template.
c. Modify the “Usage” field on the Element screen to, “Element is used as a Layout.”
d. Click Save.
a. In the Contributor interface, locate a Product asset and load it in your workspace.
b. Click Edit.
c. In the Edit screen, for Template, select Layout.
d. Click Save.

Chapter 13 - Page 3
e. Switch to Web Mode:
The Product Price and Product Information fields will become editable when you click
on them:

Chapter 13 - Page 4
f. Be sure to save any changes you make to the asset information.

Chapter 13 - Page 5
Practice 13-2: Coding for Presentation Editing
Overview
• Create two new Layout templates for the Page asset type
• Learn to pass additional parameters for Template assets
• Create a new Summary template for the Product asset
• Test the new Page Layout template and be able to switch Summary templates for the
featured product assets.
Assumptions
• You have successfully completed the Page/Layout and Product/Summary templates

from the previous lesson.
• You are logged in to the Admin interface for avisports_store.
Tasks
1. Create two new Layout templates for Page asset type, called LayoutOrange and
LayoutGreen in the Admin interface.
workspace.
b. From the Start Menu, select New Template. You are brought to the New Template
asset creation form.
1) For “Name,” enter LayoutOrange.
2) For “For Asset Type,” select Page from the drop-down menu.
3) For “Applies to subtypes,” select Landing Page.
4) Click Continue.
7) For “Element Logic,” go to your Lab Files directory and all of the code for Practice
13-2. Replace all of the code in the Element Logic field.
8) For “Additional Element Parameters,” enter bg-color=orange.
9) Click Save.
d. Repeat the steps above to create a second Page asset template for LayoutGreen.
e. Test the Change Layout functionality with a Page asset in the Contributor interface.
1) In the Contributor interface, locate a Page asset in the Site Tree. Double-click it to
load it in your workspace.
2) Switch to Web Mode. If you are asked to select a template, select LayoutOrange.
3) Click Edit.

Chapter 13 - Page 6
4) You will see an additional icon appear called Change Page Layout.
5) Click Change Page Layout. You will be presented with options for a template to
select:

Note: If you do not see the Layout template appear, you will need to change that
template’s “Usage” field to “Element is used as a Layout” in the Admin interface.
6) In the Change Page Layout window, select LayoutGreen. Click Apply. The
Contributor interface will redraw your Page asset in Web Mode using
LayoutGreen. Observe the changes to the background color. (The changes may
seem subtle depending on the quality of your monitor display.)
7) Click Save.
2. Next, you will change the layout for a pagelet. Create a new Summary template for the
Product asset type called Summary2.
a. In eclipse, click the New Template button in the WSDT toolbar. The New Template
Wizard window will open. Complete the form as follows:
2) For “Name,” enter Summary2.
3) For “Asset Type,” select AviProduct_C.
6) Click Finish.
b. Copy in code from your Lab Files directory for Practice 13-2. Save your changes.
3. Modify the Page/Detail.jsp template.
a. First, add a line at the top of your element to import the insite tag library.
b. Locate the code snippet where you are using the <render:calltemplate /> to call
the Product Summary template.

Chapter 13 - Page 7
c. Change the <render:calltemplate /> to <insite:calltemplate /> with a
variant parameter.
<insite:calltemplate slotname="productSummary" tname="Summary"
variant="Summary|Summary2" c=”AviProduct_C”
cid=’<%= ics.GetVar(“productID”) %>’ title="Featured
Product" context=’<%= “AviProduct_C:” +
ics.GetVar(“productID”) + ”:Summary” %>’/>
d. Save your changes.
4. Test the template code.
a. In the Contributor interface, locate a Page asset in the Site Tree. Double-click it to
open its Inspect view in your workspace.
b. Switch to Web Mode.
c. Click Edit.

d. Hover over and click on a featured product summary. You should see the title
displayed, the product summary highlighted in blue, and the pagelet options toolbar:
e. Click the Change Content Layout icon. You will be presented with options for the
template to select. The templates are dependent upon the values you supplied for the
variant parameter in the insite:calltemplate tag in step 3c.

Chapter 13 - Page 8
Note: If your “Change content layout” window does not display the Summary template,
check that the Summary template’s “Usage” field is set to “Element is used within an
HTML page.” You can make this change in the Admin interface.
f. Select Summary2.
g. Click Apply. The Contributor interface will redraw your page with the selected pagelet
rendered by the Summary2 template.
h. Be sure to save your changes.
If your page does not produce the desired results, view the log file and debug your
code.

Chapter 13 - Page 9
Practice 13-3: Coding for Content Creation in Web Mode
Overview
• Create a new start menu item of type New Insite for the Simple Article asset type
• Create a new detail template for the SimpleArticle asset type
• Designate editable fields and slots in the SimpleArticle Detail template
• Create a new SimpleArticle asset in Web Mode
Assumptions
• You have completed all prior practices successfully.

• You are using eclipse for template development.
Tasks
1. Create a new Start Menu item of type New Insite for the SimpleArticle asset type.
a. In the Admin interface, go to Admin > Start Menu > Add New. Double-click Add New.
A new Start Menu item form will load in your workspace.
1) For “Name,” enter Simple Article.
2) For “Asset Type,” select SimpleArticle from the list.
3) In the next screen, for “Type,” select New Insite.
4) For “Default Values,”
a) Select title from the “Field” drop-down menu.
b) For “Value,” enter Enter a title. Click Add.
c) Select author from the “Field” drop-down menu.
d) For “Value,” enter Enter the author name. Click Add.
e) Select body from the “Field” drop-down menu.
f) For “Value,” enter Enter the article body. Click Add.
5) For “Sites,” select avisports_store.

6) For “Roles,” select Any.
7) Click Save.

2. Modify the Detail template for SimpleArticle. Replace rendering tags with editing tags.
a. First, add a line to the top of your element to import the insite tag family.
b. Locate the rendering tag for the SimpleArticle’s title:
<ics:getvar name=”art:title” />
c. Replace the tag with the following insite tag:
<insite:edit field="title" variable="art:title"
params="{noValueIndicator: '[ enter title ]'}"/>
d. Locate the rendering tag for the SimpleArticle’s author:
<render:stream variable=”art:author” />
e. Replace the tag with the following insite tag:
<insite:edit field="author" variable="art:author"

params="{noValueIndicator: '[ enter author ]'}"/>
f. Locate the rendering tag for the SimpleArticle’s body:
<render:stream variable=”art:body” />
g. Replace the tag with the following insite tag:
<insite:edit field="body" variable="art:body" editor="ckeditor"
params="{noValueIndicator: 'Enter body ', width: '627px',
height: '500px', toolbar: 'Article', customConfig:
'../avisports/ckeditor/config.js'}"/>
h. Save your changes.
3. In the Admin interface, create a new Layout template for the SimpleArticle asset type called
Layout.
workspace.
b. From the Start Menu, select New Template. You are brought to the New Template
asset creation form.
2) For “For Asset Type,” select SimpleArticle from the drop-down menu.
3) Click Continue.
6) For “Element Logic,” go to your Lab Files directory and all of the code for Practice
13-3. Replace all of the code in the Element Logic field.
7) Click Save.
a. On the Contributor interface’s menu bar, go to New > Simple Article.
b. You will be prompted to select a template. Select the Layout template.

c. Enter a name for your SimpleArticle asset, such as Contact Us, then click Continue.
You will be brought to the asset’s content entry screen in Web Mode (disregard the
lack of CSS styling):

You can click on any of the available fields to edit its contents.
d. Complete each of the fields accordingly. Click Save. You should be able to locate your
newly created SimpleArticle asset in the Contributor interface’s Site Tree, or by using
the search bar to conduct a search.
5. Associate your newly created article to the Footer_ContactUs Page asset in the Site Tree.
Save your changes.
6. Modify the Page/Detail.jsp template in Eclipse. In the <render:calltemplate /> tag
where you are calling the SimpleArticle’s Detail template, change it to Layout. Your tag
should look as follows:
<render:calltemplate tname="Layout"
c='<%= ics.GetVar("articleType") %>'
cid='<%= ics.GetVar("articleID") %>' />

7. Preview the Footer_ContactUs Page asset. Your page will look similar to the following:


Caching
Chapter 14
Practices for Lesson 14: Caching

Chapter 14 - Page 1
Practices for Lesson 14: Caching

Chapter 14 - Page 2

Oracle Webcenter Sites 11G For Developers: Activity Guide

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Oracle Webcenter Sites 11G For Developers: Activity Guide

Uploaded by

Copyright:

Available Formats

Oracle Internal & Oracle Academy Use Only