Alpha Anywhere Advanced Topics - Volume 1

1. Create a new, blank UX Component.
2. Define a data series of the first letters of the companies in the Customers table:
1. In the Design left-side panel, click Properties.
2. In the Properties pane, locate Data Series. Add a new Data Series.
3. Enter the name FirstLetters.
4. Edit the series definition. In the Data Series Builder window:
1. Data Source Type: SQL.

3. Define the SQL Data Source as shown here:
   
   
4. Click OK to exit the Data Series Builder.
   
   
3. Add a Slider control for selecting a letter of the alphabet (which will be the first letter of a company’s name), and assign the following Properties values to the control:
1. Name: letterSlider.
2. No Label.
3. Position (for Label): None.
4. Default value: A.
5. Under Slider Properties – Slider data type: Character.
6. Method for specifying values: DataSeries.
7. Data series mapping: Choose the data series FirstLetters, and for the Sub-series choose Index.
8. Mark the checkbox for Show slider message.
9. For the Slider message, enter Company starts with, and then the placeholder {value}.
10. Slider message style: In the Style Editor, set Text Alignment to center.
11. Slider message position: Above.
4. Save the Component with the file name RevenuePieChart.
5. In the Design left-side pane, click Properties, and define an argument to use a value from letterSlider to look up companies:        
1. Argument name: whatLetter.
2. Data type: Character.
3. Choose Set value at Run-time.
4. Value: {letterSlider}.
6. After letterSlider, add a Textbox control to temporarily store and display a company’s CustomerID field.
7. Name the control customerIDHolderBox.
8. Define a dynamic Data Series of companies whose names begin with the value in the argument whatLetter. Defining a Data Series at Component level makes it available to all controls in a Component:
1. In the Design left-side panel, click Properties.
2. In the Properties pane, locate Data Series. Add a new Data Series.
3. Enter the name companyNameSeries.
4. Edit the series definition. In the Data Series Builder window:
1. Data Source Type: SQL.

3. Define the SQL Data Source as shown here:

The complete SQL statement is:

SELECT CompanyName, CustomerID

FROM Customers WHERE Left(CompanyName, 1) = :whatLetter

ORDER BY CompanyName

3. Click OK to exit the Data Series Builder.

9. Save the Component.
10. Add a Spin List control that will display the companyNameSeries:
1. Name companyNameSpin.
2. No Label.
3. Method for defining list: DataSeries.
4. Data series mapping:

1. Display value: companyNameSeries.CompanyName.
2. Stored value: companyNameSeries.CustomerID.

5. Un-mark Add blank item to list.

Along with the instructor, define an Action for the Spin List.

6. Define a function to verify that the user stopped moving the Spin List:

1. For the Spin List, click OnSelect.
2. In the script window, enter the following 4 lines (the second line is broken here, but not in the script window):

setTimeout(function() {

{dialog.object}.setValueFrom
'customerIDHolderBox','companyNameSpin');

//line above divided to fit in margins

} , 300

)

Observe Alpha Anywhere’s script prompting.

What do the parts of the script mean?

• setTimeout( – a standard JavaScript method that has one function wait before proceeding with the next. It has two arguments: the function, and the number of milliseconds to wait.
• function () – the method must call a function.
• { – the JavaScript delimiter for the opening of a function.
• {dialog.object}. – the current UX component. It is enclosed in { } because Xbasic eventually evaluates it.
• setValueFrom – an Alpha Anywhere JavaScript method. Its two parameters are in ( ). To see a list of Alpha Anywhere JavaScript methods, click Insert UX Component method… below the script window.
• } – closes the function parameters.
• , 300 – time to wait, in milliseconds.
• ) – closes the setTimeout method.

Continue working along with the instructor on the next Action and controls.

11. Define an Action so that letterSlider changes the values in companyNameSeries in companyNameSpin using the argument whatLetter:
1. Click on letterSlider.
2. In its Properties pane, click OnChange event.
3. In the script window, enter the following (all on one line, no spaces):

{dialog.object}.refreshDataSeries ('companyNameSeries');

When “current UX Component” (letterSlider) changes, refresh

companyNameSeries.

4. Click OK.
12. Next to companyNameSpin, add a Button control that will (eventually) look up the orders and chart them as a percentage of total sales. For the Button text, enter Show the chart.
13. Below companyNameSpin and the Button, add a Container control where we will place the chart. Change the Container Id to CHARTCONTAINER.
14. In CHARTCONTAINER, add a Static Text control. For its Static text, enter the following (all on one line, no spaces):

<div id="CHARTS" style="width:600px;height:600px;"> Refresh your browser.</br>Google API failed</div>

• This demonstrates use of HTML in a Static Text control.

Now you finish the previous page’s tasks on your own. Then:

1. Define an argument we will use to look up a company’s rows in the Orders table:
1. Argument name: whatCustomerID.
2. Data type: Character.
3. Choose Set value at Run-time.
4. Value: {customerIDHolderBox}.
2. Enclose all of the Component’s controls in a Panel Card control.
3. Save the Component, and display it in Working Preview.