How to show an action from a widget?

[jen_at_haverstack]

I've developed a widget that is launched from an action and the widget shows a form that collects some data. For example, this widget collects an entity ID selection from a drop-down menu:

The Submit button creates an `ftrack.Event` object with the topic of 'ftrack.action.launch' and the appropriate data to launch another action, publishes this event, and closes the widget window. On my event listener I can see that the action is being launched and that it is generating the correct data to show a form, but the form never shows up in my browser.

My hunch is that when I jump from an action to a widget and back to an action again, I'm losing target information about where my browser window is, so the last form doesn't show up. Do you have any idea how I can collect the appropriate information in the widget so that the action launch event that is generated is properly routed?

---
Taking a step back, my specific use-case is that we have developed a number of actions in-house that collect data via forms, but they are missing some UI components that I was hoping to make up for via widgets. For example, an action that needs to collect file browser data would collect the file location via a widget first and then proceed to the rest of the action. (At the moment, users are copy/pasting the file path into a text box for this action.)

[Lucas Correia]

Hi Jen,

For your use case are you looking at obtaining the file path or uploading the file to the server location / storage?

For showing the actions interface, have you tried using the ftrack.action.trigger-user-interface event instead of ftrack.actions.launch? https://help.ftrack.com/en/articles/1040479-events#ftrackactiontrigger-user-interface

I believe the Web UI listens for the trigger-user-interface event, but not for the launch one.

Regards,
Lucas

[jen_at_haverstack]

I am looking to obtain a file path for this particular example, but we have ideas for other kinds of widgets: user selection, task/object selection, etc.

I hadn't considered using `ftrack.action.trigger-user-interface`, but that solves my problem!

Here's a code snippet of a function that will create a user interface form and then pass off the form data plus the widget data to a different action:

function submitActionData(actionIdentifier, selection, data, session) {
  /*
  actionIdentifer: the action ID that you want to pass information to
  selection: the selection that was used to launch the original action widget
  data: a payload object collected from a JavaScript widget
  session: a propertly initialized session object
  */
  // Create the UI items that will appear in the form. This the same format that is used to
  // 'normal' actions: https://help.ftrack.com/en/articles/1040465-actions
  const items = [
    {
      label: "A string",
      type: "text",
      name: "my_string",
      value: ""
    },
    {
      type: "hidden",
      name: "my_hidden_value",
      value: "foo"
    }
  ];
  // Append the data that was collected in the Javascript widget as hidden values of the UI
  for (const key in data) {
  	items.push({
      type: "hidden",
      name: key,
      value: data[key]
    });
  }
  // Create the data object for the event
  const eventData = {
  	items: items,
    actionIdentifier: actionIdentifier,
    selection: selection
  };
  // Create a new event with a topic that will trigger the user interface
  const event = new Event('ftrack.action.trigger-user-interface', eventData);
  // Publish the event to the session
  return session.eventHub.publish(event);
}

When the above function is called from the widget, a new web UI form is displayed. Submitting this form will pass its form data (which includes data collected in the JavaScript widget) to the specified action. In this way we can collect data from the user in a JavaScript widget but then have complex querying or file handling done in Python.

Thanks for your help!

[jen_at_haverstack]

@Lucas Correia When I deployed my code with your suggestion I encountered a problem: the Javascript API doesn't support targeting events, so publishing the `ftrack.action.trigger-user-interface` will generate UI on everyone's Ftrack, not just the user that launched the event.

I didn't notice this before because I had been testing on a staging server. How can this event be fixed so that only the user that triggers the widget sees the UI?

[Lucas Correia]

The documentation could be a bit more clear about this. The JS API doesn't support targeted expressions when subscribing to events.

That is, the following will trigger the callback if the topic matches regardless of what the data is:

session.eventHub.subscribe('topic=my-company.some-topic and data.foo=bar', callback);

  

It should however support publishing events that target specific clients. Try the following:

const event = new Event(
      'ftrack.action.trigger-user-interface',
      eventData,
      {
          target: 'applicationId=ftrack.client.web and user.id="SOME-USER-ID"'
      }
);

Regards,
Lucas

[jen_at_haverstack]

Yes! That worked very well. Since there wasn't an example of this in the docs I assumed it wasn't part of the Javascript API. Thank you!