How raise app-global UserEvent from JavaScript module

How-to Discussions
1

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

<App>
	<Router ux:Name="router" />
	<UserEvent ux:Name="michelle" />
        ...
	<ClientPanel>
		<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:

michelle.raise()

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:

michelle.raise();

Source line: michelle.raise();

JS stack trace: ReferenceError: michelle is not defined

2

Threw together a little example that should explain things.

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

	<JavaScript>
	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
	};
	</JavaScript>
	
	<OnUserEvent EventName="Michelle" Handler="{michelleRaised}" />
	<OnUserEvent EventName="John" Handler="{johnRaised}" />

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

	<SomeButton Width="128" Height="56" Label="Raise things" eventToRaise="John" />
</App>
  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!