An Information Box enables you to convey instructional information -- such as a warning message or guidance -- to your app’s end users on your transactions’ View Page. This can be an especially helpful tool as it allows you to provide contextual direction to users right when and where they need it.
This box uses Fields to configure and display information. You may be more familiar with Fields as what requesters fill in on a Launch Page; But they can also be used to just display information when provided with an Initial Value or a Field Calculation and set to Read Only.
Typically, Fields with a Type of HTMLfield, which accept HTML formatting, CSS, and Liquid, are used for an Information Box. Additionally, by using a Field Calculations with your HTMLfield, you can configure your box to display different text based on the evaluation of a Liquid expression. For instance, if a transaction is in an Initial Approval Phase, it could be set to output one set of instructions, but in a Legal Approval Phase, it could output a separate set of instructions.
Note only one Information Box can be configured for an app.
Before We Start ...
This tutorial will assume you understand the following concepts:
Let's Get Started!
In our example, we’ll create an Information Box that relies on a Field Calculation to display different sets of instructions depending upon which Phase a transaction is in.
1. Browse to Tabs
Although an Information Box appears as a separate panel on our View Pages, it is configured with the use of a special Tab in the Wizard. To create an Information Box, open your app's wizard and navigate to its Tabs screen.
Select the last Tab, which has a Tab number of 0 and is named Note (by default). This Tab specifically is used to create an Information Box.
2. Configure the Information Box Tab
The Name of this Tab will be the display title of the Information Box so customize this property as you like. In this example, we’ll give our Information Box a Name of Important Instructions.
We want our Information Box displaying on our transactions’ View Page, not on our Launch Page, so ensure that this Tab’s Visible in Page property is set to View.
If you need to change which Roles will be able to see the panel, adjust the Roles listed in the Visible for Roles property. This allows you to, for example, display instructions to some users, but not others.
3. Assign and Configure a Field for the Information Box
Proceed to the Fields screen and Add a new Field. Set its Launch Page tab to Create Request and set its Display In property to View so that it will not show up on the Launch Page.
We need this Field to display in our Information Box on our View Page so let’s set its View Page Tab property to the Tab we configured in Step 2, (in our case called Important Instructions).
Additionally, set this Field’s Type to HTMLfield.
The Information Box accepts other Field Types. However, as noted at the beginning of this tutorial, Fields with a Type of HTMLfield are most often used since they are highly customizable and accept Liquid.
Note that you can use the Liquid Editor to write and preview your HTML before copying it over to your Field. See our Using the Liquid Editor tutorial for more information.
Next, we’ll write a Field Calculation for this Field since we want its value to change depending on what Phase a transaction is in. Note that you could alternatively just set an Initial Value for the Field.
4. Configuring a Field Calculation
Hop over to this Field’s Advanced properties tab and create a Liquid Field Calculation that outputs different sets of instructions depending on the Phase.
Your instructions may look something like the following:
{% if phase == 'Initial Approval' %}
<b>Instructions:</b>
<ul>
<li>Please review content and select approve. If you make any changes, please post comments into the activity section.</li>
</ul>
{% elsif phase == 'Legal Approval' %}
<b>Instructions:</b>
<ul>
<li>Please review content and update necessary information.</li>
<li>If you make any changes, please post comments into the activity section.</li>
</ul>
{% endif %}Need help creating a Field Calculation? See our Configuring a Calculated Value for a Field tutorial.
Check It Out
Congrats! You've configured an Information Box to display instruction sets for the different Phase of your transactions.
You’ll need to create a new transaction to see it work. For our example, our Information Box displays differently depending on the Phase:
