Show UX Component validation errors in popup-window

Description

If a UX component validation error occurs, specify if the error should be shown in a popup-window. Note that UX component validation errors are distinct from field validation errors. UX component validation errors are defined in the 'DialogValidate' server-side event.

 Define Component Level Validation

  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. Give the control the name and label 'number'.

  2. Open the 'Defined Controls' menu. Click on the [Submit-Reset] to add Submit and Reset button to the component. These will help submit entered data to the server to be validated on the server.

  3. In the Events section of the main menu open the 'Server-side' events page. In the list on Server-Side Events highlight the 'dialogValidate' event.

  4. Add the following code to the dialogValidate function's definition.

    function dialogValidate as p (e as p)
    	
    dialogValidate.hasError = .f.
    dialogValidate.errorText = ""
    
    if .not.(e.dataSubmitted.number = "42") then 
    	dialogValidate.hasError = .t.
    	 dialogValidate.errorText = "This is not the correct number"
    end if
    
    end function
  5. Open the UX Properties page. In the 'Validation and Error Reporting' section check the 'Show UX Component validation errors in popup -window' property checkbox.

  6. Run the component in Live Preview. Enter any number into the textbox except '42' and you should see a popup window display the validation error message that you defined in the dialogValidate function definition.

 Sending a Confirmation Message after an Entry is Validated

  1. In the Events section of the main menu open the 'Server-side' page and highlight the afterDialogValidate event. Define the afterDialogValidate function.

    function afterDialogValidate as v (e as p)
    	e.javascript = "alert('This is the correct number');"
    end function
  2. Run the component in Live Preview. Enter 42 into the number textbox. You should see the alert box that you defined fire.