Create a Button that Displays a Window Container

Description

You can use action javascript attached to a button control in order to display a window container.

A window container can be displayed using the Show container window action. Window containers can be used to display maps, dropdown lists, lists, and other control types. Normally the container is hidden until the button with the Show container window action is clicked.

Show a Window Container

  1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the component.

    images/swc2.png
  2. Highlight the textbox control in the controls tree. Open the 'Containers' menu and click on the [Container] option.

    images/swc3.png
  3. From the Container Type list select the 'Window' option. Click 'Insert Around'.

    images/swc4.png
  4. Highlight the closing window container tag. Open the 'Other Controls' menu. Click on the [Button] option to add a button control to the component.

    images/swc5.png
  5. Highlight the button control. In the properties list on the right scroll down to the 'Javascript' section. Click the [...] button next to the 'onClick' property

    images/swc6.png
  6. In the 'Edit onClick Event' dialog set the Editing mode to be 'Action Javascript'. Click the 'Add New Action' button.

    images/swc7.png
  7. In the Select an Action dialog type 'show' into the 'Filter list' textbox. Select the 'Show Container Window' action.

    images/swc8.png
  8. Click the 'Container ID' dropdown on the Display Window dialog. Select the window control that you just defined, WINDOW_1. Click OK, OK, and Save.

    images/swc9.png
  9. Run the component in Live Preview. Click the button and the window will be displayed.

    images/swc10.png

See Also