How to Support "Resizing" for Viewpoint Portlets

Viewpoint
Teradata Viewpoint is Teradata's strategic and innovative SOV (single operational view) for Teradata DB, Aster, and HDP Hadoop systems management and monitoring that enables Teradata's Unified Data Architecture (UDA).
Teradata Employee

How to Support "Resizing" for Viewpoint Portlets

Teradata Viewpoint 14.01 introduces a wider, more flexible layout, which better utilizes space on wide screen monitors, and gives the user more flexibility in controlling how much information is being displayed.

Does My Portlet Have to Support Resizing?

Portlets that do not support horizontal resizing will still function at the standard fixed-width, which is also the minimum supported width. However, most portlets will benefit from being able to display more information in the available screen real estate.

What Do I Need to Do to Support Resizing

Making your portlet horizontally resizable is fairly straightforward, and can be done in a few steps. Of course, you will want to update your portlet to make sure its layout can adapt to the resizable portlet container.

Edit your portlet.xml.

Add the following init-param. This tells the portal-framework that this portlet is horizontally resizable.

portlet.xml

   <portlet>
<portlet-name>DynamicQuery</portlet-name>
<display-name>DynamicQuery</display-name>
<init-param>
<name>resizeHorizontal<name>
<value>true</value>
</init-param>
...
</portlet>

Edit your include.jsp file

Edit your include.jsp to remove this line:

<script type="text/javascript" src="/CommonsWeb/js/jquery.js"></script>

And add:

<script type="text/javascript" src="/CommonsWeb/js/TDResizablePortletController.js"></script>

include.jsp

<vp:managedResources context="${context}"> 
...
<script type="text/javascript" src="/CommonsWeb/js/TDResizablePortletController"></script>
</vp:managedResources >

Edit your registerPortlet tag

Edit your <vp:registerPortlet> tag to set supportsResizeHorizontal to true.

<vp:registerPortlet context="${context}"> 
context='${context}'
elementId="${context}_content"
refreshUrl='/SkewedSessionsPortlet/dataserver/getSkewedSessionsReportData'
refreshTarget='#tempDiv${context}'
refreshInterval='30000'
supportsResizeHorizontal='true' />

This is it! Your portlet container is now horizontally resizable.

Register Resize Callbacks

Your portlet will want to register functions which get called whenever a resize event occurs.

// triggered when the portal columns resize
TDPortalManager.onPortalResize(context, function () {});

// triggered when a portlet is (un)collapsed
TDPortalManager.onPortletCollapseToggle(context, function (collapsed) {});

// convenience method for clearing a portlet's resize callbacks
TDPortalManager.clearResizeAndCollapseCallbacks(context);

For more concrete examples, refer to the sample portlets included in the PDK.