Example HTML markup for defining a portal page | HCL Digital Experience
Use these code samples as examples of HTML markup to create a portal page.
The HTML markup that you use to create a portal page has a direct effect on how the page is rendered in the portal. This topic provides examples of the HTML markup that you can use in a source file to produce various types of content in a portal page.
portlet-window
on a <div>
or an <object>
element:- Use a
<div>
element if the portlet is part of the<body>
of the page. - Use the
<object>
element if the portlet is part of the<head>
element of the page.
portlet-window
, a portlet <div>
or <object>
element
needs to contain the following information:- Name attribute
- This is the name of the portlet instance that is unique across the page. It is used to distinguish between different instances of the same type of portlet on the page. When a static page is updated, this instance name is used to determine if portlets need to be updated or deleted. This name is not the unique name in the portal.
- Style attribute
- The style attribute identifies the portlet definition, that is the type of the portlet. The attribute needs to contain the portlet definition style. The value of the style contains the object ID or the unique name of the portlet definition.
<div class="portlet-window" name="instancename"
style="portlet-definition:definitionname"></div>
You
can also parametrize portlet windows directly in the HTML document. These parameters are
passed on as edit default preferences to the portlet instances at page creation or page
update time. For a portlet included with a <div>
element, the parameters consist of name-value pairs that are formatted by using an HTML
definition list.
Example:<div class="portlet-window" name="<instancename>"
style="portlet-definition:<definitionname>">
<dl>
<dt>key1</dt>
<dd>value1</dd>
<dt>key2</dt>
<dd>value2</dd>
</dl>
</div>
For a portlet included by an <object>
element, the parameters consist of name-value pairs that are
formatted by using the <param>
elements of the
<object>
element. Example:
<object class="portlet-window" name="<instancename>"
style="portlet-definition:<definitionname>">
<param name="key1" value="value1">
<param name="key2" value="value2">
</object>
Portlet containers contain portlet windows that can be rearranged or deleted by a page editor, for example, the page customizer. In addition you can add new portlet windows after the page has been deployed. The portlet windows that you define in the static page as the content of the container are the portlets that are initially part of the container. Containers cannot be nested.
portlet-container
on a <div>
tag. In addition you need to specify the following:- Name attribute
- This is the name of the container that is unique across the page. This is not the unique name in the portal.
<div class="portlet-container" name="holdername">
<div class="portlet-window" name="instancename"
style="portlet-definition:definitionname"></div>
</div>
Rendering a page from full HTML markup
When you include the beginning <html>
and ending </html>
markup in the source file, the resulting portal
page is rendered without the portal theme, or surrounding navigation frame. The user
sees only the layout that you code inside the HTML file. An example of the HTML markup
looks like this:
<html>
<head>
<title>Sample Static Page</title>
</head>
<body>
<p>This is a static page example.</p>
<p>Welcome portlet</p>
<div class="portlet-container" name="portletContainer1">
<div class="portlet-window" name="portletWindow1"
style="portlet-definition:wps.p.Welcome To WebSphere Portal">
</div>
</div>
</body>
</html>
The values given for the name attributes must be unique in the scope of the page.
With this example, all information that the portal requires to render the page is well known at the time when you create and edit the static page.
Rendering a page from an HTML fragment
<html>
markup, then the page is rendered
inside the portal navigation frame. An example of this HTML
coding:<p>This page has one Welcome Portlet.</p>
<p>Welcome portlet</p>
<div class="portlet-container" name="portletContainer1">
<div class="portlet-window" name="portletWindow1"
style="portlet-definition:wps.p.Welcome To WebSphere Portal">
</div>
</div>
The
values given for the name attributes must be unique in the scope of the page.