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:
- Go to the App Studio Explorer and Components > Components.
- 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. To learn more, see Managing Progress Component. |
| 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. To learn more, see Managing Link Component. |
| Copy | Adds functionality to copy the value to the clipboard. |
| Data | |
| Table | Adds a Table that displays Data Set content. To learn more about the configuration options, see Table Component Configuration. |
| Form | Adds a Form that presents inputs on a web form or output as a data panel. To learn more about the configuration options, see Form Component Configuration. |
| Multi-page Form | Creates a form split across multiple pages. To learn more, see Managing Multi-page Form Component. |
| 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. To learn more, see Managing Card Component. |
| File upload | Enables users to upload files to the App. To learn more, see Managing File Upload Component. |
| Containers | |
| Tabs | Provides tabs for users to switch between different views or components. |
| Container | Groups and positions other components relative to each other. To learn more, see Managing Container Component. |
| 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. To learn more, see Modal Dialog. |
| Side panel | Adds a collapsible or expandable panel on the side of the interface. To learn more, see Side Panel. |
| 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. |
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article