community Alteryx IO Alteryx.com
alteryx Community
Search
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Close
Free Trial

Dev Space

Customize and extend the power of Alteryx with SDKs, APIs, custom tools, and more.
SOLVED

HTML GUI SDK File Browser file type(s)

Rob-Silk
8 - Asteroid
‎12-09-2020 03:08 PM

Hi Everyone,

 

I'm looking to develop a custom tool with the Python SDK and as part of the UI need to provide the user with a file browser to select a file. When I have developed macros and apps in the past I've used the standard file browser interface tool which allows you to set the file types that the file browser displays (i.e. using the "Arbitrary File Specification" setting). I was wondering if there is anyway of achieving the same with the file browse input in the HMLT GUI SDK, rather than the default settings/options that you get.

 

I've had a look at the HTML GUI SDK reference but the file browse widget is not actually referenced, and I've had a look through the js files for both versions 1 and 2 of the HTML shared assets in the Alteryx library runtime data, but couldn't discern a list of potential properties that could be set from this. In desperation, I also tried simply setting the same properties seen in the file browse interface tool XML for the HTML SDK widget (e.g. "{ ... mode: 'FileSpec', fileSpec:'Text Files (*.txt)|*.txt' }") but this didn't seem to work.

 

I know that it is possible to use debug tools on the HTML produced with the HTML GUI SDK but as I have Alteryx on a work laptop without admin privileges, that isn;t currently option for me.

 

Really hoping that someone has some ideas or a solution of how this can be achieved as I am currently out of ideas.

 

Thanks!

Reply
0 Likes

Accepted SolutionSolved! Go to Solution.

2 REPLIES 2
StephenW
Alteryx Alumni (Retired)
‎12-10-2020 01:07 PM

@Rob-Silk 

 

Here's an example from our Publish to Tableau Server tool that limits selections to .tds files.

 

<ayx aria-label="data-source-metainfo-filebrowse" data-ui-props='{type:"FileBrowse", widgetId:"dataSourceFilePath", fileTypeFilters: "Tableau Data Source|*.tds|All Files|*.*", placeholder:"XMSG("Select .tds file...")"}' data-item-props='{dataName: "dataSourceFilePath", dataType:"SimpleString"}'></ayx>

 

Reply
Rob-Silk
8 - Asteroid
‎12-10-2020 03:19 PM

Thanks @StephenW ! This was exactly what I was looking for - I can't believe I tried looking through everything I could find without thinking to look at the existing Alteryx tools for help.

 

For others that come across this thread, the "fileTypeFilters" property worked perfectly for the HTML Shared Assets library 2, but I couldn't get it to work for library 1. Here's the code that I used:

...
<head>
<script type="text/javascript">
    document.write("<link rel='import' href='" + window.Alteryx.LibDir + "2/lib/includes.html'>");
</script>
</head>
...
<ayx aria-label="data-source-metainfo-filebrowse" data-ui-props='{type:"FileBrowse", widgetId:"fbTemplatePath", fileTypeFilters: "Excel Files (*.xlsx,*.xlsm,*.xlsb)|*.xlsx;*.xlsm;*.xlsb|All Files|*.*", placeholder:"XMSG("Select Excel template file...")"}' data-item-props='{dataName: "templatePath", dataType:"SimpleString"}'></ayx>
...

 

Reply