Dialog Box: Reference Information

In the tables of this topic, you can find reference information about dialog boxes that are created by using the qp-panel control.

Conversion from ASPX to HTML and TypeScript

The following tables will help you to convert the ASPX elements that are related to dialog boxes to HTML or TypeScript elements.

Table 1. PXSmartPanelThe following table shows the correspondence between PXSmartPanel and HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.
ASPX HTML or TypeScript
PXSmartPanel Is replaced by the qp-panel tag.
PXPanel
<px:PXPanel runat="server"
  ID="PXPanelAddToProjects"
  SkinID="Buttons">
    <px:PXButton
      runat="server"
      ID="btnCancel"
      Text="Cancel"
      DialogResult="Cancel" >
</px:PXPanel>
 Is replaced by the footer tag. The footer tag contains the buttons at the bottom of the dialog box. This tag can contain any number of qp-button tags.
<footer>
  <qp-button
    id="buttonCancel-addItemLookup"
    dialog-result="Cancel">
  </qp-button>
</footer>
AutoRepaint
<px:PXPanel
  AutoRepaint="True" ... />
 Is replaced by the auto-repaint attribute, which indicates (if set to true) that the system should initiate a callback to the server with all the updated data. The server then processes the data and shows the processed data in the dialog box.
<qp-panel
  id="ItemInfo" auto-repaint="true">
...
</qp-panel>
Caption
<px:PXPanel
  Caption="Inventory Lookup" 
... />
 Is replaced by the caption attribute, which sets the caption of the dialog box. The caption is localizable.
<qp-panel
  id="ItemInfo" caption="Inventory Lookup">
...
</qp-panel>
height Is replaced by the height attribute, which sets the height of the dialog box.
<qp-panel
  id="ItemInfo" width="85vw" height="85vh">
...
</qp-panel>
ID
<px:PXPanel
  ID="ItemInfo" ... />
 Is replaced by the id attribute, which sets the id of the dialog box. Use the key value from ASPX for the id in HTML if the id and key in ASPX do not match. This is a requirement to maintain the testability of the UI.
<qp-panel
  id="ItemInfo">
...
</qp-panel>
key Is replaced by the id attribute which sets the id of the dialog box. Use the key value from ASPX for the id in HTML if the id and key in ASPX do not match. This is a requirement to maintain the testability of the UI.
width Is replaced by the width attribute, which sets the width of the dialog box.
<qp-panel
  id="ItemInfo" width="1632px" 
  height="918px">
...
</qp-panel>
Table 2. Obsolete ASPX Controls and PropertiesThe following table lists obsolete ASPX elements that are related to dialog boxes. You do not need to replace these ASPX elements with any HTML or TypeScript elements.
ASPX Control Properties
PXSmartPanel
  • AcceptButtonId
  • AllowMove
  • AllowResize
  • AlreadyLocalized
  • AutoCallBack-Command
  • AutoCallBack-Target
  • AutoReload
  • AutoSize-Container
  • AutoSize-Enabled
  • CallbackArgument
  • CallBackMode-CommitChanges
  • CallBackMode-PostData
  • CancelButtonID
  • CloseButtonDialogResult
  • CommandSourceID
  • DependsOnView
  • HideAfterAction
  • LoadOnDemand
  • Overflow
  • Position
  • RenderVisible
  • runat
  • SkinID
PXPanel
  • ID

qp-panel

The following table lists the properties of the qp-panel control, which represents a dialog box in HTML.

Property Description
auto-repaint Specifies (if set to true) that the system should initiate a callback to the server with all the updated data. The server then processes the data and shows the processed data in the dialog box.
<qp-panel
  id="ItemInfo" auto-repaint="true">
...
</qp-panel>
caption Sets the caption of the dialog box. The caption is localizable.
<qp-panel
  id="ItemInfo" caption="Inventory Lookup">
...
</qp-panel>
class Specifies the CSS classes that should be applied to the dialog box.
height

Sets the height of the dialog box. In most cases you do not need to specify the height explicitly and the height can be calculated automatically.

However, in certain cases where a dialog box contains such elements as a grid, tab, or a rich text editor, you should specify the height explicitly. This is because these elements will otherwise be assigned their minimum possible height if the height is calculated automatically; thus. they may not be displayed correctly on the UI.

The height is set by using pixels (px) or the viewport height (vh).

<qp-panel
  id="ItemInfo" width="85vw" height="85vh">
...
</qp-panel>
width Sets the width of the dialog box. The width is set by using pixels or the viewport width.

The pixel is the preferred unit. If there is enough space, the dialog box occupies the specified width in pixels. If there is not enough space, the dialog box occupies 95% of the screen width (that is, the browser window width).

<qp-panel
  id="ItemInfo" width="1632px" height="918px">
...
</qp-panel>