Cutomizing portal page display

Hi Everyone,

If any one has customized portal pagedisplay to have "div" tags to place portlets instead of "table"tags, please share your idea's.

Thanks,
Uday Bhasker J.

Find more posts tagged with

Comments

Evan_Bench

Quoted Uday Bhasker Jorigala on 2013-02-07 22:19:

Hi Everyone,

If any one has customized portal page display to have "div" tags to place portlets instead of "table" tags, please share your idea's.

Thanks,
Uday Bhasker J.

Yes, using div tags is considered best practice (it is best to avoid hard-coded tables in your Page JSP).

You can use div tags (or HTML5 tags as well) in a variety of ways on the Portal Grid and in the Portal Styles.

For example, you could add simple div elements that contain the vgn-portal tag to show either Portal Style Types or Portlets.

<header class="topimg1">

<vgn-portal:includeStyle friendlyID="header" />

</header>

<div class="topimg3">

<vgn-portal:includeStyle friendlyID="banner" />

</div>

<div id="content">

<page:tas-authenticator />

<vgn-portal:includePageContent />

</div>

<div> id="textpadportlet">

<vgn-portal:renderPortlet portletFriendlyID="textareasample">

<vgn-portal:onRenderSuccess>

<vgn-portal:insertPortletContent />

</vgn-portal:onRenderSuccess>

<vgn-portal:onRenderFailure>

<p class="epi-error">This portlet can not be displayed</p>

</vgn-portal:onRenderFailure>

</vgn-portal:renderPortlet>

</div>

Then for each div element id, add a corresponding element into your CSS that will provide the structure and look&feel of the page. You can reference this style sheet as an external CSS ref in the Portal Grid.

------------------

If you are using Portal for VCM/WEM (version 8) you don't even need div elements in the Portal Grid. Instead you place your div elements in the WEM Page Layout JSP or Page Template JSP and define the content regions on the Page Template (using the Content Workspace). The only requirement for this is that you declare the page layout tag in the Portal Grid:

<body>

<%-- This tag is used to include the WEM Page Layout --%>

<% if (HtmlUtils.sniffBrowser(request) > 0) { %>

<page:include-page urlContext="/vgn-ext-templating" pagePath="/in_line/pageLayout.jsp"/>

<% } %>

<%-- This tag is used to include the WEM Tools Palette --%>

<% if (HtmlUtils.sniffBrowser(request) > 0) { %>

<page:include-page urlContext="/vgn-ext-templating" pagePath="/in_line/in-context-edit.jsp" />

<% } %>

<%-- Need to invoke dependency tracking at the end of the template --%>

<% if (HtmlUtils.sniffBrowser(request) > 0) { %>

<page:include-page urlContext="/vgn-ext-templating" pagePath="/in_line/trackDependencies.jsp"/>

<% } %>

</body>

Let me know if you need more examples...

Evan

Qutubuddin

This is now available OOTB.

Use “DHTML Page Display” as the Page Display Implementation.

Thanks & Regards

Qutubuddin Saifuddin
Senior Consultant I America Services Organization

Phone: (732) 354 4423
Mobile: (732) 397 7951

Website: www.opentext.com

This email message is confidential, may be privileged, and is intended for the exclusive use of the addressee. Any other person is strictly prohibited from disclosing orreproducing it. If the addressee cannot be reached or is unknown to you, please inform the sender by return email and delete this email message and all copies immediately.

From: eLink Entry: OpenText Portal Forum [mailto:vignetteportal@elinkkc.opentext.com]
Sent: Thursday, February 07, 2013 3:55 PM
To: eLink Recipient
Subject: Cutomizing portal page display

Cutomizing portal page display

Posted byuday_jorigala@nylim.com (Jorigala, Uday Bhasker) On 02-07-2013 15:54

Hi Everyone,

If any one has customized portal page display to have "div" tags to place portlets instead of "table" tags, please share your idea's.

Thanks,
Uday Bhasker J.

[To post a comment, use the normal reply function]
Forum:	OpenText Portal Forum
Content Server:	Knowledge Center

Uday Bhasker Jorigala

Thanks Evan, for quick reply.

Actually what I was looking is to makeuse of portlets functionality and wrap protlets in div tags, control theportlets layout from Portal UI.

I was thinking to have custom "secondarypage" to achieve the functionality.

Thanks,
Uday Bhasker J.

