Adding App Studio Components

Modified on Thu, 19 Dec at 6:27 AM

The App Studio provides a variety of Components, each designed for a specific task, that you can drag and drop onto your interface. By reusing familiar, purpose-built Components, you can reduce time you spend in development and testing processes.

Components are organized by function in the App Studio, making it simple to locate the right one for your specific tasks.

To add a Component to your interface:

From the App Studio Explorer and Components panel, select the Components tab.
Locate the required component and drag and drop it onto the Canvas.

App Studio provides the following interface Components:

Component	Description
Graphical
Text	Adds and positions text.
Image	Adds and positions image files. You can upload files or provide source URLs.
Box	Adds a rectangle for styling purposes.
Chart	Presents the data that you provide as Bar, Line, or Donut charts.
Progress	Displays progress value that you provide as Bar, Line, Pie, or Donut.
Rich text	Adds formatted text with support for styling.
Comms & media
Meeting	Adds a button to join a Meeting from the CafeX Platform.
Chat	Embeds a Chat channel.
Video	Embeds a video file.
Audio	Embeds an audio file.
Assets	Presents a component that contains all of the Workspace Assets.
Asset	Embeds a viewer for a single Workspace Asset.
QR code	Generates and displays a QR code for encoded data.
Barcode	Generates and displays a barcode for encoded data.
Article	Embeds a CafeX Knowledge Base Article.
User interaction
Button	Adds a button that you can assign events to.
Navigation	Adds a component that allows users to click and switch between Pages.
Link	Adds and positions a hyperlink.
Copy	Adds functionality to copy the value to the clipboard.
Data
Table	Adds a Table that displays Data Set content.
Form	Adds a Form that presents inputs on a web form or output as a data panel.
Multi-page Form	Creates a form split across multiple pages.
MPF Navigation	Provides navigation controls for a Multi-page Form.
List	Displays items from a Data Set in a list format.
Card	Adds cards to showcase data.
File upload	Enables users to upload files to the App.
Containers
Tabs	Provides tabs for users to switch between different views or components.
Container	Groups and positions other components relative to each other.
Accordion	Organizes content into collapsible sections.
Carousel	Displays content or images in a sliding format.
Overlays
Modal dialog	Displays overlays for additional information or input, requiring user interaction to dismiss.
Side panel	Adds a collapsible or expandable panel on the side of the interface.
Advanced
HTML	Embeds custom HTML code.
IFrame	Embeds iFrames that you use to embed external resources that allow hosting permission from the platform.
User credentials	Captures and manages user credentials.