How do I pass javascript event handler function in UX properties

How-to Discussions
1

For example

In Main.ux

<App>
    <JavaScript>
        function foo(){ / Does some things /};
        function bar(){ / Does some things /};
        function baz(){ / Does some things /};
        function zoo(){ / Does some things /};

        module.exports = {foo: foo, bar: bar, baz: baz, zoo: zoo}
    </Javascript>

    <FancyButton onClick="{foo}" title="FOO" />
    <FancyButton onClick="{bar}" title="BAR" />
    <FancyButton onClick="{baz}" title="BAZ" />
    <FancyButton onClick="{zoo}" title="BOO" />
</App>

in FancyButton.ux

<Panel ux:Class="FancyButton">
    <string ux:Property="onClick" />
    <string ux:Property="title" />
    <Button Clicked="{Property onClick}">
        <Text Value="{Property title}">
    </Button>
    //Some other fancy graphics and animations
</Panel>

Currently there are no compile errors, but the javascript functions are not getting called as I’m sure my code is wrong. Is this supported, if so how can I do this? Or is there a better way of doing this?

2

Hi!

Please see the UserEvent feature: https://www.fusetools.com/docs/basics/creating-components#events-userevent

3

Thanks Anders, userevents does exactly what I needed although I found the documentation incomplete for what I needed. I refered to the numberPad fuse sample from NUMERPAD_SAMPLE to figure out how to expose the userevent to a parent component handler.

Here is the revised code for what I wanted to do for anyone else trying to do the same thing.

In Main.ux

<App>
    <JavaScript>
        function foo(){ / Does some things /};
        function bar(){ / Does some things /};
        function baz(){ / Does some things /};
        function zoo(){ / Does some things /};

        module.exports = {foo: foo, bar: bar, baz: baz, zoo: zoo}
    </Javascript>

    <FancyButton onClick="{foo}" title="FOO" ><onClick Handler="{foo}" /></FancyButton>
    <FancyButton onClick="{bar}" title="BAR" /><onClick Handler="{bar}" /></FancyButton>
    <FancyButton onClick="{baz}" title="BAZ" /><onClick Handler="{baz}" /></FancyButton>
    <FancyButton onClick="{zoo}" title="ZOO" /><onClick Handler="{zoo}" /></FancyButton>
</App>

In FancyButton.ux

<Panel ux:Class="FancyButton">
    <string ux:Property="title" />
    <OnUserEvent ux:Class="onClick" EventName="onClick" />
    <UserEvent ux:Name="onClick" />

    <Button>
        <Clicked><RaiseUserEvent Name="onClick /></Clicked>
        <Text Value="{Property title}">
    </Button>
    //Some other fancy graphics and animations
</Panel