Creating an Alteryx Analytic App with user interface controls
My previous blog post showed how to create an iterative macro in Alteryx. This blog will look at how you call that iterative macro from within an “Analytic App” as well as creating dynamic inputs to the Analytic App and how the app can automatically open Tableau once the iterative macro has finished running and connect to the data the macro produced.
Dynamic Inputs to the Analytic App
It is possible for the user of an Analytic App to provide data to the app via a variety of user interface controls, such as drop-down lists, check boxes, list boxes and so on. These can all be found in the Interface section of the Alteryx toolbar:
This app uses two Text Box inputs to the allow the user to provide the following details:
- flickr ID – this is a unique identifier that every flickr account holder has
- flickr API key – this can be obtained from free from flickr.com
These two fields are fed into a Text Input tool and make up parameters in the initial URL string that is used to call the API. Below is the configuration for the first Text Input:
When you first bring one of the Alteryx Interface input tools to the canvas and connect it to another tool, Alteryx automatically adds an Action tool in between them to allow you to configure how the input tool should pass its value (provided by the user) to the tool in the workflow – i.e. which field should be updated, for example.
Below is the configuration for the Action tool connected between my first Text Box and Text Input tool:
I’ve selected “Update Value” as the action type, as I want the value that the user enters to update the value in the Text Input tool (which will then feed into the macro).
I’ve also selected which value in the Text Input tool I want to update – in this case, the ‘user_id’ field. Be sure to select the “value” identifier and not the “Field@name” identifier though, as we don’t want to modify the header name of the field, just the actual value in that field.
Note, all the 5 values have defaults pre-set. These defaults are picked up from the Text Input tool and are not the default text values entered into the Text Box tool. Below is configuration for the Text Input tool with the two default values highlighted that the user can change with the two Text Box tools in the App:
The second Text Box configuration for the API key works the same way as for the User ID.
The constructed URL for the API call is then fed into the iterative macro, the details of which are covered in my prior blog post.
Automatically Opening Tableau:
Once the macro has completed the output comes out of the macros and is fed into a Run Command tool. This tool is configured to do three things:
- Output the data from the workflow into a .TDE file
- Open the program Tableau
- Pass a parameter of a filename when opening Tableau so this file is opened
The configuration of this tool is shown below:
Pre-building the Tableau visualisation
For the Run Command to be able to pass a parameter of a filename to an existing Tableau workbook (.TWB) that file must already exist. Therefore, prior to adding the Run Command to the workflow, I previously had a regular File Output tool set to output a .TDE file as shown below:
This TDE could then be opened manually in Tableau as normal and a dashboard built using the data from the flickr API. The File Output can then be removed and replaced with the Run Command (as show earlier), which is configured to output the data to the same file, overwriting what was previously in the file, thereby updating the data source for the dashboard.
Configuring the App Interface
Once you’ve added interface elements to your App that the user will see, it useful to then add some instruction and visual elements to help the user use your App. Alteryx provides an Interface Designer to add these elements and this is accessed from the View menu and selecting Interface Designer. The Interface will be pre-populated with the Interface elements that are in your workflow (in this case, 2 Text Box inputs); to help the user I have also added some instructions along with a link to a website where the user can lookup their flickr ID if they do not know it. The Interface Designer is shown below:
And here is the finished design as it appears to the user when run with a relevant image added on the left:
Resources
The flickr API resource webpage
The getPublicPhotos method webpage