This is the multi-page printable view of this section. Click here to print.
Component Flow
- 1: Component Flow
- 2: Components can be added as destinations of Transitions
- 3: Components can be added as contained by other components
- 4: Components can be added attached to Navigation UI
- 5: Downstream
- 6: Components Column
- 7: Unlinked Components
- 8: Managing Large Component Flows
- 9: Component Preview
1 - Component Flow
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..
Expand and Contract
The small right arrows are controls with which you can expand and contract the Flow Diagram.Adding Components
You can add a Component in the Flow in three ways:
- The destination of a - transition.
- or as contained by another Component which is within the Flow.
- 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
A Component Flow, is made up of
- Components, and
- Transitions between them
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
The transitions are the green arrows
Transitions are represented by
- Large green right arrows,
- The green arrows are labelled with the type of the transition (see table below for types)
Components are the boxes
Components are represented by boxes which display:
- an icon representing the component type - i.e. whether it is a Listing or an Object View etc
- a name (a component can be renamed at any time)
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
A Component can be in the Flow either as…
- The destination of a - transition.
- or as contained by another component which is already within the Flow.
- 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
A Component can be in the Flow either as…
- The destination of a - transition.
- or as contained by another component which is within the Flow.
- 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
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.
Creating a Speed Dial
Creating a Navigation Drawer
Creating a Bottom Sheet
Navigation Element | ||||
---|---|---|---|---|
ACTION BUTTON | Speed Dial control is used if multiple components are specified | |||
NAVIGATION DRAWER | ||||
BOTTOM SHEET |
5 - Downstream
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
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.
Navigation with Components Column
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.
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
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:
- Newly created components
- Components that were unlinked
- 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.
How to UNLINK a Component
There are several ways to unlink a component.
UNLINK via transition menu
- You can click on a transition (green) arrow, and, in the popup which appears you will see a button labelled “unlink existing” button
UNLINK via parent component editor
- 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.
8 - Managing Large Component Flows
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)
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.
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.
NOTE
It is possible to scroll left or up and have no Components appearing.4. Put away Components Column
5. Switch to make Component Flow fit horizontally
9 - Component Preview
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