1 - Component Flow

A Component Flow diagram is the blueprint of an App

Component Flow Diagram

A Component Flow diagram is the blueprint of an App.

Planning is already building!

A Component Flow diagram is very much like the kind of diagram you might produce if you were (just) planning out an App.

The difference here is that, with Logiak, once you have planned out your App and produced a blueprint, you have also thereby built your App!

Example

Have a look at this example Flow Digram below: this is the blueprint of an App called Test App, and it currently contains four Components, linked together in a Component Flow.

  • The boxes in the Flow Digram each represent a Component.

  • The large green right arrows represent transitions between components.

It is to be read left to right.

It starts with a special Transition labelled START.

The START transition is always there, and setting the destination of that transition is how we tell Logiak which Component we want to appear first.

In this example, the START transition takes us to a Login Component.

Login Components have a Login Transition, leaving them, and we define there: which component do we want to appear after the user has logged in…

And so goes the planning/building, deciding which Component to place next..

Adding Components

You can add a Component in the Flow in three ways:

  1. The destination of a - transition.
  2. or as contained by another Component which is within the Flow.
  3. or as a navigation element on any Component within the Flow

Here are actions available to modify the Component Flow:

Pinning a component as root

Possible also to edit Component Flow on device

If you have a Deployment which is in Development Mode, you can access Component Flow editing functions from the device - you can add and edit Components.

2 - Components can be added as destinations of Transitions

Transitions are the steps from one Component to another

A Component Flow, is made up of

Simple example

Here is an example of a transition.

This example shows a situation in which, after logging in, the user would see a List component called Patient Listing

Origin and destination components

We say the Login component is the origin of this transition.

The Patient Listing component is the destination of this transition.

Larger example

In this example, there are four components and four transitions.

A Listing component has four potential outgoing transitions. In this diagram, only two are used: SELECT and ADD

Editing Transitions: click on green arrow

The transition arrows are clickable. This produces a pop-up menu of all components in the App, plus a button to Unlink.

Changing the destination of a transition

To change the destination of a transition, just select a different component from the pop-up

Unlinking the component without setting a new component

The menu shows an “unlink existing” button at its top center. Clicking that button will unlink the component which is currently the destination of the transition

START transition

There is a special transition called START.

The start transition is unusual because it is the only one which doesn’t have an origin component.

It has only a destination component, and whatever is the destination of the START transition will be the first component which appears when the App is run.

Transition Types associated with Component Types

Component Type Transition Types available Note
START The start transition indicates where the App begins. The destination of the start transition is the first component which appears when the App is run.
LOGIN LOGIN The destination of the login transition is the component which appears to the user after a successful login
LISTING SELECT ADD DELETE EDIT Listing plays a central role in data applications because of the transitions it has. Select is particularly important because it creates a downstream area in the flow where an object instance is selected
DATATABLE SELECT
CARDS SELECT
MAP SELECT
GALLERY CLICK CLICK rather than SELECT because no instance is selected - it is just a transition to another component
OBJECT VIEW SELECT When a relationship field is included, user can click to create downstream area with related object selected

3 - Components can be added as contained by other components

Component may contain other components

A Component can be in the Flow either as…

  1. The destination of a - transition.
  2. or as contained by another component which is already within the Flow.
  3. or as a navigation element on any component within the Flow

Components which contain other components

Component Notes
Actions Presents Components as links or buttons Useful for workflow
Tabs Presents a tabbed dialogue with each contained component in a tab Tabs can contain max 5
Vertical Presents contained Components vertically scrolling if necessary
Horizontal Presents contained Components horizontally Can be rendered as carousel, etc.
Layouts Presents contained Components together in layouts which you custom design Design different layouts for different display widths

