Okay, an Event has happened! You’ve clicked a button, or clicked in a text box, opened a dropdown, whatever has happened, you triggered an event.
Great! Now what? As we discussed, Actions are now launched because of that Event.
And because you are designing the screen, you decide what Actions take place. You can have one action, or multiple actions, but it’s important to remember they’ll happen in a sequential order. Actions occur one after another.
Let’s illustrate this in an example. Below is a blank screen with one section in it. It currently does nothing.
So let’s give it a button. I will drag one from the Insert Controls panel into the empty section. Perfect. It will look like the image below.
Now actions cannot happen unless an Event is triggered. Before we can add actions to the button, we need to choose the event the actions will go into.
To find the events for the button, click the down arrow ▼ on the button itself to open up a menu.
Note the thunderbolt icon? That's an event. Unsurprisingly, there is only one event, and that is the Click Event.
NOTE: The thunderbolt icon indicates an Event.
Hopefully, understanding this event is straightforward: the Click event occurs when a user on your screen clicks the button.
Now we need to add actions to when someone clicks the button. In order to do this, we will edit the Click event by clicking on the "thunderbolt Click" option.
When you select this, the Action Editor pop up. This is where you can now add as many actions as you wish to this Click event.
The Action Editor is split into two parts:
- Action Set - On the left is a list of actions in this event.
- Action Preferences - On the right is a pane that will change depending on what action is selected.
From here, you have a number of actions to choose from, but we’re not going to list every action in Method right here - that’s what the List of Actions is for.
For our purposes, let’s make this button do something simple, like display a Hello message. See the search bar? I'll search for the action Show Message and then select it!
When you select Show Message, that action will show up on the left list. That means this action will run when the button is clicked! On the right, you can configure the Show Message action.
I'll fill it in with:
- Title: "Hello Message"
- Message: "Thank you for clicking the button"
The Internal Note is worth including, because it allows you to keep track of what your action is designed to do. This might not sound like a big deal, but believe us - when you get to building controls with maybe tens of actions associated with them, it’s helpful to know what each was meant to do. Also, if anybody else is working on your app, they’ll have a road map to what you were intending to do as well!
Actions are automatically saved, so once complete, I'll close the action editor with the Close button at the top. I will then close the design mode of the screen and give my button a try! It will display our message:
Our button works! So what happens?
- User clicks the button.
- This fires off the button's Click Event.
- This event launches the actions configured inside of it.
- The only action inside of it is the Show Message action.
- The Show Message action shows the Hello Message.
It’s that simple.
Creating more complicated action series for controls is really just building on these basic principles, which we will explore in the Mission section. And, for a full list of actions available in Method, check out the List of Actions.