Apps-Engine’s UIKit framework contains blocks, block elements, and objects that you can use to create visuals and interactions for your apps within surfaces. The components are built using structured JSON. These UI elements need to be triggered by an action or condition, such as sending a message, using slash commands, or using action buttons.
The building blocks are:
Surfaces
Blocks
Block elements
Objects
The following snippet shows how the UI elements are related:
Surface (Modal, Contextual Bar, Message)
└── Block (Section, Actions, Input, etc.)
├── Block Element (Button, Dropdown, Plain Text Input, etc.)
└── Object (Text Object, Options Object)Within a surface, you can have blocks that contain block elements and objects. Each component contains visual elements you can add to your app’s UI to enhance its appearance. In this section, you will learn about each component in detail.
Interaction parameter details
When defining UI elements, you will need to add some common parameters. The parameters are as follows:
Parameter | Description |
|---|---|
| Set a unique ID for each block and element that you define. This ID is used to determine which block interaction to handle. For example, if you have two separate interactive blocks, giving each a distinct |
| Set a unique ID for each interactive action block and element. This has a similar purpose to Each block can have multiple interactive elements. While the block ID is used for the entire block, the action IDs are used for each interactive element within the block. |
| This determines which app instance receives any potential interactions generated by the user within a block. It is defined at the app level once and applied to every block defined in the app. |
| The trigger ID is used differently from the previous parameters. It is a short-lived session token, like a security measure to ensure that the user triggered the action. This is because we need user consent for the app to interact with the UI. Only then will the client show the UI components. 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. |
Depending on the block and element, any of these parameters may be mandatory or optional.
How this documentation section is organized
References: Here, you will find the definitions and parameters for each UI component. (The topics include Surfaces, Blocks, Block Elements, and Objects)
Examples: This section contains examples of how to include UI components in your app.
You can go over the references or try the examples directly.