From:   "eLink Entry:OpenText Portal Forum" <vignetteportal@elinkkc.opentext.com>
To:   "eLink Recipient"<devnull@elinkkc.opentext.com>
Date:   02/07/2013 04:21 PM
Subject:    Cutomizing portalpage display

Cutomizingportal page display

Posted by ebench@opentext.com(Bench, Evan) On 02-07-2013 16:19

Quoted Uday Bhasker Jorigala on 2013-02-07 22:19:

Hi Everyone,

If any one has customized portal page display to have "div" tagsto place portlets instead of "table" tags, please share youridea's.

Thanks,
Uday Bhasker J.

Yes, using div tags is considered best practice (itis best to avoid hard-coded tables in your Page JSP).

You can use div tags (or HTML5 tags as well) in a varietyof ways on the Portal Grid and in the Portal Styles.

For example, you could add simple div elements thatcontain the vgn-portal tag to show either Portal Style Types or Portlets.

<header! class=& quot;topimg1">

<vgn-portal:includeStyle friendlyID="header"/>
</header>

<div class="topimg3">
<vgn-portal:includeStyle friendlyID="banner"/>
</div>

<div id="content">


<! ;page:tas-authentic ator />
! <vgn-portal:includePageContent/>


</div>

<div> id="textpadportlet">
<vgn-portal:renderPortlet portletFriendlyID="textareasample">
<vgn-portal:onRenderSuccess>
&nb! sp; <vgn-portal:insertPortletContent/>
</vgn-portal:onRenderSuccess>
<vgn-portal:onRenderFailure>
<p class="epi-error">Thisportlet can not be displayed</p>
</vgn-portal:onRenderFailure>
</vgn-portal:renderPortlet>
!
! </! div>

Then for each div element id, add a corresponding elementinto your CSS that will provide the structure and look&feel of thepage. You can reference this style sheet as an external CSS ref in thePortal Grid.
------------------

If you are using Portal for VCM/WEM (version 8) youdon't even need div elements in the Portal Grid. Instead you place yourdiv elements in the WEM Page Layout JSP or Page Template JSP and definethe content regions on the Page Template (using the Content Workspace).The only requirement for this is that you declare the page layout tag inthe Portal Grid:

<body>

! <%-- This tag is usedto include the WEM Page Layout --%>
<% if (HtmlUtils.sniffBrowser(request)> 0) { %>
<page:include-page urlContext="/vgn-ext-templating"pagePath="/in_line/pageLayout.jsp"/>
<% } %>

<%-- This tag is used to include the WEMTools Palette --%>
<% if (HtmlUtils.sniffBrowser(request)> 0) { %>
<page:include-page urlContext="/vgn-ext-templa!ting" pagePath="/in_line/in-context-edit.js! p" /! >
<% } %>
<script language="JavaScript"type="text/javascript" src="/shared/js/wz_tooltip.js"></script>

<%-- Need to invoke dependency trackingat the end of the template --%>
<% if (HtmlUtils.sniffBrowser(request)> 0) { %>
<page:include-page urlContext="/vgn-ext-templating"pagePath="/in_line/trackDependencies.jsp"/>
<% } %>
</body>!

Let me know if you need more examples...

Evan

[To post a comment, use the normal replyfunction]
Topic:	Cutomizingportal page display
Forum:	OpenTextPortal Forum
Content Server:	KnowledgeCenter

Evan_Bench

Quoted Uday Bhasker Jorigala on 2013-02-08 11:41:

Hi Uday,

Yes, that is something completely different. The easiest way to achieve this is to use custom styles that contain the portlets, then render that style in the grid (in the usual way).

I would avoid using Portal UI! The reason is that it's not expedient to make changes to the "epi" style elements. You can override the Portal UI "epi" stylization but it's not useful to do this when you can simply add a standardized external (or internal) css3 to your style or portlet jsp.

To add a portlet to a style:

Create a new style type that holds your style sheet reference (this is an include file). You can find examples of inc files in the existing style types.
Create a new style using this type (this will have the tags to render the portlet)
Create a new portlet instance and give it an appropriate "friendly" id (e.g. mysampleportlet).
Create or Modify a Portal Theme, then map your new style type to the new style (associating that theme to your site if not already done).
In your style, add the portlet "friendly" id.
Then add that style to your Portal grid.

Example Style that references a Portlet:

<%@ page

import="java.util.*,

com.epicentric.site.SiteManager,

com.epicentric.site.Site,

com.epicentric.navigation.Menu,

com.epicentric.navigation.MenuItem,

