Alteryx IO Discussions

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

AYX UI SDK - Browse for File/Folder error

cmaniquesilva
5 - Atom

Hello,

I'm building a custom tool with the new Python and UI SDK's.

Found very little information on how to achieve this, apart from https://alteryx.github.io/react-comms/#/Utils/JsEvent

The code above fails at runtime since there is no context set.

cmaniquesilva_1-1681832615246.png



There seems to be some mismatch between the currently published documentation and the version of react-comms I'm using (^1.0.0):

cmaniquesilva_0-1681832551312.png


Any pointers?

And by the way, are there any better documentation sources other than https://help.alteryx.com/developer-help/ayx-ui-sdk and the likes?
It's really difficult to find information for anything other than the most boilerplate of things.

Thanks

3 REPLIES 3
DarleneK
Alteryx
Alteryx

Hi Carlos, 

 

We have received a Support Case regarding this How To inquiry as well, regretfully this is not within the scope of Alteryx Support. I hope you get feedback from our Alteryx Dev Community. 

mkhtran
8 - Asteroid

There is sadly no documentation on the JsEvent method. However, I was able to get the following information through some painful trial-and-error, and submitting issue on their GitHub repositories.

 

The base method is `window.Alteryx.JsEvent` which accepts a JSON stringified object with keys "Event", "callback" (sometimes "Callback"), and any other event-specific options.

 

 

window.Alteryx.JsEvent(JSON.stringify({
  Event: "FileBrowse",

  // Both "callback" and "Callback" are set just in case
  callback: "console.log",
  Callback: "console.log",

  // FileBrowse-specific options
  browseType: "File",
  fileTypeFilters: "All Files|*.*"
}))

 

 

The `react-comms` package exports its own `JsEvent` function that acts as a convenient wrapper around the base method. It handles creating a unique callback, and returns a Promise that resolves when the callback is called.

 

 

import { JsEvent } from "@alteryx/react-comms"

void (async () => {
  const result = await JsEvent(
    // Context
    window.Alteryx

    // Event name
    "FileBrowse",

    // Event parameters
    { browseType: "File" }
  )

  console.log(result)
})()

 

 

Note that the signature of this function has been changed in later versions of `react-comms`.

 

 

import { JsEvent } from "@alteryx/react-comms"

void (async () => {
  const result = await JsEvent(
    // Event name
    "FileBrowse",

    // Event parameters
    { browseType: "File" },

    // Context (now optional and defaults to `window.Alteryx`)
    window.Alteryx
  )

  console.log(result)
})()

 

 

When you first create a plugin, the `dev-harness` project may use the older versions of Alteryx packages that most documentation online doesn't use anymore (there's an outstanding PR that addresses this). You may want to upgrade `@alteryx/ui`, `@alteryx/icons`, and `@alteryx/react-comms`. Seems a lot of packages haven't been updated in forever, and I keep getting told there is some sort of overhaul planned with no date mentioned.

 

Note that this function will usually just silently fail (it will never resolve or reject) if you provide wrong parameters, making it a pain to debug and test what works.

 

As for what parameters each JsEvent can accept, I've painfully compiled a number of them here: https://github.com/alteryx/alteryx-ui/issues/25#issuecomment-1721851391

cmaniquesilva
5 - Atom

Thanks a lot for the comprehensive reply!

Hope this gets translated into knowledge base documentation somehow.

Yeah, I agree the components seem flaky, to say the least.

I'll try it out with the information you provided, which I reckon, is as good information as I'm going to get.

Kind regards