Skip to main content

Building App Logic

App development in the App Editor is based on a flow-based programming principles. To build an application you need to create a data flow by selecting required components from a library, connecting them in a graph, applying necessary data transformations and output the result to a visual component (widget).

See User Interface to learn how to launch App Editor.

Components​

To open Components library do the right-click in any place of an editor.

Start typing component name or find it in a components list. Select required component and it will be added to the dataflow graph.

You can use component dialog to configure component settings. To open a dialog use Space button or open component menu by right-click.

Hint! To better navigate the graph you can change component's label by double click on the component.

Components library has following structure:

  • Kelp Components section contains default components pre-installed for every Kelp user.
  • My Components contains list of a more complex custom components assembled from default components.
  • Community Components - components added from global or private repositories.

There are few types of components TBD:

  • Functional components
  • Visual components (widgets)
  • System components

Hint! Widgets have expanded mode. Click on the bottom rigth-hand corner of the widget and stretch it out. This mode could be helpful for widgets preview or for debugging.

Connections​

To connect two components do the left-click on an output port of one component, holding the mouse button, and drag the appeared wire to the input port of another component. Otherwise, you can open right-click menu and select input or output port.

/docs/building-apps-img/connection_1.gif "Connection"

Wire connection could be established only between input and output ports. You can connect component to many other components using single port.

Hint! Drag a wire from the output port and don't connect it to the input port. Doing this you will create a port component. Orphan wire from input port creates JSON component.

There are two different types of connections - regular connection and q-port. Regular connections (white and blue wires) process all the data one way from one component to another. Q-ports (purple wires) are used to establish multiple connections to support complex logic of communication between components.

Example. Q-port connection between List Widget and List Adapter allows to prepare the data to display on the widget, e.g. apply pagination or sort the data.

Q-ports could be established only between compatible components.

To apply data transformation open the dialog using Space button or by right-click on the connection. You can use transformation editor or create transformation manually using Advanced section. Connections with applied data transformation are marked with a yellow bullet.

Grouping​

To simplify navigation on complex graphs we suggest to group components. Select components and create a group using the right-click menu, double click on the group to change the group label. You can drill-down to the group using the right-click menu, to roll-up on the previous level use the path displayed at the bottom of the screen. To ungroup components use the right-click menu.

Hint! You can create as many levels as you need on your graph by using grouping feature.

To navigate on the graph do the left click on the screen and move the cursor holding the mouse button. You can also use mouse or touchpad scrolls. To zoom in and out hold the Ctrl button and use the scroll. For auto-resize use Shift+1 hotkey.

Search components by name or by type using Magnifier feature.

Right panel allows you to navigate between App modes, check User Interface article for additional details. Stethoscope button opens up Console, Magnifier launches search bar. By clicking on Human icon you activate Sharing feature to share your application with other person or group of people. Last icon shows current status of your application.

Graph colors​

Components and connections on the graph can have different colors. Inactive components and connections have grey color. When data flows from it's source to the widget, being placed to the application layout, all related components and wires are blue. Groups could be identified by orange color. Q-port connections are purple. Wires with enabled log recording are green. If there is an error during data processing, related wires turn red.

Debugging​

To test data flow you can use Console feature available in the right menu panel. Console allows you to see the data passing through the selected wire which is helpful for the debug process.

To start recording log, select a wire, click on the stethoscope button and refresh the application to trigger data flow - log will be printed out to Console window. You can monitor logs from multiple wires at the same time, use filter button to see logs only for selected wires.

Hint! Whenever you make changes, don't forget to reload the data to see the impact on data flow.

Another debugging option is to use Log widget. You can connect it in any place of the graph, expand it and see the output, quick and simple.