Popup windows are typically used to perform quick editing functions on web pages without redrawing the entire web page. Examples include:
- Adding a new item from a search or list panel
- Modifying an existing item from a search or list panel
- Tagging items with a collection (e.g. adding a bunch of items to a Collection)
- Deleting items (in which case, the popup merely confirms the user's desire to Delete items)
For such purposes the qbo3.Popup class (and corresponding 'Popup' behavior) is used to render the popup. It can be used as follows:
// Create a popup with script directly
// Note we store and cache popups with a global Popup object: qbo3.Popups
var popup = qbo3.Popups.get('myPopupDivTag');
// Create a popup from a remote URL
qbo3.Popups.get('Theme.ashx/Render?Transform=Templates/Contact/CollectionMemberInsert.Popup.xslt');
// Create a popup from a remote URL that will be reused
// Step 1: define a key for the URL
qbo3.Popups.defineKey('MyReusablePopup', 'Theme.ashx/Render?Template=Templates/Contact/CollectionMemberInsert.Popup.xslt&cache=12000');
// Step 2: open the popup via the key
qbo3.Popups.get('MyResuablePopup');
// Create a popup from within a qbo3.AbstractObject-derived class to show information only
qbo3.getObject('MyObjectContainer').popup('Describe');
// Create a popup from within a qbo3.AbstractObject-derived class to send data to the server, and refresh the panel
qbo3.getObject('MyObjectContainer').popup('TagInsert', {method: 'CollectionMemberInsert'});
// Create a popup from within a qbo3.AbstractObject-derived class to send data to the server, and display the results in the panel
qbo3.getObject('MyObjectContainer').popup('SmartSearch', {method: 'SmartSearch', invoke: 'html'});
// Pass form data to the method being called, via the popup.
qbo3.getObject('MyObjectContainer').popup('Confirm', {method: 'MyMethod', formData: {'Foo': 'Bar'}});
// Define commonly used popups
qbo3.Popups.define({
'TagInsert': 'Theme.ashx/Render?Transform=Templates/Contact/CollectionMember.Popup.xslt&cache=12000'
});
First and foremost, popups can be rendered simply by render some HTML tag (usually a div tag) with a hidden class. Calling qbo3.Popups.get() will render the popup with effects, based on the BootStrap UI. This is simple, straight-forward, and a variation on a common javascript library theme: show modal popups.
In QBO however, we frequently wish to show fundamentally the same popup across multiple pages or panels. For example, the notion of adding a bunch of items to a Collection may be used for a list of Loan, Debts, Valuations, People, or pretty much anything else. Rather than including the HTML markup for adding items to a collection in the Loan, Debt, Valuation, Person and other XSLTs, we define a key in qbo3.Popups, from which all these panels can reference it. The components involved include:
- Bootstrap.Popup.js (part of mootools.js):
- one of many slick modal popup javascript classes (this is a behavior)
- if you want a different modal popup class, you can wrap it with qbo3.Popup.js, and still leverage the rest of qbo3.Popup functionality.
- qbo3.Popup.js:
- defines the qbo.Popup class
- defines the 'Popup' behavior
- defines commonly used Popup URLs (e.g. 'TagInsert': CollectionMember.Popup.xslt)
- {Project}.js: (project-specific javascript files, such as qbo.Contact.js, qbo.Debt.js, etc.)
- defines project specific Popup URLs
- qbo3.AbstractObject:
- popup(element, options): shows a popup, binding the popup's save and cancel methods to the popupSave and popupCancel,
- popupSave(data): accepts data from the popup, and invokes a method with the data, then hides the popup
- popupClear(): hides the popup
- Theme.ashx: the Render method renders an XSLT without making any database calls directly
Leveraging Popups from qbo3.AbstractObject
Often, popups are used as dialogs prior to executing some AJAX call, including:
- Deleting items
- Copying templates
- Prompting for custom parameters to a statement or method
The qbo3.AbstractObject javascript class provides a popup, popupSave, popupCancel, and popupClear methods. Usually, all you will need to use is popup.
Delete example
Deleting items is usually accomplished from a list of records (e.g. a Search page), by adding a menu item like this:
<li onclick="qbo3.getObject(this).popup('Confirm', {{method: 'Delete', addIds: true }});">
Items to note:
- qbo3.getObject(this) will return a javascript class derived from qbo3.AbstractObject (e.g. a qbo3.MessageObject)
- popup(element, options):
- element is the name of an id tag, an entry in the qbo3.Popups object, or a URL
- options controls how the qbo3.AbstractObject deals with the popup, including:
- method: name of the method to call addIds: when saving, data from the popup will be mixed with all ID checkboxes checked in a list
- addIds: if true, the method called will include form elements from the popup, as well as IDs from the calling panel
Copy example
Copying a template is usually accomplished from a Summary page, by adding a menu item like this:
<li onclick="qbo3.getObject(this).popup(
'Theme.ashx/Render?Transform=Templates/Decision/DecisionTemplate.Copy.xslt&ID={DecisionTemplateID}', {{
'method': 'Copy',
'invoke': 'json',
'callbacks': function(json) {{
document.location = 'Decision/DecisionTemplate.ashx/Summary?ID=' + json.DecisionTemplateCollection.DecisionTemplateItem[0].DecisionTemplateID;
}}
}}
);">
Items to note:
- There is no pre-defined popup in qbo3.Popups (since this is not reused between pages)
- popup(element, options):
- the element is a relative URL to the popup to be rendered
- options.method is 'Copy'; the Copy statement will be called if the user clicks Save on the popup
- options.invoke is 'json'; qbo3.AbstractObject.invokeJson() will be called when the user clicks save on the popup
- options.callbacks defines what popupSave should pass to invokeJson as callbacks
- in this case, we grab the new DecisionTemplateID, and redirect the user to the new DecisionTemplate