Portal Pop-Up Design
- 17 Nov 2023
- 3 minute read
- Print
- DarkLight
- PDF
Portal Pop-Up Design
- Updated 17 Nov 2023
- 3 minute read
- Print
- DarkLight
- PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
This article provides several tips for creating technical enhancements to portal pop-ups.
Adding a Close/Cancel Button to a Pop-Up
When using pop-ups in a portal, a user can close the pop-up by clicking the "x" that appears in the header. However, code can be added to the source code in the portal view to also display a button in the bottom left of the pop-up window:
<div class="action">
<button onclick="FW.Dialog.Unload();" type="button">Close</button>
</div>By including this code, clicking the button will close the pop-up. The text between the tags can be changed from "Close" to "Cancel", "Return", or any other verbiage. 
Tip
The Athletics and Alumni Interviewing portals available via Briefcase contain numerous examples of pop-ups.
Adding Height to a Pop-Up/Scrollbar
If a pop-up contains a fair amount of content, a scroll bar may be necessary for the user to view all the information. Setting the height of the pop-up will create a scroll bar.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div class="header">
Applicant Details
</div>
<div class="content" style="height: 500px;">
<table class="plain">
<colgroup>
<col style="width: 150px;" />
<col />
</colgroup>
<tbody>
<tr>
<th>Student</th>
<td>{{name}}</td>
...
</tbody>
</table>
</div>
</body>
</html>The div with a class of "content" has been given a style, setting the height of 500px. If there is data in the pop-up that will not fit within 500px, a scrollbar will appear.
Adding a Header
A grey bar can appear at the top of the pop-up with text. This grey bar also contains the 'x' to close the pop-up, as well as "Prev" and "Next" links where applicable.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div class="header">
Applicant Details
</div>
<div class="content" style="height: 500px;">
<table class="plain">
...
</table>
</div>
</body>
</html>The div with a class of "header" creates the header, and both regular text and merge fields can be used.
Configuring Pop-Ups for Updates/POST Methods
When updating data from a pop-up, the pop-up will often include either select lists or input boxes. The user will then select or type in the appropriate value and then save/update/submit. The POST method will use the information from the select list or input box to change data.
Updating a Prompt-Driven Field
When updating a prompt-driven field, Liquid looping will be used in the view to create the list of prompts in the drop-down.
<td>{% assign curr_rating = {{sp_rating}} %}
<select id="rating" name="rating">
{% for rating in ratings %}
{% if {{rating.id}} == curr_rating %}
<option selected="selected" value="{{rating.id}}">{{rating.value}}</option>
{% else %}
<option value="{{rating.id}}">{{rating.value}}</option>
{% endif %}
{% endfor %}
</select>
</td>In the above example, tags generate the drop-down, and the query with the node of "ratings" generates the values. The assign at the start of the code sets the current value if one is already selected for the record. This code ensures that when the pop-up is opened and the record already has a value for the field, that value will appear selected.
Updating a Free-Text Field
When a pop-up is intended to update free-text fields, <input> or <textarea> tags are used.
<tr>
<th style="text-align: left;">Notes</th>
<td><input id="notes" name="notes" type="text" value="{{notes}}" />
</td>
</tr>In the above example, the pop-up has an input box for a user to enter text. If the record already has data from the "notes" merge field, that data will appear in the input box when the pop-up is loaded.
The input box can have additional attributes, such as "size", to control other functionality.
When an input box may be too small for the amount of text, a pop-up can use .
<tr>
<th style="text-align: left;">Notes</th>
<td><textarea cols="30" id="notes" name="notes" rows="5" value="{{notes}}">{{notes}}
</textarea></td>
</tr>Attributes like rows and cols can set the visible size of the 'textarea' box.
Adding a Submit Button
In a pop-up that is saving or updating data, a button is often used to call the POST method.
The POST cmd will be included in the source code, either in the <form></form> tags or within the button code directly.
<form action="?cmd=saveDetails" method="post" style="width: 500px;">
<input name="cmd" type="hidden" value="saveDetails" />
...
<div class="action">
<button class="default" onclick="FW.Lazy.Commit(this);" type="button">Submit</button>
<button onclick="FW.Dialog.Unload();" type="button">Close</button>
</div>
<div class="action">
<button class="default" onclick="FW.Lazy.Commit(this, { cmd: 'assign' });" type="button">Submit</button>
<button onclick="FW.Dialog.Unload();" type="button">Close</button>
</div>Was this article helpful?
