TABLE OF CONTENTS
The App Studio is a low-code/no-code designer that allows you to build user interfaces for your App.
You use a drag-and-drop interface to manage the components that make up your App and it reduces the time that you spend writing code. It does not require that you to have front-end development experience. App Studio also provides consistent ways to interact with other CafeX Platform components to interact with data into your App. For example, access to video meetings, or calls to external API to retrieve relevant data.
To build your App, you add Pages, Components, configure data access, and apply style so that your App fulfils the goals that you develop it for.
Opening the App Studio
Before you use the App Studio, your App has to have a Custom View. The steps you follow to create a Custom View are found in the Building your First App guide.
To open the App Studio, from the App Overview Screen, go to: Configure > App Studio.
Important: If you do not see the App Studio it is because your App does not have a Custom View.
Navigating App Studio
The App Studio interface presents the following areas:
- The side menu—You use this to visit different configuration areas of the App, including the areas where you configure the Data Sources your App uses. The Side menu includes includes the following:
The App Studio 
Configuring External Data Source— 
Configuring Workflows—See: Creating a Workflow in your App 
Configuring Rulesets—See: Creating a Ruleset in your App 
Configuring Data Tables—See: Adding Data Tables to an App 
Configuring Permissions—See: Understanding App Permissions
Configuring Workspace Fields—See: Using Contextual Data Sets 
App details—See: Exporting and Importing Apps
Exit the App Studio—See: Workspace Overview - The Explorer and Component Panel—Explorer lists your App’s Component. hierarchy to make them easier to find. Components is where you can select items to add to your App.
- The Canvas—Presents your App Interface. This is where you can add and position Components and adjust the layout.
- The Configuration and Appearance Panel—Appearance is where you can change the appearance of a Component that you select. Configuration is where you configure Event Handling and Data Sets.
Using Data in your Apps
As an App Builder, you configure Data Sets to interact with Data consistently. See: Using data in your App
Adding App Studio Components
The App Studio has many different types of Components that you can drag and drop onto the interface each with their own dedicated task. When you reuse dedicated components that you are familiar with, it means that you can reduce the time you spend in development and test cycles. The App Studio categorizes Components by their function; that makes it simple to find the Component that you need for a specific task.
To add a Component to your interface:
- From the App Studio Explorer and Component panel, click Components
- Drag and drop a Component onto the Canvas
For an introductory walkthrough see: Building your first App.
App Studio has 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 that you use for styling. |
| Chart | Presents the data that you provide as Bar, Line, or Donut |
| 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 |
| Asset | Embeds a viewer for a Workspace Asset |
| Assets | Presents a component that contains all of the Workspace Assets |
| Article | Embeds a CafeX Knowledge Base Article |
| User interactions | |
| Button | Adds a button that you can assign events to |
| Navigation | Adds a component that uses click to switch Pages |
| Link | Adds and positions a hyperlink |
| Data | |
| Table | Adds a Table that presents Data Set content. |
| Form | Adds a Form component that presents Data Set you use to present inputs on a web form, or output as a data panel |
| Containers | |
| Tabs | Provides tabs that users can switch between different views, or components. |
| Container | A Container that you use to group and position other components relative to each other. |
| Advanced | |
| HTML | Embed custom HTML code |
| IFrame | Embed iFrames that you use to embed external resources that grant permission to the platform to host. |
After you add a Component to your App, you can configure its appearance. See: Altering the appearance of an App Studio Component.
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