Save Submitted Data to Table(s)

Description

Save the submitted data to one or more tables.

In order to define a 'Save Submitted Data to Table(s)' action it is necessary to first add Data Binding to the component, meaning that the component must be tied to a either a SQL or DBF table defined on the server. The process of adding this action to a server-side event on a data-bound component is described on the "Bind the controls on your UX to fields in one or more existing tables" page in the Data Binding section of the documentation.

 Save Submitted Data to Table(s) Action Properties

 

Save Data
 
After submit action

Specify the action to take after the submitted data has been saved.

Target page

Specify the target page.

Use transactions

Should all of the SQL statements be wrapped inside a transaction? For example, if your Dialog has a Repeating Section so that some of the data is inserted into a 'header' table, and the data from the 'Repeating Section' is inserted into a 'detail' table, the record inserted into the 'header' table will be automatically deleted if an error occurs while entering data into the 'detail' table. Transactions are not supported for .dbf tables. Not all SQL databases support transactions.

Display debugging info

Specify if the SQL statements (for SQL tables), or Xbasic code (for .dbf tables) should be shown. Note: If the 'After submit action' is set to redirect, then you will not see the debugging information (unless there is an error), because control will be redirected to the target page.

Debugging information placeholder

Specify where debugging information should be shown. If you are working in an application that uses Panels, you will typically put a placeholder in the Panel to show debugging information in the appropriate panel. Set to <Default> for the default placement of debugging information.

Global errors placeholder

Specify where global errors (if a commit error that is not specific to a particular field) should be displayed. If you are working in an application that uses Panels, you will typically put a placeholder in the Panel to show Global errors in the appropriate panel. Set to <Default> for the default placement of global errors.

 

After Save Confirmation
 
Show a fade out message after record save

Specify if a confirmation message should be shown after a record is saved. Note that the message will not be shown if the action redirects to another page.

Message text

Specify the text of the confirmation message. This setting appears once the 'Show a fade out message after record save' property is checked.

Placeholder id where message is to be shown

Specify the name of the placeholder where the confirmation message should be shown. To add a placeholder to the component select the [Placeholder] control in the 'Other Controls' section of the toolbox. This setting appears once the 'Show a fade out message after record save' property is checked.

Message duration

Specify the duration of the message in milliseconds. For example, 2000 is 2 seconds. This setting appears once the 'Show a fade out message after record save' property is checked.

Message style

Specify the style for the message. 'Default' will style the message based on the current component style. 'None' will not apply any style. You can add your own styling to the message text itself. This setting appears once the 'Show a fade out message after record save' property is checked.

 

Client-side Events
 
After save

Specify the name of a Javascript function to call after the server-side event that saves the data has completed. The function gets passed as an 'e' object that contains certain properties, including 'recordWasSaved' which is true or false. Note: Event will not fire if the action redirects to another page.

Data to pass to client side event

You can populate the 'e' object that is passed to the client-side 'After save' event with information that is available on the server.

After save succeeded Javascript

Specify the Javascript to execute if the save succeeded. You can use this property as an alternative to specifying the 'After save' Javascript function.

After save failed Javascript

Specify the Javascript to execute if the save failed. You can use this property as an alternative to specifying the 'After save' Javascript function.

 

Server-side Events
 
BeforeRecordInsert Function

AfterRecordInsert Function

BeforeRecordUpdate Function

AfterRecordUpdate Function

BeforeRecordDelete Function

AfterRecordDelete Function

AfterSectionRowRefresh Function

onSQLError Function

Fires when a SQL error occurs after attempting a CRUD operation. Allows you to intercept the error message returned by the database and return a friendlier message.

 

Geography Fields
 
Geocode record

When record is saved should the record be geo-coded? i.e. should a latitude/longitude value be computed for the address?