com.epicentric.page.PageManager,

com.epicentric.page.Page,com.epicentric.common.website.*"%>

<%@ taglib uri="vgn-tags" prefix="vgn-portal" %>

<vgn-portal:defineObjects/>

<vgn-portal:renderPortlet portletFriendlyID="mysampleportlet">

<vgn-portal:onRenderSuccess>

<vgn-portal:insertPortletContent />

</vgn-portal:onRenderSuccess>

<vgn-portal:onRenderFailure>

<p class="epi-error">This portlet is not available!</p>

</vgn-portal:onRenderFailure>

</vgn-portal:renderPortlet>

Example Div that references a style type (placed in Portal Grid JSP)

<vgn-portal:includeStyle friendlyID="mynewportletstyletype"/>

</div>

The include file will contain any resources that are needed for the style. This could include external or internal style sheets, tag libraries, imports, etc.

You can also create an additional style type that holds the CSS reference for the entire page. Then reference that style type in the Grid. This allows you to seperate global css from the business logic contained in your Portal styles.

Let me know if this is clear.

Regards,

Evan

Evan_Bench

and one more thing to add (as I think you are using WEM also):

If this portlet has anything to do with WEM, I'd recommend that you add this instead as a component instance based on a new component type. This involves creating a new component type (in AppConsole) that references your portlet and if it happens to be a CP portlet, you don't actually need an instance managed in Portal. You can create an instance in the Workspace, then reference that in the Component Instance.

The advantage to this is that you can rely on your WEM Theme to control the look & feel of your "portlet" (which isn't really a portlet anymore but rather a component instance rendered on a region).

This also gives you the added flexibility of allowing business users to place this so-called "portlet" anywhere on their pages or templates!

In this case, OpenText Portal only exists as a JEE container used to render html fragments coming from AppSvcs.

Murtaza_F_Tohfafarosh

Hello,

I am trying to do something similar and wanted to see if anyone can help. I have my page display setup the way i want but the portlets that render in preview get wrapped around with OOTB div's for incontextedit. These div's break the styling of my pages. I wanted to be able to put the OOTB divs inside of the portlet div's. Anyone how I can do something that like?

I am on WCM 8.0 using DPM and Portal 8.1.

Thanks,

Murtaza

Quoted Evan Bench on 2013-04-12 13:45:

Quoted Uday Bhasker Jorigala on 2013-02-07 22:19:

Hi Everyone,

If any one has customized portal page display to have "div" tags to place portlets instead of "table" tags, please share your idea's.

Thanks,
Uday Bhasker J.

Yes, using div tags is considered best practice (it is best to avoid hard-coded tables in your Page JSP).

You can use div tags (or HTML5 tags as well) in a variety of ways on the Portal Grid and in the Portal Styles.

For example, you could add simple div elements that contain the vgn-portal tag to show either Portal Style Types or Portlets.

<header class="topimg1">

<vgn-portal:includeStyle friendlyID="header" />

</header>

<div class="topimg3">

<vgn-portal:includeStyle friendlyID="banner" />

</div>

<div id="content">

<page:tas-authenticator />

<vgn-portal:includePageContent />

</div>

<div> id="textpadportlet">

<vgn-portal:renderPortlet portletFriendlyID="textareasample">

<vgn-portal:onRenderSuccess>

<vgn-portal:insertPortletContent />

</vgn-portal:onRenderSuccess>

<vgn-portal:onRenderFailure>

<p class="epi-error">This portlet can not be displayed</p>

</vgn-portal:onRenderFailure>

</vgn-portal:renderPortlet>

</div>

------------------

<body>

<%-- This tag is used to include the WEM Page Layout --%>

<% if (HtmlUtils.sniffBrowser(request) > 0) { %>

<page:include-page urlContext="/vgn-ext-templating" pagePath="/in_line/pageLayout.jsp"/>

<% } %>

<%-- This tag is used to include the WEM Tools Palette --%>

<% if (HtmlUtils.sniffBrowser(request) > 0) { %>

<page:include-page urlContext="/vgn-ext-templating" pagePath="/in_line/in-context-edit.jsp" />

<% } %>

<%-- Need to invoke dependency tracking at the end of the template --%>

<% if (HtmlUtils.sniffBrowser(request) > 0) { %>

<page:include-page urlContext="/vgn-ext-templating" pagePath="/in_line/trackDependencies.jsp"/>

<% } %>

</body>

Let me know if you need more examples...

Evan