Once created, a transaction is given a View Page. This is a dedicated location where users can work collaboratively on the transaction by viewing Field data, adding comments and files, and much more.
Often times you’ll want to customize the look and feel of an app’s View Page. There are many ways to do this, but one especially helpful way is by using a Portal Widget -- a panel that spreads across the top of a View Page and can be heavily customized using 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 times using HTML tables). Inside of the HTML you can embed Liquid, which allows you to insert Field values.
Portal Widgets are just one more 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 of the HTML, insert Liquid that 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 a very basic 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 across the entire top-portion of the View Page. In this Portal Widget, we have an HTML table that contains both the names of Fields (which are hard-coded) and the value of those Fields (which are populated via Liquid).
Tip: You may want to borrow the sample code above, as it contains the basic HTML table structure that is often used for Portal Widgets. It also contains some CSS styles that cause the panel to look like any other Onit panel. Feel free to customize this code however you like, by adding/removing rows, Fields, and so on.
Additionally, notice the Edit button at the bottom-left of our example Portal Widget. That can be a pretty nifty addition, and it’s simple to add. 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.