skuid.events.publish documentation clarification

John Dahlberg

In the documentation for skuid.events (https://docs.skuid.com/latest/en/skuid/api/skuid_events.html#examples), the publish example has the following syntax:

var config = {      doSomething: true  };  var eventDetails = {      direction: 'vertical'  }; 

skuid.events.publish('acme.page.resize',[config,eventDetails]);


In working out a solution, the second input didn't come through.  I was able to get it to work with slightly different syntax, however:

var config = { doSomething: true, direction: 'vertical'
}; skuid.events.publish('acme.page.resize',[config]);


Is there anything else to be aware of in the payload array parameter?

Here's the final working solution:

var filter = {
    filterName:'Name1',
    filterValue:'Value1'
    };
skuid.events.publish("RemoveFilter", [filter], { scope: skuid.constants.EVENT_SCOPES.GLOBAL });

Zach McElrath

John, when you say "the second input didn't come through", can you elaborate on that? Are you using "skuid.events.subscribe" to subscribe to the event, and if so, can you share your code that you're using?

When I subscribe like this:

skuid.events.subscribe("acme.page.resize", function(config, eventDetails) {
   console.log(config);
   console.log(eventDetails);
}); 

And then publish like you were doing initially, everything works as I'd expect:

var config = {    doSomething: true
};
var eventDetails = {
    direction: 'vertical'
}; 
skuid.events.publish('acme.page.resize',[config,eventDetails]);

I get config and eventDetails coming through in the two console logs like I'd expect.

John Dahlberg

I'm using a declarative action sequence to subscribe to the event, the idea being to kick off an action sequence from a link (i.e. from a url or div in a template), but keep the logic declarative by leveraging the action sequence.  This may be a nuance with how the action sequence handles the subscription or not understanding the full structure of the data array of the event api.

I may not have fully picked up on how this is supposed to work, but what I was seeing is that in the example provided in the documentation, two objects are passed into the data array in the publish API.  The action sequence only picked up the first object as an input parameter.  When I switched this to one object with two key value pairs, the action sequence picked up both.

i.e. change:

config = {
        doSomething: true
};
var eventDetails = {

    direction: 'vertical'  };   skuid.events.publish('acme.page.resize',[config,eventDetails]);to:

config = {
    doSomething: true, direction: 'vertical' };  skuid.events.publish('acme.page.resize',[config]);
I figured this might be a minor documentation issue, which took a couple hours to work out, so I thought I would spare others.  Here's a screenshot of the different outputs:


This worked as I would expect:


The action sequence only picks up parameter1:

John Dahlberg

I think I've connected the dots on this.  Is is safe to say that the action sequence is expecting all of the parameters in one object, but that the publication event can be extended when working with the subscribe API?  So you could define your publish action with this type of structure:
skuid.events.publish('EventName',[ 
   {  Parameter1:ParameterValue1,
      Parameter2,ParameterValue2,
      Parameter2,ParameterValue3
   },
{AnotherArgument:ArgumentValue}
]);

Zach McElrath

John, yes that is correct, Event-triggered Action Sequences only pick up the first argument, and the argument is expected to be an object of key-value pairs. When you use the "Publish Event" action, each Parameter that you define will be incorporated as a key-value pair into a single JavaScript object which will be sent to subscribers as a single argument, as you have shown above, e.g. { Parameter1: ParameterValue1, Parameter2: ParameterValue2 }. When you define Event-triggered Action Sequences, you can declare expected Inputs to the sequence, with each Input's Name/Value mapping to the parameter names/values that were published.

When you use the publish/subscribe API via JavaScript, you have more flexibility to publish multiple arguments and have subscription functions pick up on the additional arguments.