Use a dialog in a Find-Manage Wizard
Use a dialog in a Find-Manage Wizard
Technologies > User Interface Add-Ins > Assemblies with Multiple Panes > Drill-down Edit View with Two Panels
Technologies / User Interface Add-Ins / Assemblies with Multiple Panels / Find-Manage with Categories
For convenience, sometimes information in a Find-Manage Assembly is moved to a separate dialog window. In a typical scenario, a grid displays a per-row button that opens a dialog window to edit the selected record.
All dialog views, including Select Value dialogs, are displayed in modal mode, without using child browser windows. That is, the user cannot interact with the rest of the page until the dialog is closed. When the dialog is displayed, the parent view gets a slight gray cast to indicate that it is disabled. When the dialog view closes, control is passed back to the parent view.
Dialog Defined as a Hidden Panel
The dialog content can be defined as a hidden panel in the same view. To use this feature, define another panel of desired type (
form
,
columnReport
,
grid
,
chart
, etc) in the same view and set its hidden attribute to
true
. Typically you will also want to set the
showOnLoad
attribute to false, so that no data is fetched until the dialog is displayed. The
showPanel
command can be used to refresh the hidden panel data before the dialog is displayed. The user can move and resize the dialog within the boundaries of the main browser window. Specify the dialog title in the command. You do not need to specify the dialog height - it will be set automatically based on the panel content.
<panel type="grid" ... >
<field controlType="button">
<title>View Room Details</title>
<command type="showPanel"
panelId="roomDetails"
/>
<command type="openDialog" panelId="roomDetails" width="400">
<title>Edit Floor</title>
</command>
</field>
...
</panel>
<panel id="roomDetails" type="columnReport" showOnLoad="false" hidden="true" ... >
...
To add a new record using a dialog, use the
newRecord
attribute:
Do not define the panel title - instead, set it from the command that opens the dialog.
Set
buttonsPosition="footer"
to display panel actions in the dialog footer.
<action id="addNew">
<title translatable="true">Add New</title>
<command type="openDialog" panelId="roomDetails" newRecord="true"/> <panel id="roomDetails" showOnLoad="false" hidden="true" buttonsPosition="footer">
</panel> </action>
You can also use the Panel Java Script API methods:
this.editFloorForm.showInWindow({
width: 400, // required
title: getMessage('editFloorTitle'), // optional
});
...
this.editFloorForm.closeWindow();
Dialog Defined as a Separate View
The dialog content can also be defined as a separate AXVW view file. Dialogs defined in a separate AXVW take longer to display than panel dialogs, but they are not limited to a single panel.
A dialog view file can be opened from a command link or button:
<field controlType="button">
<title>View Room Details</title>
<command type="openDialog"
viewName="ab-ex-rm-find-manage-2panels-dialog.axvw"
/>
</field>
Dialog Commands
The dialog edit form generally closes itself using
closeDialog
after performing a command such as Save or Delete:
<action id="save">
<title translatable="true">Save</title>
<command type="saveForm"/>
<command type="closeDialog"/>
</action>
<action id="delete">
<title translatable="true">Delete</title>
<command type="deleteRecord"/>
<command type="closeDialog"/>
</action>
<action id="cancel">
<title translatable="true">Cancel</title>
<command type="closeDialog"/>
</action>
View: http://localhost:8080/archibus/schema/ ab-products/solutions/assemblies/work-wizard/ab-ex-work-wizard.axvw