Location fields ('Geography' or 'Geometry type fields)

When record is saved should a 'location' field (i.e. a 'Geography' or 'Geometry' field) be updated if a longitude or latitude field was edited.

 

Refresh List Controls
 
Refresh List Controls

After data is edited, specify if there are any List controls on the component that you want to refresh so that the data in the List controls reflect the edits that were saved.

List controls to refresh

Specify the ids of the List controls you want to refresh.

 

Store Current Location Information
 
Store location information when record is saved

You can optionally store the location (latitude/longitude) in fields in the record you are editing. The location information is submitted when the Ajax callback is made. To submit location information when the 'Submit' button is pressed, the .Submit() method takes a special flag. For example: submit(",",{getLocationData:true})

Latitude field

Specify the field where the latitude value should be stored.

Longitude field

Specify the field where the longitude value should be stored

Update location field

Specify if the table has a Geography/Geometry field that should be updated.

Location field name

Brings up a dialog that lets you select the location field to be updated. If the field dialog does not show all of the fields in the table, go to the 'Data Binding' pane and click the 'Refresh Table Information' button.

Store data for which operation types

Specify if the current location information should be stored only when inserting a new record, or when Inserting and Updating a record.

 Using the 'Save Submitted Data to Tables' Action in Connection With Security

This guide builds on the 'Validate Web Security Values' action guide. This first guide illustrated how to set up basic username and password capabilities in a component. When a user creates a username and password they sometimes type in additional data to submit to the server. For example, this data might be the users phone-number or first name and/or family name. The 'Save Submitted Data to Table(s)' action can be used to save this data to a separate table from the user's security data. The 'UserName' field can also be used to link both tables, so that the non-security related data can be loaded securely at a later point.

 Build the Component in the Validate Web Security Values Guide

  1. Go to the Validate Web Security Values guide and build the entire component.

  2. The component should look like this:

 Change The Security Table Type to SQL

  1. On the 'Web Projects Control Panel' click on the 'Web Security' button.

  2. Select 'Web Security Configuration' and click OK.

  3. Open the 'Security Policy' tab and click on the [...] button next to the 'Security Table Type' setting.

  4. Select the "Use 'SQL Database'" radio button and click OK.

  5. Click OK to close the 'Web Security Configuration' page. A 'Web Security Tables Genie' will appear.

  6. Click the 'Define Connection String' button.

  7. Click the "Create 'AADemo-Northwind' demo connection string" hyperlink.

  8. In the 'Demo Connection String' dialog select one of the two options and click the "OK - Create a named connection string called 'AADemo-Northwind'" button.

  9. The connection string will be created.

  10. In the Connection String dialog select the 'Use a named connection string' radio button and click the 'Select' button.

  11. Highlight the 'AADemo-Northwind' connection string and click OK and OK again.

  12. In the Web Security Tables Genie click the 'Next >' button.

  13. Click next again to use the default tables to store the security fields. You can define new table names here as well.

 Minor Adjustments to Security Controls

  1. Open the UX Component that you built using the Validate Web Security Values guide. On the UX Controls page of the component highlight the [password] textbox control.

  2. In the properties list on the right scroll down to the 'Data Binding' section and uncheck the 'Updateable' property checkbox.

    It will be necessary to set the fields generated from the password, confirm_password, UserRoles and UserGuid controls as unbound during the 'Data-Binding' part of this guide. In order to be able to do this, these controls can not be marked as 'Updateable' in their individual 'Data Binding' sections on the UX Controls page properties list.
  3. Highlight the [confirm_password] textbox in the controls tree and uncheck the control's 'Updateable' checkbox.

  4. Uncheck the 'Updateable' property checkboxes for the [UserRoles] and the [UserGuid] hidden controls.

 Add a Personal Data Section to the Component

  1. On the UX Controls page open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the page. Give the control the name and label of 'first name'.

  2. Highlight the first_name control and click on the double up arrow in the toolbar to move the control to the top of the controls tree.

  3. In the properties list on the right, in the 'Field Properties' section, click the [...] button next to the 'Validation Javascript' property.

  4. Add the following code to the client side validation for the first_name control. Click OK.

    if(data==''){
    return 'First Name is Required';
    } else {
       return false;
    };
    This is some simple client-side validation that will require the user to enter a first name.
  5. With the first_name control still highlighted, go back to the 'Data Controls' menu and add a second [TextBox] control to the component. Give this control the name and label 'last name'.

  6. Highlight the 'last_name' field and add a third [TextBox] control to the component. Give this control the name and label of [phone].

  7. Highlight the [first_name] field. Open the 'Other Controls' menu and click on the [Static Text] control to add some static text control underneath the [first_name] control.

  8. Highlight the static text control in the controls tree.

  9. In the properties list on the right set the 'Static text' property to be an asterix '*'.

  10. Click the [...] button next to the 'Style' property.

  11. In the 'Style Editor' set the 'Color' property to be 'red' and click OK.

  12. Place [Static Text] controls underneath the [last_name] and [phone] controls. Set the 'Static text' property of both controls to be '*' and set the 'Style' property's 'Color' setting to be 'red' as well.

  13. Add a forth [Static Text] control, underneath the static text asterix under the [phone] control. Set the 'Static text' property of this control to read '*Required Fields' and set the control's 'Syle' property's 'Color' to be 'red'.

  14. Highlight all of the most recently added controls. Open the 'Containers' menu and click on the [Frame] option to add a frame container around the controls. Give the Frame the name 'Personal Data'.

  15. The complete controls tree:

 Data Binding

  1. In the UX Builder's main menu open the 'Data Binding' page and click the 'Create new table(s) to match the controls on your UX component' hyperlink.

  2. Open the 'Step 1 - Define Table Aliases and Fields' tab. In the 'Logical Dialog Sections' highlight the <Top Level> section. Click the 'Add' button in the section's 'Properties' area.

  3. Name the new table alias 'RegisteredUsers'.

  4. View the 'Fields in Logical Section'. Hold down the 'Shift' button and click first on the 'first_name' field and then the 'user_name' field to highlight the 'first-name', 'last_name', 'phone', and 'user_name' fields.

  5. In the field 'Properties' area on the right click the 'Set...' button next to the 'Table alias' textbox. Select the 'RegisteredUsers' alias.

  6. Set the 'Size' of all of the controls to be '30' characters.

  7. Open the 'Step 2. Define Table Properties' tab. In the 'Table Aliases' tree highlight the 'RegisteredUsers'

  8. In the 'Table Properties' on the right set the 'Table name' to read 'RegisteredUsers'.

  9. In the 'Global Table Properties' click the dropdown button next to the 'Table type' property. Select SQL.

  10. Click the [...] button next to the 'Connection string' property.

  11. Click the 'Used a named connection string' radio button and click the 'Select...' button. Define a connection to the 'AADemo-Northwind' database. Click OK

  12. Open the 'Step 3. Create table(s)' tab. Click the Create table(s) button.

  13. The table will be created. Click Close.

  14. On the 'Data Binding' page click the 'Bind the controls on your UX o fields in one or more existing tables' hyperlink; then click the 'Bind UX Component Controls to Table Fields' button.

  15. The 'Bind Controls to Fields' dialog will open. Hold down the 'Shift' key and click with the mouse on both the 'password' field and the 'UserGuid' field to highlight the 'password', 'confirm_password', 'UserRoles', and 'UserGuid' fields. Click the 'Set selected fields to '*unbound' hyperlink at the bottom of the dialog.

  16. Click OK and OK again.

 Implement the 'Save Submitted Data to Tables' Action

  1. Expand the 'Events' menu and open the 'Server-side' page.

  2. You should already have defined three events in the Server-Side Events list. Highlight the 'afterDialogValidate' event.

  3. Place the mouse cursor inside the 'afterDialogValidate' event definition. above the previously defined 'Save Web Security Values' action. Click the 'Action Scripting' button in the toolbar.

  4. In the 'Select an Action' dialog highlight the 'Save Submitted Data to Table(s)' action and click OK.

  5. Specify the action's name and click OK.

  6. In the 'Save Submitted Data to Tables' property settings click the dropdown next to the 'After submit action' property in the 'Save Data' section. Select the 'Enter another record' option and click OK.

  7. In the afterDialogValidate definition add the following code around the 'Save Web Security Values' action.

    if rtc.flagRecordWasSaved
    end if
    This will save the data to the registered users table. If you look at the variables exposed by the action, there is one variable that exposes a flag to indicate that the record was saved. This will be false if the data was not saved for some reason. We don't want to save the security data if the personal data was not saved. If the flag is true then the security data can be saved.
  8. The afterDialogValidate definition should look like this:

  9. Run the component in Working Preview and register some example users, filling in both the Personal Data section and the Security section. Then Click 'Submit'. If there are no validation errors the new user's data should now have been saved to the new 'RegisteredUsers' table.

 Viewing the Entered Personal Data

  1. Create a new UX Component. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [List] option to add a list control to the component.

  2. Highlight the list control. Scroll down the properties list on the right and click the [...] button next to the 'List properties' property. The List Builder will open.

  3. On the Data Source pane set the 'Data Source Type' to be 'SQL'.

  4. Click the [...] button next to the 'Connection string' property.

  5. Create a connection string to the AADemo-Northwind database.

  6. Click the [...] button next to the 'Table name' property. In the 'Select Table' dialog highlight the 'RegisteredUsers' table and click OK.

  7. Click the [...] button next to the 'Field list' property. Check the 'FIRST_NAME', 'LAST_NAME', 'PHONE', and 'USER_NAME' fields. Click OK.

  8. Click to open the List Layout pane. Use the blue > arrow to move the FIRST_NAME, LAST_NAME, PHONE, and USER_NAME fields from the 'Available Fields' list to the 'Columns in List'. Click OK to close the list builder.

  9. Run the component in Live Preview. The list should display the personal data that was saved to the 'RegisteredUsers' table.

See Also