List-Detail View-Buttons

Description

Add buttons for the List Detail View - a genie will allow you to select Save, Undo, Synchronize, et. buttons.

Discussion

The List-Detail View-Buttons genie can be used to insert pre-defined buttons into the component. The buttons operate on a specific List Control in the component. The available buttons are:

Button
Description
Save

Saves the edits made to the Detail View back to the List.

New record

Opens the Detail View for creating a new record.

Delete record

Deletes the current record.

Undo edits to Detail View

Discards all unsaved edits in the Detail View. Unsaved edits are edits that have not been saved back to the List.

Undo edits to current row

Reverts edits to a row (or restores a deleted a row) in List control that has been modified locally but has not been synchronized to the server.

Synchronize

Pushes all edits from the List to the server.

Synchronize current row

Pushes edits to the currently selected row in the List to the server.

Synchronize all

Pushes edits from all Lists in the component to the server.

Refresh List

Refreshes data in the List by fetching all rows in the List from the server.

Refresh List (incremental)

Performs an incremental refresh of the data in the List. Only fetches records that have changed since the last time the List was refreshed.

Show data in List

(Used for debugging only) Shows the data in the current row fo the List in a placeholder specified in the List builder for 'debugging' information.

Delete List Storage

(Only applies if a List is set to persist 'edits' not 'fulllist') Deletes the LocalStorage keys (or files if the List is persisted to the file system) used for persisting the List data.

Dump stroage data

(Used for debugging only) Dumps the contents of the List storage (either files in the file system for Cordova applications or LocalStorage) into a DIV in the component and to a file on the Server.

images/lspb.png
The list-detail part-buttons genie.

After choosing the List control that has a Detail View, one or more buttons for the selected List can be inserted into the UX Component. Alpha Anywhere will automatically generate the JavaScript required for each selected button.

images/lspb2.png
The resulting buttons from the checked boxes in genie.

Create a Detail View that uses the List-Detail View-Buttons

  1. In the UX Builder on the UX Controls page open the Data Controls menu. Click on the [TextBox] option. Give the textbox the name 'ContactName' and the label 'Contact' and click OK.

    images/ldvb.png
  2. Add a second textbox control to the component. Give this textbox the name and label of 'Address'.

    images/ldvb2.png
  3. Add a third textbox to the component. Set the name and label for this textbox to read 'City'

    images/ldvb3.png
  4. Add a fourth textbox with the name and label 'Country'.

    images/ldvb4.png
  5. Highlight all of the textbox controls in the controls tree. Open the 'Containers' menu and click on the [Container] option.

    images/ldvb5.png
  6. From the 'Container Type' list select the 'None' option and click OK.

    images/ldvb6.png
  7. Highlight the [Container End: CONTAINER_1] tag in the controls tree. Open the 'Data Controls' menu and click on [List] to add a list control.

    images/ldvb7.png
  8. Highlight list control. In the properties list on the right click on the 'List properties' property in the List Properties section to open the List Builder.

    images/ldvb8.png
  9. On the List Builder's 'Data Source' pane set the 'Data Source Type' to be 'SQL'.

    images/ldvb9.png
  10. In the SQL Data Source properties section click the [...] button next to the 'Connection string' property and build a connection string to the 'Northwind' database.

    images/ldvb10.png
  11. Click the [...] button next to the 'Table name' property. Select the 'Customers' table from the list of tables in the Northwind database.

    images/ldvb11.png
  12. Click the [...] button next to the 'Field list' property. Select the 'ContactName, Address, City, and Country fields and click OK.

    images/ldvb12.png
  13. Open the 'List Layout' pane. Use the blue arrow to move the four data fields from the 'Available Fields' list to the 'Columns in List:' section.

    images/ldvb13.png
  14. Open the List Properties pane. In the 'List Properties' section check the 'Has Detail View' checkbox.

    images/ldvb14.png
  15. Open the Detail View pane. In the Detail View Properties section set the 'Detail view type' property to be 'Container'.

    images/ldvb15.png
  16. Set the 'Detail view container' property to be 'CONTAINER_1', this is the container that holds all of the textboxes. Click OK to close the List Builder.

    images/ldvb16.png
  17. Highlight the [Container End: CONTAINER_1] tag. Open the 'Defined Controls' menu and select the 'List-Detail View-Buttons' option.

    images/ldvb17.png
  18. In the 'List-Detail View-Buttons' genie highlight 'list1'. Check the 'Save', 'New record', 'Delete record', and 'Synchronize' checkboxes and click OK.

    images/ldvb18.png
  19. The component should now look like this:

    images/ldvb19.png
  20. Run the component in Live Preview. Highlight a row in the List to display the Detail View.

    images/ldvb20.png
  21. Edit the Detail View and click the 'Save' button. The row in the list control should appear dirty.

    images/ldvb21.png
  22. Use the Synchronize button to add the changes to the list control. This will save the edits on the server.

    images/ldvb22.png