Description
This widget displays a message in a popup window using sweetalert. The popup window contains an OK button for the user to acknowledge the message.
Installation
Drag the widget from the Widgets View onto the page. This will add the UI element of the widget to the page and also create the following directory structure in the Installed Widgets Project:
Installed Widgets
InstalledWidgets
PopupAlert_{version}
{formName}_{widgetPrefix}PopupAlert
Scripts
configure
Getting Started
This widget uses the sweetalert library. The popup is activated via a jQuery click event configured in HTML Element Properties of the PopupAlert Button Control. The texts to display in the popup and other options are configured in the config() function of the server-side configure script (see above) and this is called by the click event code.
Configuration
The configure server-side script in the Installed Widgets project contains the following functions:
- config : configure texts and options for the popup
Additional Notes
1. The config() function runs in the context of the widget. To address elements in the form, all script refererences must be prefixed with "form." e.g.
// config function
var text = "We've sent a confirmation code to your phone ending with " +
form.fields.phoneLast4Digits.value;
2. When this widget is added to a Repeater Control, the current row of the associated table on the server will be automatically set to the row where the user has clicked when the config() function is called. So for example the popup message could include information from a table column on the current row.
To add the same functionality to a Table Control, add the widget anywhere on the page, then copy the HTML Element Properties configuration to a Button Column Control in the table and also copy the server-side configure script.
3. When using bootstrap, the PopupAlert Button Control can be changed to display as a hyperlink by changing the Bootstrap Style property to Link using the Button Control's styling assistant (Ctrl T).
Example:
This example just pops up a simple message.
HTML Element Properties for the widget's Button Control are unchanged:
function config (){
return {
title: 'Title',
text: 'Your message goes here',
icon: 'warning',
button: 'OK',
}
}