Template-able Widgets

template-able.widgets.md

Custom Template Widgets

In this pull request we created the ability to have template widgets. This feature allows you to change only your entity file for portal to get a smart widget. The example I give is the payroll information portlet.

You need to add the following portlet-preferences to your portlet-definition file:

widgetURL

This is where we will get the data from (in a JSON format). If this is an external call outside of the portal container, you have to do some magic that I'll cover in another post.

<portlet-preference>
  <name>widgetURL</name>
  <value>/portal/p/earnings-statement/max/earningStatements.resource.uP</value>
</portlet-preference>

widgetType

Setting this to "generic" will enable you to provide your own template

    <portlet-preference>
        <name>widgetType</name>
        <value>generic</value>
    </portlet-preference>

widgetTemplate

This is where the template goes. Suggest using a CDATA tag in here.

    <portlet-preference>
        <name>widgetTemplate</name>
        <value><![CDATA[
            <div style='margin : 0 10px 0 10px;'>
               <loading-gif data-object='content' data-empty='isEmpty'></loading-gif>
               <ul class='widget-list'><li ng-repeat=\"item in content.report |orderBy: ['-paid.substring(6)','-paid.substring(0,2)','-paid.substring(3,5)'] | limitTo:3\" class='center'><a href='/portal/p/earnings-statement/max/earning_statement.pdf.resource.uP?pP_docId={{item.docId}}' target='_blank'><i class='fa fa-bank fa-fw'></i> {{item.paid}} Statement</a></li></ul>
               <div ng-if='isEmpty' style='padding: 10px; font-size: 14px;'><i class='fa fa-exclamation-triangle fa-3x pull-left' style='color: #b70101;'></i><span style='color: #898989;'>We had a problem finding your statements (or you don't have any).</span></div>
               <div style='background-color: #EAEAEA; border-radius:4px;padding:10px; margin-top:10px;'>
                  <span class='bold display-block left' style='text-align: left; padding-left: 10px; font-size: 14px;'>See all payroll information for more options:</span> 
                  <ul style='text-align: left;list-style-type: disc; font-size: 12px;'>
                     <li>See all paystubs</li>
                     <li>Tax statements</li>
                     <li>Update direct deposit</li>
                  </ul>
               </div>
            </div>
            <a class='btn btn-default launch-app-button' href='/portal/p/earnings-statement'>See all payroll information</a>
        ]]></value>
    </portlet-preference>

widgetConfig

The widget config is a JSON object. Please note it has to be valid JSON. I used the <![CDATA[]]> tag so we didn't have to encode everything. Helpful. Also make sure you escape double-quotes.

Currently we only use the evalString to evaluate emptiness. We may add more in the future.

    <portlet-preference>
        <name>widgetConfig</name>
        <value><![CDATA[{ "evalString" : "!$scope.content.report || $scope.content.report.length === 0"}]]></value>
    </portlet-preference>

By doing just this we were able to generate

Super awesome!

In the future we will have suggestions on styling, sizes to keep in mind, and possibly some out of the box templates.

Happy Coding,

Tim