App Editor
The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code.
The app editor is composed of 6 main sections:
Toolbar
The app toolbar is located at the top of the app editor. It enables you to adjust app settings.
App Summary
The app summary can be modified on the left side of the toolbar. It serves to describe the app and is displayed in the app list. By default, the summary is the app’s name.
Undo/Redo
The undo/redo buttons facilitates undoing or redoing the most recent action.
Desktop/Mobile Mode
You can switch the canvas’ mode to Mobile or Desktop layout from the toolbar. This enables you to manually set the position and size of the components in both modes.
Width
You can set the canvas’ width to:
- Limited width: The max width is 1168px and the content stay centered instead of taking the full page width.
- Max width: The width is of the app if the full width of its container.
Menu ⋮
The ⋮ menu provides access to the following options:
- Deployment history
- Export
- Hub compatible JSON
- App Inputs
- Diff
Debug Runs
The app builder enables you to examine recent runs to identify potential bugs.
Preview Mode
The app editor mode can be toggled between Editor and Preview modes. The preview mode allows you to see the app in action.
Save as draft
You can save the app. The first time you save the app, you’ll be asked to select the owner of the app. You can choose either a user or a folder.
Deploy
getOperate apps are custom-made user interfaces meant to interact with scripts and flows.
There are two ways to deploy an app:
- Read-Access Required: The app can be accessed & triggered by anyone who has read access to the app.
- Publish Publicly: The app can be accessed as a standalone app by anyone who has the secret URL.
Canvas
The canvas at the center of the editor is where you design and see the overall UI. Insert new components, move them around, resize them, or nest them in containers.
Connecting Components
The strength of getOperate’s app editor is the ability to connect everything together:
- components can be linked to each other
- components can be directly linked to scripts and trigger them
- background runnables can be that are run in the background on app refresh on when an input changes
- frontend scripts can be used to manipulate the client app state
In getOperate’s app editor:
- the runnable editor catalogs and configures all the scripts present in the application
- the output panel lists the outputs of all the components and scripts in your application
Outputs
On the left panel of the editor, you can see the list of outputs of the app. These outputs represent the states & results of the app and are categorized into four types:
- Context: The context holds information such as the user email, username, workspace, query parameters, and more.
- State: The state holds the app’s current state, which can be manipulated by the frontend scripts.
- Component Outputs: These outputs correspond to the outputs of the individual components.
- Background Runnables: These outputs represent the outputs of the background runnables.
You can perform the following actions with the outputs:
- Search for an output.
- Edit the output’s ID.
- Select a component to view its outputs.
- Connect an input to an output.
Runnables panel
On the bottom panel of the editor, you can see the list of runnables of the app. The runnables are the scripts or flows that are linked to components, or ran in the background. They are used to perform actions when a component is clicked, to fetch data, etc. They make all the interactions of the app.
Component Library and Settings
Finally, on the right panel of the editor, you can insert a new component, configure a component or edit the component styles.
App Styling
Styling on the app editor can be managed at the component and app-level, with pre-set configurations or using CSS & Tailwind.