UserEvents

How-to Discussions
1

Hi guys,

One quick question. I’m using UserEvents in my app. I used it before and it worked just fine, but at this moment it has a strange behaviour.

I have in my MainView.ux the UserEvent declared:

<UserEvent ux:Name="saveEditPlanning" />

And then in the page I want to Raise the event, with one argument:

<RaiseUserEvent EventName="saveEditPlanning">
	<UserEventArg Name="planningSaved" StringValue=“DATA_SAVED” />
</RaiseUserEvent>

And when I want to get the Event:

<OnUserEvent EventName="saveEditPlanning">
	<Callback Handler="{updateData}" />
</OnUserEvent>

function updateData(args){
	console.log("updateData");
	console.log(JSON.stringify(args));
	console.log(JSON.stringify(args.planningSaved));
}

in which the logs show:

LOG: updateData

LOG: {
	"node": {
		"external_object": {},
		"_raw_Parameter": {
			"_subscribers": [null, null],
			"_isLeaf": true,
			"_values": [“…”]
		},
		"_Parameter": {
			"_subscribers": [null],
			"_isLeaf": false,
			"_values": [{
				"args": {
					…
				}
			}]
		}
	},
	"data": {
		"date": {
			"_subscribers": [null],
			"_isLeaf": true,
			"_values": ["Monday, 2 January 2017"]
		},
		… ,
		"planning": {
			"_subscribers": [null],
			"_isLeaf": true,
			"_values": [{
				"args": {
					…
				}
			}]
		}
	},
	"sender": "PlanningDetails"
}

LOG: null

The problem here is that I can’t get the arguments passed when I raise the event, it shows me everything but the argument. And my argument is null.

When I navigate to the page I pass as parameter an object with the data I need to show, which is in this “args”.

Have some of you ever see something like this and know how to fix?

Thanks in advance.

2

I just did a quick test to see if this works or not, and it worked just fine for me. Could you perhaps try to post a minimal reproduction case?

3

Another curious detail is that arg.name also doesn’t seem to exist in your case. It should as far as I can see be equal to the EventName, in your case “saveEditPlanning”…

4

I just noticed something that seemed a bit relevant: if you wrap your function in an Observable, the args doesn’t seem to be propagated as you might expect. So if you’re doing something along those lines (as opposed to just exporting the function directly), this might be your culprit. I don’t think this is a defect though, as I’m not sure how well-defined defined operations like this is.

5

I’m still not able to use the argumentos on UserEvents, still don’t understand why. For some reason in this app I’m not able to do it, but in a older app I built some months ago works.
It is possible that something I’m using in this new app can interfere with the arguments on a UserEvent?

Minimal reproduction case between pages:

MainView.ux

<UserEvent ux:Name=“event” />

Where I want to raise the event with the argument

<RaiseUserEvent EventName="event">
	<UserEventArg Name="message" StringValue="Hello from UX!" />
</RaiseUserEvent>

Where I want to catch the event

<OnUserEvent EventName="event">
	<Callback Handler="{eventHandler}” />
</OnUserEvent>

<JavaScript>
        function eventHandler(arg){
	       console.log(arg.message);
	       console.log(JSON.stringify(arg));
       }

       module.exports = {
	       menuStatus : menuStatus,
	       setMenuStatus : setMenuStatus,
	       activePage : activePage,
	       eventHandler : eventHandler
       }

</JavaScript>

console.log(arg.message); outputs null

console.log(JSON.stringify(arg)); outputs

{
	"node": {
		"external_object": {}
	},
	"data": {
		"menuStatus": {
			"_origin": -115,
			"_subscribers": [{
				"version": 2,
				"active": true
			}],
			"_isProxy": false,
			"_values": ["noMenu"],
			"_beganSubscriptions": true
		},
		"activePage": {
			"_origin": -120,
			"_subscribers": [{
				"version": 2,
				"active": true
			}],
			"_isProxy": true,
			"_values": ["Planning"],
			"_subscriptionWatchers": [{
				"watcherId": 41
			}],
			"_beganSubscriptions": true
		}
	},
	"sender": "EdgeNavigator"
}

But if I create the event, raise it and handle it on the same page it seems to work.

<UserEvent ux:Name="teste" />
<OnUserEvent EventName="teste" Handler="{testeHandler}" />

<Time.PrimaryButton Text="TEST" Margin="40,30,40,0">
	<Clicked>
		<RaiseUserEvent EventName="teste">
			<UserEventArg Name="message" StringValue="Hello from UX!" />
		</RaiseUserEvent>
	</Clicked>
</Tim.PrimaryButton>

<JavaScript>
	function testeHandler(arg){
		console.log(arg.message);
		console.log(JSON.stringify(arg));
	}

	module.exports = {
		testeHandler : testeHandler
	}
</JavaScript>

console.log(arg.message); outputs Hello from UX!

console.log(JSON.stringify(arg)); outputs

{
	"node": {
		"external_object": {}
	},
	"data": {
		"username": {
			"_origin": -4,
			"_subscribers": [{
				"version": 2,
				"active": true
			}],
			"_isProxy": false,
			"_values": ["..."],
			"_beganSubscriptions": true
		},
		"password": {
			"_origin": -5,
			"_subscribers": [{
				"version": 2,
				"active": true
			}],
			"_isProxy": false,
			"_values": ["..."],
			"_beganSubscriptions": true
		},
		"showToast": {
			"_origin": -6,
			"_subscribers": [{
				"version": 2,
				"active": true
			}],
			"_isProxy": false,
			"_values": [false],
			"_beganSubscriptions": true
		},
		"toastText": {
			"_origin": -7,
			"_subscribers": [{
				"version": 2,
				"active": true
			}],
			"_isProxy": false,
			"_values": [""],
			"_beganSubscriptions": true
		},
		"toastColor": {
			"_origin": -8,
			"_subscribers": [{
				"version": 2,
				"active": true
			}],
			"_isProxy": false,
			"_values": [""],
			"_beganSubscriptions": true
		}
	},
	"name": "teste",
	"message": "Hello from UX!"
}

Thanks in advance.