We have looked at the various visual elements available in the UIKit module. Now we will learn how to create them in our apps and handle user interactions through examples. Interactions can take different forms. They can be invoked with slash commands, buttons, or automated at regular intervals.
Interaction flow
When a user interacts with any UI components, it triggers other interactions. Based on the UI component being used, the app receives an interaction of the specified type, and the app gets the context of what the interaction was, what data was filled, the inputs provided by the user, and so on.
A typical interaction flow looks something like this:
A user takes an action that invokes an associated trigger.
Your app processes the action.
Then, your app provides the associated response.
This cycle can go on till the final result is achieved.
Handle user interactions and responses
You can create interactions according to your needs. Some available options are:
Slash commands that users can enter to access the app’s features.
Event interfaces and handlers that can be used to execute an action based on a user or system action.
Displaying UI blocks based on a user or system action.
Adding app action buttons that can be used to access app features.
For an app to interact with the UI, we need user consent. To ensure that a user has interacted with the UI component, we can use a parameter called triggerId.
TriggerID—Whenever a user interacts with the app, the app can get a trigger ID, which is like a security measure to ensure that the user triggered the action. Then the UI components will be shown. It will only work if the app has a valid trigger ID issued by Rocket.Chat. User interactions will provide a valid trigger ID.
If a valid trigger ID is not provided, the method call will fail silently, and the desired action will not take place.
In the examples outlined in the next topics, you will find this parameter used for contextual bars, modals, and action buttons.
Typically, you will use multiple elements and interactions in an app to produce the desired results.
Explore the examples in this section and learn how to create visual elements and handle user interactions.