Open a UX as an alternate editing view for current record
- Javascript
- Record Mode Properties
- Target UX Definition Properties
- Refresh UX when Cached Component is Shown Properties
- Populate UX Component with Data from a Table Properties
- Control Map Properties
- Target Window, DIV, Tabbed UI Pane or Panel Properties
- Window Buttons Properties
- Optional Window Parts Properties
- Window Animation Properties
- Client-side Events Properties
- Window Javascript Events Properties
- Tab Pane Javascript Properties
- Ajax Failed/Offline Javascript Properties
- Optimization Properties
Description
Open a UX component in a pop-up window, or in a DIV on the current page, to edit the record currently being edited in the Grid or UX component.
Used with the Grid and UX component
The UX is opened and the controls in the UX are populated with the current value of the controls in the source Grid or UX. WHen the UX component is closed, the values in the UX component are posted back to the row that is being edited. Contrast this action with the previous action, (Open a UX component to Edit Current Record in Grid, or add a new Record). In the previous action, the UX is responsible for saving the Data, so the UX must be bound to tables. However, in this action, the target UX component is typically not bound to tables because the data is ultimately saved by the parent component, NOT the target UX component.
Javascript
{grid.componentName}_X_ACTIONBUTTON_1(this);
Record Mode Properties
- Mode
TIP: If the mode is set to 'EditExistingRecord' you can access the raw data that is loaded into the UX Component in the component's 'onDialogInitialize' event inside this variable: 'e.rtc._data' Choices include EditExistingRecord, EnterNewRecord.
- List control id
Specify the List control that is displaying the record you want to edit.
- Use cached UX Component
Applies only when target UX Component is opened in a Window, DIV, or Dynamic Panel.
When the target UX Component is opened a second and subsequent time, a cached version is used to speed up the display. In some situations you might not want to use the cached version.
IMPORTANT: The 'onDialogInitialize' event will only fire the FIRST time the UX Component is opened. If you want the 'onDialogInitialize' event to fire every time the UX Component is opened, you should turn caching off. If caching is off, the 'onSynchronize' client-side event will fire when the UX Component is opened the second and subsequent times.
Target UX Definition Properties
- UX name
UX name property.
- UX alias
UX alias property.
- Cache UX Component
Should a cached version of the UX Component be used the second and subsequent time it is opened?
- Use cached UX Component
Applies only when target UX Component is opened in a Window, DIV, or Dynamic Panel.
When the target UX Component is opened a second and subsequent time, a cached version is used to speed up the display. In some situations you might not want to use the cached version.
IMPORTANT: The 'onDialogInitialize' event will only fire the FIRST time the UX Component is opened. If you want the 'onDialogInitialize' event to fire every time the UX Component is opened, you should turn caching off. If caching is off, the 'onSynchronize' client-side event will fire when the UX Component is opened the second and subsequent times.
- Show wait message when cached UX Component is refreshed
Applies only when target UX Component is opened in a Window, DIV, or Dynamic Panel.
When the target UX Component is opened a second and subsequent time, should a wait message be shown.
- Wait message text
Wait message text property.
- Wait message icon
Wait message icon property.
- Argument bindings
Specify where the arguments get their values from.
- Override settings
Specify if you want to override in properties in the target component. In V11 and above, you can also set session variables when the target component is opened.
- Override Custom Settings
Specify if you want to override any of the Custom Settings defined in the target UX component.
- Use master style
Use master style property.
Refresh UX when Cached Component is Shown Properties
- Refresh UX when it is re-opened
When a cached UX component is re-opened, should the UX be refreshed? (List controls will be refreshed, and all controls bound to Data Series will be refreshed).
- Javascript on refresh
(Optional) Specify the name of a Javascript function to call when the component is shown.
Populate UX Component with Data from a Table Properties
- Populate UX Component with Data from a table
(IMPORTANT: This property assumes that the target UX Component has been bound to a table). When the UX Component is opened, should it be automatically populated with data from one or more tables? (TIP: An alternative to using this property is to write your own onDialogInitialize event handler in the UX Component). NOTE: If the target UX Component has code in the 'onDialogInitialize' event to load primary keys, this code will NOT be executed when the target component is loaded.
- Primary key source
How do you want to specify the Primary Key of the record with which to populate the UX Component? Choices include SpecifyNow, ControlsOnCurrentComponent, SessionVariable.
- Primary key value
Specify the primary key value. If the Primary Key is more that one column specify values delimited by ||| (three pipes)
- Control(s) on Current Component
Specify the control on the current component from which the Primary Key will be read. If the Primary Key is more than one column, you must select multiple controls. The order in which the controls are selected is significant.
- Session variable name
Specify the name of the session variable that contains the primary key value. If the Primary Key is more that one column specify values delimited by ||| (three pipes)
- Use cached UX Component
Applies only when target UX Component is opened in a Window, DIV, or Dynamic Panel.
When the target UX Component is opened a second and subsequent time, a cached version is used to speed up the display. In some situations you might not want to use the cached version.
IMPORTANT: The 'onDialogInitialize' event will only fire the FIRST time the UX Component is opened. If you want the 'onDialogInitialize' event to fire every time the UX Component is opened, you should turn caching off. If caching is off, the 'onSynchronize' client-side event will fire when the UX Component is opened the second and subsequent times.
Control Map Properties
- Control map
Specify how controls in the current Component map to controls in the target UX Component
Target Window, DIV, Tabbed UI Pane or Panel Properties
- Target
Specify if the page should be opened in a pop-up window, a DIV on the page, a Panel or (if the component is running in a Tabbed UI) in a new Tabbed UI pane. (If you choose the 'Tabbed UI Pane' option, and the component is not running inside a Tabbed UI, it will be opened in a modeless pop-up window). The 'DynamicPanel' option allows you to show the target component in a Panel that is dynamically added to a Panel Navigator. Choices include.
- Target Panel
Specify the Panel Id.
- Parent Panel Navigator
Specify the Id of the parent Panel Navigator. The dynamic Panel will be added to this Panel Navigator.
- Dynamic Panel Title
Specify the title for the Dynamic Panel.
- User can close dynamic panel
(Only applies if the target Panel Navigator has been configured to use a Tab Band) Specify if the label for the dynamically added Panel has a 'close' icon that allows the user to close the dynamically added Panel.
- Target DIV ID
Specify the ID of the target DIV. This DIV can be in the component (for example, in a free-form edit region), or on the .a5w page that contains the component. TIP: If you want to specify a DIV that is inside a freeform edit region in a component cell, use the '{grid.rowID}' placeholder in the DIV id. For example: 'div1_Row{grid.rowID}'. This will ensure that each row has a uniquely named DIV in which the target page can be displayed.
- Target DIV style
Specify the in-line style for the target DIV.
- Can hide target DIV?
Specify the DIV can be hidden (to remove from view the target page after it has been opened in the DIV).
- DIV hide hyperlink
Specify text for the hyperlink that hides the DIV where the target component is shown.
- Window type
Specify the window type. Popup windows will show in a moveable window on the page. Dropdown windows have no title bar and cannot be moved. By default, Dropdown windows open directly below the control that you click to open the window. Note: An Ajax window will NOT be blocked by a browser's internal protection against popup windows.
- Lock overlay CSS class name
Specify the CSS class name to use for the overlay that is displayed behind the window. The overlay prevents the user from clicking on controls that are outside the window. Leave blank, or specify <Default> to use the default style. Specify <Invisible> to create an invisible overlay (has no color, but user is still prevented from clicking on controls off the window). By specifying a class that has a 'background' attribute, you can control the color of the overlay. For example: background: rgba(0,0,0,0) to create a transparent overlay.
- Sub-theme
(Optional) Specify a sub-theme for the window. The sub-theme can select a different pre-defined window 'look'. If you leave this property blank the 'base' sub-theme is automatically selected.
- Window name
Set to <Default> to give the window a default name. If you give the window an explicit name (which must be unique), then you can easily get a pointer to the window to execute methods of the window object. Click the smart field for tips on how to name your window and for information on how to get a pointer to the window object.
- Dock window
Docked windows 'stick' to an edge of the screen and remain in place even when the page is scrolled.
- Dock location
Specify which edge of the screen the window is docked to. Choices include Left, Right, Top, Bottom.
- Allow auto-close of dirty UX Component
Specify if the window should close automatically when the user clicks off the window when the UX Component is dirty. When a window is set to use the 'Dropdown' style, clicking anywhere on the page outside the window will normally cause the Window to close. However, if the UX Component that is shown in the Window is dirty, the window does not close, unless this property is checked.
- Window position
Specify where the window will be shown.
- Dropdown Window position
Specify where the window will be shown.
- Re-use existing window
Specify if multiple modeless windows can be opened, or only a single modeless window.
- Window title
Specify the window title. The window title can contain data from fields in the current record. Enclose field values in curly parens. e.g. Customer - {lastname}. To reference values from a column in a List control use this syntax: {LIST::ListName::ColumnName} (e.g. {LIST::MYLIST1::LASTNAME} )
- Window title show
Specify if the window title should be shown or hidden.
- Window title position
Specify if the window title should appear at the top or bottom of the window. Choices include Top, Bottom.
- Window title direction
Specify if the direction is 'ltr' (left-to-right) (title on left, close button on right) or 'rtl' (right-to-left) (close button on left and title on right). Choices include ltr, rtl.
- Window title has close button
Specify if the window title has a Close button.
- Disable window move
Specify if the window cannot be moved by the user.
- Pane title
Specify the tab pane title. The pane title can contain data from fields in the current record. Enclose field values in curly parens. e.g. Customer - {lastname}. To reference values from a column in a List control use this syntax: {LIST::ListName::ColumnName} (e.g. {LIST::MYLIST1::LASTNAME} )
- Window height
Specify the window height. Use CSS syntax. For example: 3in, 10cm, 200px. If you do not set the height, the window will resize automatically to accommodate the window contents.
- Window width
Specify the window height. Use CSS syntax. For example: 3in, 10cm, 200px. If you do not set the width, the window will resize automatically to accommodate the window contents.
- Window is resizable
Specify if the window is resizable.
- Working message placement
Specify the panel where the wait message should be shown. You should chose a Panel that is currently visible, not a Panel that will be animated into view when the component is rendered.
- Working message uses CSS3 animation?
Specify if the working message should be displayed using a CSS3 animation?
- Working message animation size
Specify the size of the animation in pixels.
- Working message
Specify the text of the message to show in the window while the window waits for its contents to be generated.
- Working message icon
Specify the image to show in the window while the window waits for its contents to be generated.
- Refresh Grid on window close
(Applies only when window is opened from a Grid Component) When the window is closed, specify if the Grid should be refreshed. You can refresh the current row, or all rows in the Grid. Choices include.
- Close UX Component after submit
After the UX Component is submitted, if there are no errors, should the window be automatically closed?
- Submit Parent Component when UX Component is submitted
When the UX Component is submitted, the data in the UX Component is written back into the parent Component (Grid or UX Component). Should the parent Component be submitted to save the changes to the database?
- Refresh Parent Tab Pane on Tab Pane close
When the Tab Pane is closed, specify if the parent component should be refreshed. (Applies only if the parent component is a Grid.)
- Window background style
Specify the inline-style for the window background
- Center window contents - vertically
Specify if the window contents should be vertically centered
- Center window contents - horizontally
Specify if the window contents should be horizontally centered
- Warn before closing if Component in window is dirty
If the Component shown in the window is dirty, should a warning be displayed when the user tries to close the window?
- Has pointer icon
Specify if the window has a pointer icon that points to the element that was clicked to show the window.
- Pointer position
Specify the window edge that has the pointer icon. If you select 'Auto' the most appropriate edge is automatically selected. Choices include Auto, Top, Bottom, Left, Right.
Window Buttons Properties
- Has custom toolbar buttons
Specify if the window has custom buttons in the window toolbar (at the bottom of the window).
- Define buttons
Define the buttons that appear in the window toolbar (at the bottom of the window).
- Buttons in-line style
In-line style for the buttons. TIP: To display the buttons left justified, enter an in-line style of: text-align:left;
Optional Window Parts Properties
- Show top bar
Specify if a top bar should be shown. (Shows above the window body, but inside the body container).
- Top bar HTML
Specify the HTML to show in the top bar.
- Top bar style
Specify the in-line style for the top bar.
- Show bottom bar
Specify if a top bar should be shown. (Shows below the body, inside the body container).
- Bottom bar HTML
Specify the HTML to show in the top bar.
- Bottom bar style
Specify the in-line style for the top bar.
- Show header
Specify if a header should be shown. (Shows above the window body, but inside the body container).
- Header HTML
Specify the HTML to show in the header.
- Header style
Specify the in-line style for the top bar.
- Show footer
Specify if a footer should be shown. (Displays below the body, the bottom bar and below any user-defined buttons).
- Footer HTML
Specify the HTML to show in the footer.
- Footer style
Specify the in-line style for the footer.
Window Animation Properties
- Animation
Specify if the window should be animated when it is shown or hidden. Note: If the window contains an IFrame, which in turn contains a PDF viewer, animation may not work well and should not be used.
- Show animation style
Select the animation method to use when the window is shown. Fade and Slide use methods in jQuery core. Other options require jQueryUI.
- Show animation speed
Specify the animation speed. You can select a pre-defined option (slow = 600 milliseconds, fast = 200 milliseconds), or you can enter an explicit value in milliseconds.
- Hide animation style
Select the animation method to use when the window is closed. Fade and Slide use methods in jQuery core. Other options require jQueryUI.
- Hide animation speed
Specify the animation speed. You can select a pre-defined option (slow = 600 milliseconds, fast = 200 milliseconds), or you can enter an explicit value in milliseconds.
Client-side Events Properties
- Before execute event
Specify the name of a Javascript function to call before the callback is made to open the target component. This Javascript function will take 'go' as an input parameter. 'go' contains all of the settings for the target component to be opened. The purpose of this function is to allow you to override any of the properties of the passed-in 'go' object.
Window Javascript Events Properties
- onInitialize
Specify the Javascript code to execute the first time the window is shown.
- onBeforeShow
Specify the Javascript code to execute before the window is shown.
- onShow
Specify the Javascript code to execute when the window is shown.
- onBeforeHide
Specify the Javascript code to execute before the window is hidden.
- onHide
Specify the Javascript code to execute when the window is hidden.
- onFocus
Specify the Javascript code to execute when the window gets focus.
- onMove
Specify the Javascript code to execute when the window is moved.
- onResize
Specify the Javascript code to execute when the window is resized.
Tab Pane Javascript Properties
- onBeforeChange
Fires before the tab pane changes. If event handler returns true, user can change tab. If event handler returns false, user cannot change tab.
- onChange
Fires when the tab pane is changed.
- onRightClick
Fires when user right-clicks on a tab pane.
- onInitial
Fires when the tab pane is created.
- onBeforeRemove
Fires before a tab pane is closed. If event handler returns true, user can close tab. If event handler returns false, user cannot close tab.
- onRemove
Fires when the tab pane is closed.
Ajax Failed/Offline Javascript Properties
- Timeout setting
(Optional) Specify the time to wait (in milliseconds) for a response from the callback. If a response is not received within the specified time, the Ajax failed message is displayed. The <Default> value is defined by the {dialog.object}.ajaxCallbackTimeout property (which you can change in your Javascript code). The default value for this property is 0 - which means no timeout - wait indefinitely for the server to respond.
- Ajax failed message
This message is displayed in the case of a failed Ajax callback (i.e. the server does not respond). You can specify a Javascript function to call if the Ajax callback fails using the following syntax: javascript:name_of_your_javascript_function
- Offline Javascript
(Optional) Specify the Javascript to execute if the device is offline. Since the device is offline, the Ajax callback is not made. Therefore the code in the 'Ajax failed Javascript' property will not get executed.
Optimization Properties
- Method for opening UX in a PhoneGap or Static HTML application
Normally, this component is opened by making an Ajax callback to the server. In a mobile Cordova application, or a static HTML application, the device might not have a connection to the server and so making an Ajax callback is not possible. In this case you can render a pre-computed version of the target UX component. Choices include AjaxCallback, Precomputed, AjaxIfOnLine_PrecomputedIfOffLine, Dynamic.
- Javascript function
Specify the name of a Javascript function to call. This function should return a string value of 'ajax' or 'precomputed' to specify if the component should be opened by making an Ajax callback or by executing a pre-computed Javascript function that will open the component without making a callback.
See Also