Events; one of the new Property Types of Component Libraries, are infact the new name for Behaviors. If you've used Behaviors before, you'll likely find they've been migrated to Events. Don't Panic, Events and Behaviors work in exactly the same way!

---

What are Events

Events can be attributed to when something happens in your app. For example, a control is selected, a control has changed value, a screen has become visible, or a screen has become hidden. These are known as Events, and Event Properties allow us to attribute code to these events.

If you haven't used Event Properties in components already, but you have been working with Canvas Apps or Custom Pages, you'll have already worked with Events in the past if your app did anything at all.

Event Properies can be linked to controls within your Component, then from the App side, the maker can specify the code that's executed when the event is triggered. So for example, a Save Button in your component can now be programmed on a per-app basis to take action when the user selects that button.

---

Adding the Event Property

My son loves animals at the moment, and he's started to recite the sounds they make. I thought this would be a great opportunity to demonstrate events, and how we can use Event Parameters as well!

Here's a simple component I've made, we have a Gallery displaying some Animals and a Button. The button's job is to respond to the user the sound of the animal we've selected. However, the plan here is we're going to use a Parameter in the Event Property to return the selected animal sound to the app.

The Gallery's Items code is as follows:

[
    {
        Animal: "Duck",
        Emoji: "🦆",
        Response: "Quack Quack!"
    },
    {
        Animal: "Cow",
        Emoji: "🐄",
        Response: "Mooooooo!"
    },
    {
        Animal: "Tiger",
        Emoji: "🐅",
        Response: "ROAR!!!"
    },
    {
        Animal: "Giraffe",
        Emoji: "🦒",
        Response: Blank()
    }
]

We'll now add our Event Property to the component:

Notice we have a parameter called strResponse, this is going to be exposed to our app only when we trigger the event. This means our App can do whatever the Maker wants with the response, rather than creating an action within our component.

---

Wiring the Event Up

We want our event to trigger when we click the button, so we'll need to add the OnButtonSelect() Event Property from the Component to the OnSelect() Event of the button we want to trigger from.

Button.OnSelect = 'Events Demo'.OnButtonSelect(galAnimals.Selected.Response)

The idea here is we're going to pass in the "Response" property of the Selected Item in the Gallery containing our Animals. This maps the value to the strResponse parameter, which will be exposed to the app in the OnButtonSelect() event property.

It's also important to note we can specify a default value for the parameter as well.

This should mean that if we don't send a value with the event, and our parameter were optional, one will be specified for us:

OnButtonSelect_strResponse = "Error 404 - Sound Not Found"

However as our parameter is required, this does not apply. But we could handle this our own way:

Button.OnSelect = 'Events Demo'.OnButtonSelect(
    Coalesce(
        galAnimals.Selected.Response,
        "Error 404 - Sound Not Found"
    )
)

If you've never used Coalesce, it's a great replacement to If(IsBlank(Val),Val,"That"), one to remember!

---

Implementing in our App

With our component now in app, we can handle the event property we configured before.

Select the component and find the OnButtonSelect() Event Property.

We can add the following code:

App_Component.OnButtonSelect = Notify(strResponse)

Notice in this context, we can reference strResponse, the parameter we configured as part of the Event Property, within our app itself.

This is only accessible within the event property.

So for example, you could have a variable set on button click, and capture the value:

App_Component.OnButtonSelect = Notify(strResponse);
                           UpdateContext({tvSound: strResponse});

---

But what about Event Data Types?

Ah! Our article isn't quite over yet!

Did you notice when we created our event, we had to specify a data type?

Admittedly, I'd never explored the purpose of this until now, but it is interesting...

It turns out the result of the code you enter from your App will actually ingest into your component.

Our Button Event Property is currently a Boolean value, it's expecting the result to be a Boolean. And fun fact, the result of Notify() is actually a Boolean. Actually, a lot of functions in PowerApps output a boolean value.

We can actually work with this as well, let's change the code in the button of the component to handle this:

If(
    !'Events Demo'.OnSelectButton(
        Coalesce(
            galAnimals.Selected.Response,
            "Error 404 - Sound not Found"
        )
    ),
    Notify("Could not make sound :'[")
)

So what we're doing here is, if the result of OnSelectButton() is False, we'll add a seperate notification letting the user know we couldn't process the request.

In the real would you could be making an evaluation at the On Select process that determines what your component does next. For demonstration purposes from our App, we can simulate this behavior by Inverting the result of our Notification.

App_Component.OnButtonSelect = !Notify(strResponse)

And the result:

Likewise we could evaluate the Event as a Text Data Type, and take action if the text = a particular value:

Button.OnSelect() = If(
    'Events Demo'.OnSelectButton(galAnimals.Selected.Response) = LookUp(
        galAnimals.AllItems,
        Animal = "Tiger"
    ).Response,
    Notify(
        "Yo that's a Tiger!",
        NotificationType.Warning
    )
)

---

In Summary:

• Events Properties are triggered by events that occur in your component

• Events Properties are how your Makers can take action from events in your component.

• Event Properties can expose Values from within your Component to your Maker's Apps as Parameters.

• I don't know what sound Giraffes make

• We can use the data type of Event Properties to intercept the behavior of the event based on it's response value from the app.

---

So that's all the Behavior types covered! I hope you've enjoyed these articles as next we're going to look at actually making some components, which will comprise of a new series of articles where we actually build cool stuff that's reusable!