Genies for the UX Component

Description

In this article, we'll see how Alpha Anywhere can write data binding code. In Server-side Action Scripting, we see how Alpha Anywhere can generate other server-side actions.

We start by inserting a new control into a UX Component, selecting Create multiple new controls at once, and clicking the Populate list from a table link. In this example we picked the Customer.dbf table from AlphaSports, and left Include data binding information checked.

images/dialog_populate_list_from_customer_with_binding_info.png

After pressing OK, we have all the fields we need. What's more, the field types match the corresponding types in the table. Here we see an automatically generated numeric field type.

images/dialog_automatic_numeric_field_type.png

We also have automatically generated binding information for the field, seen at the lower right.

images/dialog_automatic_data_binding_information.png

The data binding panel of the dialog definition has four actions. We have expanded the descriptions for the two major actions.

images/dialog_data_binding.png

We aren't stuck with the bindings we got from the original table. We can create the tables to match the controls we have in the dialog. This is a three-step process.

images/make_tables_for_dialog_controls.png

In the first step, we define our table aliases (abstract table names) and fields. Here we are setting the lengths of all the character fields at once.

images/define_table_aliases_and_fields.png

The table properties are relatively simple. Here we have chosen SQL, a connection string, and a table name to create on the connection.

images/define_table_properties.png

At this point we can actually create the table or tables, or if the database we need is not available, save the settings for later creation. The settings will be saved even if we create the table.

images/dialog_create_tables.png

Going back to the data binding pane, we can now bind the dialog controls to the fields of the SQL table we just created.

images/bind_dialog_controls_to_table_fields.png

The first step is to specify the tables. These are already set properly, because of the previous steps.

images/dialog_bind_to_table.png

The second step is to bind the controls to the appropriate fields. Again, these are already set properly, because of the previous steps.

images/dialog_bind_controls_to_fields.png

Now we need to actually generate the code. We do that with a server-side action in the afterDialogValidate event handler.

images/server-side_actions_select_an_action.png

We pick the save action and check the debug option.

images/save_submitted_data_to_tables.png

The server-side action goes into the event handler code as

ExecuteServerSideAction("Save Data::save_customer")
images/save_data_server-side_action_script.png

We checked the option to generate SQL debug output, so when we add a submit button and test the dialog we can see the SQL actions.

images/dialog_data_binding_sql_debug_output.png