In this document and accompanying video we will show how we can take a List Control that is on a UX Component and insert buttons into each row that the list renders, and then define a custom Javascript action for each button.
In this example we are displaying data from the Northwind customer table. Clicking on a button opens up another UX Component showing the data for that row:
(Note: Northwind is a sample Microsoft Access database that is shipped with Alpha Anywhere. It can be found in the 'MDBFiles' folder in the folder where Alpha Anywhere is installed):
Let's take a look at how we modified the List Control definition to include a custom button in the list. Click on the Design tab, then click on List properties:
When the List Builder window opens click on the Fields tab, then the Add Item button at the bottom of the window and choose Button:
Click on the button, then name it. In our example we named it b1. Then click OnClick to define the event that will be executed when the user clicks the button in the list:
When the Edit Javascript window opens we can specify the Javascript that we would like to run. In this Javascript we can see that what is available to us is 'rowNumber' which is the row number that the user clicked on, but because we are using Action Javascript this is not a concern. What we would like to do is open another UX Component and show data for the current row in the list when the button is clicked. First we click on Create/edit Javascript Actions:
Then we define an action called openForm, which is an arbitrary name we gave it. Click Edit Action to see what this action does:
We can see that in our example the openForm action opens a UX Component called UX_customers, and we can specify that we would like the component populated with data from a table. We can also specify that the Primary key source, which determines which data the UX Component will be populated with, should be read from one of the controls on the current component:
Click on Control(s) on Current Component to specify that we want to read the value of the CUSTOMERID from list1 in the List Control (there could be more than one list control on this component), and the CUSTOMERID field:
Click OK, then Save. In the Edit Javascript window click Run a Javascript Action, then choose openForm to insert the Javascript code. Now when the user clicks the button in the list the Javascript code below will run, which in turn will run the Action Javascript to open the UX Component showing the correct record:
Click on the List Layout tab to see that our button, b1, is in the list of Available Fields. Click on it to add it to our list. We removed the Heading from Column Properties to make our list look better:
Click Save, then the Working Preview tab to see that there is no longer a heading above the Button column:
And when we click on the button in any row we see that our Action Javascript opens up another component showing the data for the current row:
What we have shown with this example is that we can put an arbitrary number of buttons inside the List Control and that we can define our own Javascript to execute when the button is clicked. When we define the Javascript for the button we can take advantage of the full power of Action Javascript.