Compose App

For codeless applications creating Creators Studio has Apps Editor, where you can add needed components onto a grid and connect them. This would be the processing logic of your app.

1. Add components

Choose from the palette (1) a component you need and drag it onto the workspace (2).

Components on the palette are ordered in groups. Click a component to see its description on the sidebar (3).

To delete a component from the workspace click it once and hit Delete on your keyboard.

2. Set Up Properties

Double-click on a component at the workspace to open the component`s properties.

A window will appear (1). In this example, a window for an Inject component ("inject node").

Each node (component) has its own properties, depending on the function of the node. But there are common ones.

For any component, you can set up its name (2) – it will be shown on it for better reading of your flow.

The main purpose of many components is to do something with a message object. The most simple message object contains an empty topic and some payload (3). In this example, msg.payload is timestamp - just the number of seconds from a particular moment. You may change the type of data and the data.

Different components bear different functions and properties. Explore Standard Components and Aitheon Components.

Enable and disable the component (4) – it may be useful for testing your flow.

Open the second tab of properties (5) to add a description for the component or the third tab (5) to adjust its appearance on the workspace.

A component with a lack of obligatory properties set up will have a red triangle mark (6), a component with undeployed changes has a yellow circle mark (7):

Set up all needed properties – Notes near proprieties fields and the sidebar with info will help you.

Click Done to save and close the window. Click Delete to delete the component from the workspace.

3. Add connections

To wire these components, click an output point of one component (1), drag to an input point of another (2), and release the mouse button. But no need to be precise here – if you release the button above any part of another component (3) – still the connection establishes.

To wire a row of components, start with clicking the first point and Ctrl pressed. Holding Ctrl, just click the row components one by one.

You can create multiple connections from one output or to one input point.

To delete a connection, click it once and press Delete on your keyboard.

4. Deploy

Before deploying, your flow exists only in the editor.

A component with undeployed changes will have a yellow circle mark (1).

Click the Deploy button (2) to save all the changes in your flow and run it.

Click the arrow on this button to choose a deploy option (3):

  • Full – runs by default when one clicks the Deploy button.

  • Modified Flows – in our example, we have only Flow 1, but if you have more, this option will affect only flows with changed nodes (aka components).

  • Modified Nodes – affects components with blue marks.

  • Restart Nodes – affects already deployed flows.

You can test your app UI (if it has such). Right-click on the app's flow .json file and choose Graph App: UI Viewer.

5. Commit and Push

If you are ready to release your application just go to the next page: Release an App.

Otherwise, you may want to save the changes without making a release.

The unsaved changed files are highlighted and have the M mark (modified). The number of unsaved changes is displayed on the left sidebar 'mindmap' button (the Source Control tab) in the blue circle.

First, commit the changes. Give a comment to them for git.

You can explore the changes in any project file and stage or discard them separately.

Committed changes are saved just locally and have to be pushed to git.

Note: if you don't commit and push the changes (or make a release) you may lose all the project changes when you delete the project from the Workspace.

Last updated