Once created, a transaction is given a View Page. This is a dedicated location where users can collaborate on the transaction by viewing Field data, adding comments and files, and more.
You often want to customize the look and feel of an app’s View Page. There are many ways to do this, but one beneficial method is to use a Portal Widget—a panel that spreads across the top of a View Page and can be heavily customized utilizing a mix of HTML and Liquid.
Here’s an example of a Portal Widget:
You can use HTML (and CSS) to define the structure and layout of the Portal Widget (often using HTML tables). You can embed Liquid inside the HTML, allowing you to insert Field values.
Portal Widgets are another way in Onit to customize your app to a specific audience or business problem. In this tutorial, we’ll explain how to get up and running with Portal Widgets.
Before We Start ...
This tutorial will assume you understand the following concepts:
Let's Get Started!
We'll create a basic Portal Widget that will include Field information.
1. Add a New Portal Widget
From the App's Advanced Designer page, browse to the Widgets node from the left-hand pane.
Add a new Portal Widget from the Add dropdown.
2. Configure the Portal Widget
Provide the Portal Widget with a Name (this name will not be displayed to end-users).
Enter the HTML/CSS that will make up the structure and layout of your Portal Widget. Inside the HTML, insert Liquid, which will insert Onit data into the Portal Widget.
This may sound like somewhat of a daunting task, so below is the HTML/CSS/Liquid for an elementary sample Portal Widget to get you started:
<table align="center" width="100%">
<tbody>
<tr>
<td>
<div class="counterwidget panel" style="margin: 0; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12) !important;">
<div class="panel-heading" style="color: #000; padding-top: 0px; padding-bottom: 0px;">
<div class="panel-footer" style="font-size: 13px; color: #000; background-color: #fff; border-top: 0px; padding-top: 0px; padding-bottom: 0px;">
<span class="row"></span>
<table align="left" width="100%">
<tbody>
<tr>
<td><b>Name:</b></td>
<td>{{name}}</td>
<td><b>Requester Name:</b></td>
<td>{{requester_name}}</td>
<td><b>Requester Email:</b></td>
<td>{{requester_email}}</td>
</tr>
<tr>
<td colspan="6"><br>{{ 'Edit' | widget_atom_link: atom}}<br><br></td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>This Portal Widget will look like the following on a View Page:
As highlighted in the screenshot above, the Portal Widget is the white box that spans the entire top portion of the View Page. It contains an HTML table containing the names of Fields (hard-coded) and their values (populated via Liquid).
Tip: You may want to borrow the sample code above because it contains the basic HTML table structure often used for Portal Widgets. It also includes some CSS styles that make the panel look like any other Onit panel. Feel free to customize this code by adding or removing rows, Fields, etc.
Notice the Edit button at the bottom-left of our example Portal Widget. That can be a pretty nifty addition, and it’s simple. In the code sample above, look for the following: {{ 'Edit' | widget_atom_link: atom}}. The Liquid tells Onit to show an Edit button that, when clicked, opens the transaction’s Launch Page. From here, the user can edit the transaction’s Fields.
Tip: You can use the Liquid Editor to help format your HTML/CSS and test your Liquid.
Finally, when you’re done building out the Portal Widget’s code, set a width for your Widget by selecting a Size. For the sample Portal Widget shown above, a size of Large would work best.
Save your Widget by selecting OK.
Take a Look
Congrats! You’ve just created your first Portal Widget.
Hop over to one of your transactions’ View Pages to talk a look.