AYX UI SDK - Browse for File/Folder error

cmaniquesilva

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.

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

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

mkhtran

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