Building Blocks

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:

1. Surfaces

2. Blocks

3. Block elements

4. Objects

The following code 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.

Parameter details

When you are defining UI elements, you will need to add some common parameters. The parameters are as follows:

• blockId: Set a unique ID for each block and element that you define. This ID can be used to determine which block interaction to handle.

• actionId: Set a unique ID for each action block and element. This has a similar purpose to blockId as it is used to determine the interaction.

• appId: This determines which app instance receives any potential interaction that might be generated by the user within a block.

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 parameters of each UI component. (The topics include Surfaces, Blocks, Block Elements, and Objects)

• Examples: This section contains examples of how to define UI components and include them in your app.

You can go over the references or try the examples directly.