Filtering a Grid with a UX Component
Description
One of the most common tasks a web application can perform is to collect the values of one or more variables, then use this data to display a filtered view of a table.
Creating a Grid Component for the Alpha Anywhere Customer Table
Create a grid component based on the Northwinds Customer table.
Use the AADemo-Northwind connection string, which can be created from the AlphaDAO Connections dialog when configuring the AlphaDAO data source for the Grid Component.
Display the Grid > Query page:
Select the "AADemo-Northwind" connection string
Choose the "Customers" table.
Set the Order By to "Country, City"
Display the Grid > Fields menu.
Select the "CustomerID", "CompanyName", "ContactName", "Address", "City", "Region", and "Country" fields.
Click File > Save as and name the grid component "Customers".
Click the "Save Page" button to create a new A5W page with the Grid component embedded in it.
Select "Automatically inherit page background from the Component Style"
Check "Open page in HTML editor after saving?"
Click "Save Page" to continue.
Enter "Customers" for the file name and click Save.
When the page opens in the HTML Editor, add a title and center the page elements. For example:
<body class="page"> <!--Alpha Anywhere Temporary Code End --> <h1 style="text-align:center;color:orange;font-weight:normal;">Customers</h1> <!-- Any text that you want to output above the component goes here--> <%A5 ?x_out.Output.Body.Search_HTML %> <%A5 ?x_out.Output.Body.Grid_HTML %> <%A5 ?x_out.Output.Body.DetailView_HTML %> <%a5 ?a5dialogHelper_generateCORSHeaders() %> </body>Save the page.
Click the 'lightning' icon and the result should look something like this:
If the 'lightning' icon is disabled, it means the Development Server is not running. To start the Development Server, go to the Web Projects Control Panel and click the Development Server button to start the server (it will have a red icon if it is not running.)
Setting a Variable in a UX Component
The next step is to create a UX Component with a drop down list box control. The control is populated with a list of the unique state values (from the Bill_state_region field) found in the Customer table.
Create a UX component with a DropdownBox control.
Set the DropdownBox control's variable name to "country".
Click the
in the DropDownBox Properties > Choices field.Select "Dynamic"
Data source type > AlphaDAO
AlphaDAO Connection Name > AADemo-Northwind
In the AlphaDAO SQL SELECT Statement, select the "Customers" table and the "Country" field to display.
Click OK to continue.
Set DropDownBox Properties > Height to 6.
Insert a Button.
Change the Button text to "Filter Grid"
In the Button's click event, add a new Open an .a5w page, static HTML page, URL, or PDF document in a pop-up window or DIV action.
Click the
button for the Page URL PropertySelect "Customers.a5w"
Check "Has filter?"
Enter the following for the filter:
Country = '{country}'Click OK to continue.
Set the Target to "Browser Window"
Set the Browser window name to "_blank"
Click OK and save all changes.
Save the UX Component as "Countries"
Click "Save Page" to create a new page for the UX. Name the page "Countries".
In the HTML Editor, click the 'lightning' icon to preview the Countries page in the browser.
Select a country name in and click the "Filter Grid" button. You should see something similar to the image below:
Filtering an Embedded Grid
Alternatively, you can embed the Grid component in the UX Component and use the embedded Grid's Link property to automatically filter the Grid whenever the selected country changes or use Action Javascript to Link or Search the Grid.