Dev Space
Customize and extend the power of Alteryx with SDKs, APIs, custom tools, and more.
@bryanbumgardner at this time, you won't be able to do any "doctoring" or "beautification" on the UI of Alteryx App when running it in the gallery. The Gallery has it's own styling components, which cannot be altered/overwritten (yet, at least) with the HTML GUI SDK, or any custom HTML development.
You can, however, create your own web app (and UI) that uses whatever styling you like. This "hybrid" web app could then make use of the Alteryx Gallery APIs to integrate a back-end for the app that provide the interface with data via simple http requests (AJAX, or other modern http request libraries). I've actually done this a few times for some Alteryx apps when I want the customer to be able to run multiple times without the hassle of reloading Gallery UI (which can be sluggish when you need to run an app quickly, multiple times).
Here's the general order of operations:
- Develop and publish the Alteryx App just like you normally would.
- Get the application ID for the app.
- This is most easily found at the end of the app's Gallery URL
https://gallery.alteryx.com/#!app/New-York-Times/5aa5908a0462d716e8cb1e63
- This is most easily found at the end of the app's Gallery URL
- Develop an alternative, custom interface (the "hybrid" web app)
From here, you'll build the front end UI however you please, and leverage the Gallery API's to:
- Get metadata (if necessary)
// returns the questions for the given Alteryx Analytics App [GET] https://alteryx.company.com/v1/workflows/{appId}/questions/ - Execute the app & get the generated Job ID
// Queue an app execution job. Returns the ID of the job. [POST] https://alteryx.company.com/v1/workflows/{appId}/jobs/ // example POST body for any inputs { "questions": [ { "name": "userFaveTeam", "value": "Tennessee Volunteers" } ] } // example response { "id": "theReturnedJobId", "appId": "5aa5908a0462d716e8cb1e63", "createDate": "Date", "status": "Running", // or Completed... "disposition": "None", // or Success, Error... "outputs": {}, // returns outputs from the job, if available "messages": {} } - Poll Job's status
// returns the status of given Job ID [GET] https://alteryx.company.com/v1/jobs/{jobId} // response structure { "id": "", "appId": "", "createDate": "Date", "status": "", "disposition": "", "outputs": {}, "messages": {} } - Retreive results (when Job ready)
// returns the output for a given Job [GET] https://alteryx.company.com/v1/jobs/{jobId}/output/{outputId}
At this point, you'll want to view the documentation for instructions on receiving the output. You can specify content type JSON or XML, ask for attachments, etc.
https://gallery.alteryx.com/api-docs/#!/workflows.json/GetOutputFileGET
IMPORTANT
You need to make sure that your inputs are properly mapped between your UI, API calls and the App's interface tool configs. For example, you'll want to first give your interface tool a semantic name:
The default name annotations are bad (Left) ... use a more semantic name without spaces or weird characters (Right)
Then, your HTML might look like this for consistency:
<form id="appInterface">
<!-- user input -->
<label for="userFaveTeam" class="myLabelClass">Enter a favorite team:</label><br />
<input type="text" name="userFaveTeam" id="userFaveTeam" class="teamInputClass" value="" placeholder="Tennessee Vols"><br />
<!-- Execute -->
<a href="#" onclick="executeApp();" id="executeApp" class='myButtonClass'>Execute</a>
</form>
And then your POST, again, would look like this
// get user input value however you please
// I really dislike jQuery...but nonetheless
var userTeam = $( "#userFaveTeam" ).val();
// Queue an app execution job. Returns the ID of the job. [POST] https://alteryx.company.com/v1/workflows/{appId}/jobs/ // example POST body for any inputs { "questions": [ { "name": "userFaveTeam", "value": userTeam } ] }
Hopefully this helps you get started, if this is the route you'd like to take. I'll see if I can't contruct a starter project template - let me know if you're interested.
Cheers
