How raise app-global UserEvent from JavaScript module

Per the documentation I declare the app-global UserEvent at the root of the app:

	<Router ux:Name="router" />
	<UserEvent ux:Name="michelle" />
		<Navigator DefaultPath="some">
			<SomePage ux:Template="some" router="router" />

Question ONE

Not covered in the documentation there is a need to raise it in a module, say Modules/jsCode.js:


but of course that fails.

How should I go about this, please?

Question TWO

Given this statement:

Where we place our UserEvent is important, since a node has to be in its subtree to raise or handle it.

I’m at a loss why even an arbitrary page (Pages/SomePage.js) can’t raise it:


Source line: michelle.raise();

JS stack trace: ReferenceError: michelle is not defined

Threw together a little example that should explain things.

	<UserEvent ux:Name="Michelle" />
	<UserEvent ux:Name="John" />

	function michelleRaised(args) {
		console.log("Michelle was raised with: " + JSON.stringify(args));
	function johnRaised(args) {
		console.log("John was raised with: " + JSON.stringify(args));
	module.exports = {
		michelleRaised: michelleRaised,
		johnRaised: johnRaised
	<OnUserEvent EventName="Michelle" Handler="{michelleRaised}" />
	<OnUserEvent EventName="John" Handler="{johnRaised}" />

	<Panel ux:Class="SomeButton">
		<UserEvent ux:Dependency="eventToRaise" />
		<string ux:Property="Label" />
		function raiseDependency() {
			eventToRaise.raise({what: "strict discipline"});
		module.exports = {
			raiseDependency: raiseDependency
			<RaiseUserEvent EventName="Michelle">
				<UserEventArg Name="what" StringValue="love and care" />
			<Callback Handler="{raiseDependency}" />
		<Text Value="{ReadProperty Label}" Alignment="Center" TextColor="#fff" />
		<Rectangle Color="#18f" CornerRadius="2" />

	<SomeButton Width="128" Height="56" Label="Raise things" eventToRaise="John" />
  1. You can raise a global (defined at App level) UserEvent from anywhere by using RaiseUserEvent in UX.
  2. From JS, you can raise events by their ux:Name, which means that they need to be either defined in the component-local scope, or passed in via ux:Dependency. Note that this applies not only to events.

Hope this helps!