Apps-Engine User Interface

Prev Next

Along with using slash commands and handling events, another way to extend an app's functionality is to add user interactions, such as buttons or menus, to perform some action. In this section, we will look at each UI component and examples demonstrating how to use them for your apps.

Building blocks

Apps-Engine’s UIKit consists of visual blocks used to create layouts. Explore the available blocks and how you can incorporate them into your apps. The components adhere to the Rocket.Chat design specifications, so your app does not break the UX continuity for users.

Interactions in blocks

The visual components can be displayed based on user or system interactions. Learn how to handle interactions for optimal user experience. Most interactions can also be responsive to mobile devices, without additional coding.


Explore the following guides to learn about the blocks.

Surfaces

Messages

Send messages, other elements, and interactive blocks.

Contextual bars

Sidebars display contextual information and interactions.

Modals

Pop-up windows display notifications or interactions.


Blocks

Section

Display text and other components.

Divider

Visually separate components with a horizontal line.

Image

Display images.

Actions

Use interactive elements such as buttons, checkboxes, and more.

Context

Display contextual information and other blocks.

Input

Get information from users with input blocks.

Preview

Share short notices with users in rooms.

Callout

Draw attention to important information.

Tab navigation

Display different information in the same space using tabs.

Conditional block

Display blocks based on the client used.


Block elements

Button

Direct the user to take certain actions.

Image

Display images as part of a block.

Overflow menu

Display a button that users can click to view a list of options.

Plain text input

Allow users to enter text information.

Static select menu

Allow users to select an option from a drop-down menu.

Radio button

Allow users to select one option from a list.


Objects

Text object

Define the text to be displayed.

Options object

Indicates one option in a list of selection options for menus.