Actually, all Components can contain other components - as [navigation elements](https://docs.logiak.com/docs/apps/flow/navigation/

Removing from parent (1)

You can remove a Component from its container, from within the Flow, by moving the mouse over the “CONTAINS” link, and clicking the button which appears.

Removing from parent (2)

Alternatively, you can open the Editor for the parent component and remove the contained component like this:

4 - Components can be added attached to Navigation UI

Components may contain other components as navigation elements

A Component can be in the Flow either as…

  1. The destination of a - transition.
  2. or as contained by another component which is within the Flow.
  3. or as a navigation element on any component within the Flow

Defining Navigation is a lot like defining the use of a Container component, but Navigation is available for almost all components.

It is very simple..

There are three Navigation UI possibilities to which you can attach one or more Components

  • Action Button
  • Navigation Drawer
  • Bottom Sheet

So the components are sort-of contained by the parent Component, but in a particular way, and instead of the CONTAINS representation in the Component Flow, navigation components are indicated with a signpost

Creating an Action Button

Action Button

Setting icon

The plus icon is ok when the Action Button has a Process behind it which adds something to a list, but often for navigation, it is not appropriate.

You can associate an icon with a Component and if you do, that icon will be used in Navigation elements instead of the default.

Setting an icon on the Action Button - associating an Icon with a Component

Creating a Speed Dial

When the action button carries more than one component, it transforms into a “Speed Dial” component

Creating a Navigation Drawer

Navigation drawers can contain multiple components

Creating a Bottom Sheet

Bottom Sheet contains one component

Navigation Element
ACTION BUTTON Speed Dial control is used if multiple components are specified
NAVIGATION DRAWER
BOTTOM SHEET

5 - Downstream

Where a user selects a record, Logiak remembers the selection

When the user selects a record

There are some Components, like Listing, where the user can select a record

  • With Listing , each row represents a record.
  • With Cards , each image represents a record.
  • With Data Table , each row represents a record.

When the user selects a record, Logiak remembers it, and subsequent Components can make use of it.

For example, it is really easy to configure an Object View. You say what type of Object it is going to display, then you just locate it somewhere in the Component Flow after the user will have selected a record of that type.

The Object View will then show that selected record.

We highlight these areas in the Component Flow, where the user has selected a record, by coloring them and we call them Downstream areas. They are downstream of the user’s selection of a particular record.

Downstream areas

Downstream areas might contain many components and transitions. The area indicates that at that point in the App, the user has selected an Object instance

The screenshot here has a downstream area (the shaded area).

The downstream area is whatever follows the SELECT transition from the LISTING component.

  • Logiak remembers the object selected
  • the selected instance is available to Components positioned within that downstream area.

Some components assume and require the existence of such a selected instance.

Examples of Components

Here are two components - Object View and Process - and how the existence of an instance in a Downstream area can be used.

An Object View must be positioned downstream

An Object View component is incredibly easy to configure: all you have to do is select an Object type.

This means each Object View component you create, is configured to be able to display (and edit), values from the type chosen.

So when you link it in the Component Flow, it *needs to be in a downstream area, where an instance of its Object type has been selected.

If an Object View is located outside of the downstream, or in the wrong downstream, you will see a warning that this cannot function.

Here is an example where an Object View has placed where there is no downstream area. No instance has been selected for the Object View to display.

A Process can have selected instance as input

Perhaps the most exciting use of a selected instance is as input to a Process.

You can configure a Process in a way which assumes the Process which receive an object instance as input.

The Process then has access to all the information in the instance.

You can say that the Process “knows about” the object. We could even say that the Process “is about” the instance.

It is safe to configure a Process like this, because then all you have to do, is to make sure the Process Component is in an appropriate downstream area.

If it isn’t, you will in any case get a warning as with the Object View example above.

6 - Components Column

Components Column

Components Column

The Components Column found on the right of the screen is a important tool.

Alphabetical list of all Components

It performs several functions, one basic is that it shows an alphabetical list of all components in the App.

You can use Components Column to navigate within the Component Flow.

This can be particularly useful when your Component Flow grows large: when an App contains many components.

If your Component Flow is large, it may not be so easy to find a Component, but it is always easy to find it in the searchable, alphabetical column.

Once you have found it in the column, you can click on it and all of the following happen:

  • The selected Component is highlighted in the Column with a green dot.
  • The selected Component is made visible within the Component Flow and is also marked with the green dot
  • A preview of the selected Component is rendered bottom left

Click on token to expose Component

Even if your component flow is huge, you can command Logiak to locate a component for you by clicking on the token in the component in the right column.

Click on component in column

Filter by Name & Group by Type & Hiding/Showing Column

With the components column, you can also

  • Filter the components, showing only those whose names contain a certain text string
  • Group the components by Type (using button to the right of the filter box)
  • Hide the column - in case you want more space to view the Component Flow - and show it again by clicking on the Components icon

These functions are illustrated one after the other here:

Managing Unlinked components

Unlinked components are also managed within the Components Column.

See: Unlinked Components

7 - Unlinked Components

Newly created components which exist, but are not linked into the Component Flow

Unlinked components

Unlinked components are components which have been created, but are not currently linked into the App anywhere.

This means: they are not

  • the destination of a transition
  • nor are contained by any component which itself is within the Flow
  • nor are functioning as a navigation element on any component within the Flow

They are not within the Component Flow.

Unlinked

Unlinked components are either:

  1. Newly created components
  2. Components that were unlinked
  3. Components that became unlinked as a result of another component being unlinked

Managing Unlinked components

Unlinked components are managed within the Components Column.

When new Components are first created, they are not yet linked into the Component Flow.

Instead, the are listed in the Components Column, available for either dragging and dropping into the Flow or for deletion.

There are several ways to unlink a component.

  1. You can click on a transition (green) arrow, and, in the popup which appears you will see a button labelled “unlink existing” button
  1. Edit the component which contains or links to the component you want to delete, and from the first tab you will be able to unlink the component

How to DELETE Unlinked components

You can delete any unlinked component by clicking on the trash icon to its right.

If you have a number of unlinked components and you are happy to delete them all, you can do this in one action by clicking on the trash icon in the header.

This will delete ALL currently unlinked components.

Delete all unlinked components at once

8 - Managing Large Component Flows

What to do when the Component Flow gets big?

The Challenge

Let us suppose you have a small App with just three components, including a Listing.

Then you attach an Object View as the SELECT transition for the Listing.

Oops it is hidden, already. Is there a scaling problem here? Can we manage large Component Flows - large Apps?

Yes, you can create large Apps with Logiak.

This page explains how to manage large Component Flows, without purchasing a huge monitor.

The Solution(s)

1. Pin a Component as root

You can select any component and “pin” that component as root.

What this means is that you will no longer see the whole Component Flow. You will only see the “sub-tree” which begins with the Component you have pinned as root.

Here we ilustrate this by selecting and pinning the Listing.

We also show how to clear the pin (click on the clear button beneath the pin icon)

Pinning and unpinning the LISTING

2. Click on token to expose Component

Even if your Component Flow is huge, you can command Logiak to locate a component for you by clicking on the token in the component in the right column.

Click on component in column

3. Use Scrolling

The Component Flow scrolls both vertically and horizontally.

So when some Components are hidden behind the Components Column, you can scroll left and they will appear.

4. Put away Components Column

5. Switch to make Component Flow fit horizontally

9 - Component Preview

Preview Component

Component Preview

The Component Preview is a non-interactive indicative impression of the currently selected component (in contrast with the App Preview)

The purpose is to provide quick access to a visual reminder of the components as you are editing the Component Flow.

Component Preview in Component Editor

The Component Editor also uses a Component Preview in the right pane, so that you can see how the configuration changes you are making in the left pane affect the way the Component appears to the user

Indicative only

Note that the preview pane contains the overlaid warning:

Indicative preview only

Using randomly generated data

The component preview being shown is not properly part of an App. It is not connecting to a backend database. The data being shown are randomly generated. The aim is only to give an indication of what the component will look like.

To get a realistic preview, backed by a database, use App Preview