This is the multi-page printable view of this section. Click here to print.
- 1: Introduction to Component Types
- 2: Editing Components
- 2.1: Adding a Component
- 2.2: Renaming Components
- 2.3: Remove a Component from an App
- 2.4: Component Editor
- 3: Main Components
- 4: Container Components
- 5: Data Components
- 6: Media Components
- 7: Geo Components
- 8: Pager Components
- 9: User Components
- 10: Web Components
1 - Introduction to Component Types
In this section, we look at individual components in turn.
If you haven’t already seen it, please check out the documentation on how Components fit together to make an App
Components are the building block of Apps.
They are put together in a Component Flow to make an App
The presentation of these Component types in a grid can give the impression they are all of equal significance when building an App, but this is not true.
The first row of Components in particular are central to most Logiak Apps.
The second row of Container Components are also important.
Subsequent rows largely contain more specialised Components, which some Apps might need and other Apps not.
Processes are where the meat of the computation is done.
We should also note that there are user interactions within Processes which can be thought of in some way as components/widgets. In the terminology of Logiak, they don’t belong to Components though.
2 - Editing Components
2.1 - Adding a Component
How to ADD a Component to an App
To Add a component to an App, you need to
1. Create the component
Create the Component via these steps:
Click the Add component button
Select the type of the component you want to create
For some components, you will be asked choose an object type and maybe some other configuration decisions
Give the Component a name
Component initially Unlinked
2. Link the component into the App
There are two ways to do this:
- 2.1 Via drag and drop
- 2.2 By editing the parent Component
2.1 LINK via drag and drop
- Drag the new Unlinked Component from the components column into the Component Flow.
- Drop it onto a component that you want to link it to, or that you want it to be contained by, and the component flow will update to show the new component within the flow. It will no longer appear under “UNLINKED”
2.2 LINK via editing parent component
Alternatively, you can edit the component which you want the new component to be linked to, and add the component there.
2.2 - Renaming Components
How to RENAME a Component
You can rename a component from within the Component Editor as shown here, where we edit the name of a component from “Patients Listing” to “Patients”
2.3 - Remove a Component from an App
How to REMOVE a Component
There are two elements to removing a Component
So you may find that you go to delete a component and you can’t. Why? It will be because Logiak knows that component is still used somewhere, and it will usually be able to tell you exactly where.
So Logiak protects you from breaking references you have made.
This is why, here, you can’t just delete any old Component. If the component is linked into the Component Flow, deleting it would result in broken references.
First you have to explicitly Unlink the Component. Then we know it is safe to be deleted.
When you remove a Component from the Component Flow, we refer to that as Unlinking the Component.
From there it can be deleted by clicking on the trash icon which appears to its side.
Check out How to unlink a component.
Delete a single Component
Delete all unlinked Components
There is also a trash icon in the header which allows you to delete ALL currently UNLINKED components.
2.4 - Component Editor
Clicking on the box in the Component Flow representing the component opens an Editor for that component
A component editor has two panes: an edit pane on the left and a preview pane on the right.
The Edit Pane gives you access to edit functions, appearing in a bottom tabbar
The Preview Pane show an indicative Component Preview only (not functional!)
Tabs in the Component Editor
|Select how the component is rendered|
|Action buttons, nav drawer, bottom sheet|
|Colors and fonts|
|Container components - control when contained components are visible etc|
|Defining the basis data and filters etc|
|For GALLERY only - which media are included|
|For LISTING only - control what rows look like|
|For examples fields in OBJECT VIEW|
Navigation is possible within the component editor
Here we navigate from a LISTING to an OBJECT VIEW and back again
3 - Main Components
3.1 - About Main Components
Just like pieces in a game of chess, not all components are made equal. Some have more capabilities than others.
The most powerful components are the ones shown here. We group them together as the Main components.
Used together with Container components, these components can satisfy a remarkably wide range on needs.
PROCESS is Queen
In Logiak, PROCESS is the most powerful component, because it brings Processes into the App
Process is a bit like a system in itself. A bit like a programming language.
LISTING can do a lot.
It shows you data from the database.
You can define sophisticated filtering.
ACTIONS can actually be considered a container component - you put other components into it.
But it is super-powered for Workflow purposes.
It gives access to the components contained, as links (which can be image links), and allows you to specify when those links should be
- visible or not
- enabled or disabled
- marked with a tick
OBJECT VIEW can be used to view data from an instance, but also to edit it
3.2 - Listing
What is a LISTING?
A Listing presents records of an Object type, one after the other, a row for each record.
Listing is a powerful Component because of the transitions you can define.
How to create a LISTING?
To create a LISTING, you have to first have defined an Object that you want to list.
LISTING has four transitions where you can add Components and extend the functionality of your App.
At their very basic, you might think of these transitions as supporting CRUD functionality (Create, Read, Update, Delete).
|CRUD||LISTING Transition||Object is selected (downstream created)|
|Create||ADD||no - object is added, but not selected|
|Delete||DELETE||yes - delete transition selects an object for deletion|
To create simple CRUD functionality for a Logiak App, it is sufficient to create a LISTING, and add a Component for each of these transitions.
Building a First App shows how to do this very quickly using auto-create.
1. SELECT transition
This is all about: what happens when the user click on an item in the list?
Simple read functionality
If you create an Object View for the same Object type which is being listed, and attach that as the SELECT transition of the list, a user would be able to click on an item in the list and view the data contained in the instance.
Beyond simple read functionality
However, you don’t need to limit the SELECT transition to an Object View.
The SELECT transition is important because the user selects an Object instance from the list,
The selection of an object creates a downstream within which Logiak remembers the object chosen and can pass it on to other Components.
You can define a whole sub-tree of Components in the Flow with the selected object in mind, to
- show the data in the object
- if the object has relationships, perhaps show a filtered list of related objects (e.g. invoices for a selected company)
- offer the user a workflow of Actions all related to the chosen object
So, yes you can attach an Object View so that the user can look at the data, but you can instead attach a Container, such as a Tabs Component, and make the Object View one of the Tabs, while adding other Listings and Actions in other tabs..
2. ADD Transition
If you have a list, you may want the user to be able to add an item.
For example, if we have defined an event object, and we present the user with a list of events, you might want the user to be able to register a new event and it appear in the list.
We do that in Logiak by attaching a suitable component as the ADD Transition.
This usually means
- defining a Process - an interactive dialogue - to elicit information from the User
- wrapping the Process in a Process Component
- attach the Process Component as the ADD transition
3. EDIT Transition
A third functionality you may want to have is for a user to be able to edit the data in an instance, or at least the values of certain selected fields.
This can be done with an Object View, set to edit mode.
4. DELETE Transition
If you have a list, you may want the user to be able to delete an item.
For example, if we have defined an event object, and we present the user with a list of events, you might want the user to be able to delete any specific event from the list (and from the database).
We do that in Logiak by attaching a suitable component as the DELETE Transition.
This usually means
- defining a Process - an interactive dialogue - to confirm the delete with the user, and to a delete instance update action
- wrapping the Process in a Process Component
- attach the Process Component as the DELETE transition
What can you do with a list?
define filters to restrict which instances to display
define user filters which users can turn on and off
define what appears in each row by using a template
make what appears conditional on true/false fields of the Object listed
define custom layouts for rows
define custom layouts for rows which are adaptive to display width
define what component appears when the user selects an instance (clicks on a row)
define what component appears when the user decides to add an instance (clicks on the action button)
define what component appears when the user wants to edit an instance (long clicks on a row)
define what component appears when the user wants to delete an instance (swipes left on a row)
lists have a search control built-in
define sort fields and thereby display a sort control to the user
Formatting List Rows
Some basics to know about list rows:
- Every row represents an Object instance .
- Any of the values from within the Object can be shown to the user.
- If the Object being listed has a relationship with another object, fields from the related object can also be available to be shown to the user.
There are two ways to define what gets shown for each row.
- Using a template, and choosing fields to provide values for the template
- Configuring your own custom layouts, which can also involve making the rows adapt to different display widths
TEMPLATE row formatting
Configuring list rows using Templates is the simpler and more limited of the two ways, and it is the one selected by default.
CUSTOM LAYOUT row formatting
Filtering what instances appear in the List
There are two kinds of filters you can define:
- implicit filters
- user-controlled filters (filters that the users can turn on and off)
When a LISTING is initially created, by default it displays ALL instances of the chosen object found in the database.
You can specify filters which constrain which instances are shown.
User filters are configured almost exactly the same.
Instead of being implicitly applied to the Listing at all times, User Filters instead are represented by controls with which the user can turn them on and off.
The only difference in the configuration is that one is able to define a user-friendly label for each control.
Sorting the List
Sorting is specified by selecting one or more fields from the listed object.
You specify a field order (for neted sorting) and a default direction of sort (ascending or descending) for each.
Whichever sort fields are defined here, they become available to the user via a dropdown on the list. Precisely, the display names associated with the fields appear in the drop-down. An arrow control permits the user to switch direction of sort.
Scaling - is the List usable on a mobile device when there are thousands of records?
The LISTING component can deal with many thousands of records.
The data contains 42,905 rows.
We created a LISTING component to present 42,905 rows (i.e. without any filter applied).
The number of instances is shown by the number in the bottom left-hand corner..
Cards which functions a lot like Listing
3.3 - Process
PROCESS components are the most powerful components
Processes are interactive dialogs with the user which can be used to calculate and compute using complex logic, and update the database, affording great flexibility and power in processing data.
To bring a Process into an App, what you do is to create a Process component to “wrap” the Process.
Once you have a Process component representing a Process, you can drag it into the Component Flow the same as any other kind of component.
Where to read about Processes
So this page of information is short because a Process component is just a “wrapper” which lets you locate a Process within the Component Flow .
To read about creating a Process, please have a look here .
3.4 - Object View
What is an OBJECT VIEW?
An Object View is a component for displaying and editing values within an object instance (a record).
An Object Type defines fields and relationships and an Object instance has values for each of these.
An Object View normally displays field names and values.
How to create an OBJECT VIEW
As with several other components, to create an Object View, you need to select an Object Type.
The Object View is then configured to show instances of that given type.
An Object View has to be located downstream of the selection of an instance of that type.
Selecting and ordering Fields to show
When an Object View component is initially created, all non-autofill fields are included in the view.
The fields of the object shown, and their ordering, can be modified at any time as shown here..
How to remove fields
NoteRemoving fields from the Object View component, does not remove the field from the Object definition itself.
How to re-order fields
How to add fields
How to use Object View as Editor
An Object View component presents values within an Object instance.
It has two modes: you can use it so that the user can view the data within a record, or you can give the user the opportunity to edit some values
You can switch between these modes.
NoteWhen used as editor, the values of all fields included in the Object View are editable by the user.
Relationship fields within an Object View
Relationship fields can also be shown within an Object View.
Using template to show related record
A relationship field is really a pointer to another record of another type.
For example, suppose we have a health application and we are dealing with records of patients and their visits: each visit is a visit of a particular patient, so the visit object type has a relationship to patient.
When we view a visit record, we want also to show which patient, but how exactly? Which fields should we show?
To configure the display of the patient within a visit Object View, we use the same templates as in the Listing component.
You select a template, and then choose fields of patient to display.
Relationship fields are clickable and cause the related instance to be selected
Because relationship fields point to another object instance, we exploit an opportunity here to give the user the ability to select that instance and create a new downstream .
Hence there is a tab in the Object View editor where you can select which component is to be used for the SELECT transition, if the user indeed clicks on the relationship field in the object view.
Using multiple Object Views in a Container Component
If the object you are displaying has many fields, you might want to consider creating a view based on a Container Component, such as Vertical (but of course you could use any other Container) , and partitioning the fields into groups.
For example, you might have an Object View with basic information from a person’s record - name, address, etc. and separate group of fields displayed in a second Object View..
Media fields within an Object View
One of the Logiak’s data types is Media URL.
Values of such fields can point to images, audio files, or videos.
The Object View will render medias pointed to.
3.5 - Actions
An Actions component is useful if you want to present the user with a list of options or tasks.
Each of those options or tasks is a component: like the Container components, an Actions component is configured by selecting one or more other components to put into it.
By default, the Actions component presents the possible actions as clickable links.
Using Switches to control the user’s Workflow
An Actions components presents a choice of possible tasks or functions to the user.
Where an Actions component is located within a Downstream area, where an Object has been selected, the Actions component can be configured to adapt to the values in the true/false fields of that Object.
It is possible to configure a single action to be:
|By default||Can conditionally be|
|Not marked||Marked with a tick|
Since the values of the true/false fields of the object can be updated by Processes, this gives an easily modifiable system which presents tasks to the user appropriate to the current circumstances.
Or, it can present a sequence of tasks to the user so that the user completes one after the other and ticks indicate which ones have been completed and which remain to be done.
Use images to represent the choices
4 - Container Components
4.1 - Tabbed Dialogue
As with all Container components, it is straightforward to configure Tabs.
Once created, you just select components to include within it.
Each component is presented in its own Tab.
This means that it makes little sense to have a Tabs component containing just one Component, and also that there is an upper limit to the number of components which can be contained.
Select which kinds of Tabs
- do you want the tabs to appear at the top (relative to the contained components)
- do you want to have a sidebar?
- do you want to have a bottom tab bar?
Tabs at the top
You can choose between
- bubble tabs - which sort of blow up a bit as you select them
Tabs at the side
- Also called a Navigation Rail
Tabs at the bottom
Choose between various styles of bottom tab bar
- Navy - using the same bottom bar component as is used in the Component Edit
- Cupertino - iOS style
- Convex, with sub-styles:
4.2 - Vertical Container
As with all Container components, it is straightforward to configure a Vertical - pretty much you just select components to include within it.
Components appear vertically, one after the other, including a title bar for each
Example of components stacked vertically
Here is an example (see the right part of the Component Editor screen) where we configured a Vertical component to contain two Object Views
Select between different display modes
Display Mode: Stacked Vertically
The example above in fact uses one of the three Display Modes available.
Display Mode: Expansions
Display Mode: Vertical Paging
4.3 - Horizontal Container
As with all Container components, it is straightforward to configure a Horizontal.
Once created, you just select components to include within it.
Components appear horizontally, one after the other.
Select between different displays
Display Mode: Horizontal
The example above in fact uses one of the three Display Modes available.
Display Mode: Carousel
4.4 - Layouts
Once created, you select components to include within a customer container.
Rather than being “hard-wired” with regard to how the components within the container will be presented, with a Custom container, you configure custom layouts, where each element in the layout is a component.
5 - Data Components
5.1 - Chart
With the Chart component, it is possible to create
- Bar Charts
- Line Charts
- Scatter Charts
- Pie Charts
Let us dive straight in and make some charts from some data
Invoices for sproggets,widgets and snap
We’ve define an Object called invoice with some typical fields and a relationship to a customer
And, supposing we sell three kinds of product - sproggets,widgets and snap - we have defined some sample instances of invoice:
1. Example Bar chart - showing total units sold
Now let us make a chart which will show us how many units of each product we’ve sold.
this takes just 2.10!
2. Example Line chart - showing amounts grouped by week
Now let us make a line chart which will show us how income has been developing, taking week as the period of analysis (i.e. amounts in the same week are summed together and considered one amount)
this takes just 1.14!
3. Example Scatter Chart - showing product success in size of spots
A Scatter Chart scatters dots which represent two values:
- one value determines the y-position of the dot
- the other value determines the radius of the dot
this takes just 1.46!
Aside for the SQL-curious
The data looks like this:
mysql> SELECT invoiceid,amount AS "amount", quantity AS "quantity", item AS "item" FROM invoice; +-----------+--------+----------+----------+ | invoiceid | amount | quantity | item | +-----------+--------+----------+----------+ | 1 | 87 | 3 | widget | | 2 | 23 | 7 | scrogget | | 3 | 43 | 2 | snap | | 4 | 36 | 132 | widget | | 5 | 74 | 8 | scrogget | | 6 | 25 | 7 | snap | | 7 | 3 | 5 | widget | | 8 | 6 | 8 | scrogget | | 9 | 12 | 5 | snap | | 10 | 5 | 8 | widget | | 11 | 64 | 5 | scrogget | | 12 | 4 | 30 | snap | | 13 | 5 | 64 | widget | +-----------+--------+----------+----------+
The query and results underlying the scatter chart look like this:
mysql> SELECT sum(amount) AS "amount", sum(quantity) AS "quantity", item AS "item" FROM invoice group by item; +--------+----------+----------+ | amount | quantity | item | +--------+----------+----------+ | 167 | 28 | scrogget | | 84 | 44 | snap | | 136 | 212 | widget |
4. Example Pie Chart - showing product income proportionally
this takes just 1.06!
5.2 - Data Table
A Datable has similarities with a Listsing , in that each row in the table represents a record and is selectable.
How to create a datatable
It is straightforward to create a datatable.
- Choose which kinds of records - which object type - you want to present
- Select the fields you want to be in the table
- Choose number and date formatting
- Choose which column to sort by
this takes just 1.49!
Adding Footer Calculations
It is possible to add Footer Calculations to the table.
Footer calculations are one or more rows of calculations, like this
The first row is an aggregate calculation based on a specific numerical column on the table, and then subsequent rows are calculations based on this figure.
So here, as in Process, we use symbolic names to refer to values.
How to configure a footer calculation
Step 1 : do the main calculation
First you choose
- a column you have added to the table which contains numbers (i.e. represents a number field)
- an aggregate calculation. One of:
- sum total
- symbolic name for the value which is being calculated
Subsequent Steps : calculations making use of named values
Now you can add as many steps as you want.
At each step, you can refer to values by their symbolic names, and use them in new calculations.
Footer Calculation Example
Suppose we had chosen to calculate a “sum total” of a column represent an invoice amount, and suppose we had introduced the symbolic name subtotal for the amount calculated.
Then we could add a second calculated value, let us use the symbolic name tax
by providing expressions where you can use the name of the aggregate value as variable
e.g. we could achieve the above example by choosing to calculate the Sum of a column and give it the value name 'sub' , then we could define a second value to represent 10% of the Sum (maybe call it 'tax') by giving the expression
(sub * 0.1)
Then we could define a third value (maybe call it 'total') like this:
‘(sub + tax)’ For each value, you provide a label which is what the user sees next to the value in the column
this takes just 1.26!
There are two different ways of presenting the data to the user.
One, suggested by the name of this component, is to present the data as a table.
The second, is to use the configuration possibilities to calculate a number you want to highlight, and then present that calculation, without the accompnaying table, perhaps on its own.
1. Default - as table
2. Calculation highlight mode
You can compose such a “highlight” with together with other components in a Container Component
6 - Media Components
6.1 - Gallery
A Gallery is the presentation of one or more media elements contained in the Project.
In this video, we go the Media tab and find and add an Image to the Project media.
Then we create add a new Gallery component to the App, selecting some images from the Project media.
this takes just 0.58!
Making images clickable
Like the Cards component, it is possible to make images selectable by the user.
Instead, to make the contents of a Gallery clickable, you have to select destination component(s) for each image:
Supplementing images with text(s)
In the Media tab, when you edit an Image, you can add Title, Sub-title and Caption, thereby giving sufficient fields that each Media element can be treated as a Card for the purposes of using the defined Card Renderers.
Comparison with Cards
- Displays use “Card” concept - can attach texts to Media to fit Card model
- Images can be made clickable
- In Cards , each card represents an instance, and the selection of one creates a downstream
- Because there is no backing Object, there are no implicit or user filters to restrict which Media to display
Some display modes
Gallery offers several display modes and parameters, including the option to render the Media as Cards or not.
Here is a video which shows some options like
6.2 - Cards
Comparison with Listing
A Cards component presents a set of instances of a given Object type.
It has a SELECT transition, meaning the Cards are selectable, and the instance behind the card is remembered by Logiak - it creates a downstream area.
So you can set which component(s) should appear when a user clicks on an image.
As with a Listing you can set implicit filters and also user-controlled filters, to determine which instances - which Cards - are displayed
Card Badge required
One difference between Cards and Listing:
- you can configure a Listing for any Object (any Data or Table object),
- but to use a Cards component, the Object types must have the Card badge
This is because the Cards component offers Card display modes, which requires certain kinds of information:
Example: English Counties
Let us look at an example.
Here is a small spreadsheet with some information about English Counties, including an image field.
Step 1: Set up a Table Object
We can create a Table Object in Logiak and attach the spreadsheet to it.
Note the image field has datatype “Media URL”
Step 2: Create Cards Component
Cards components require an Object, but the Object must have the Card badge
In this video, we :
- give the county Object the Card badge and
- create a cards component which shows the images.
Step 3: Choose different Card style
Step 4: Populate the downstream with some component(s) so that the Cards are clickable
7 - Geo Components
7.1 - Map
Plotting locations in a Map
Like these other components, we are representing multiple records of a certain kind on the screen.
This is how we represent them
|Listing||A row per record|
|Cards||An image per record|
|Map||A location marker per record|
But they have the common features that each of these items represent a record,
the items are clickable, and you can set which components come next, including components that make use of the selected record.
In this video we show mapping from data about some cities which include population.
We set an implicit filter - we want to show only cities with a population > 20 million
Then we create an Object View and attach it to the SELECT transition to demonstrate the markers are clickable and open up a downstream where an instance of the object has been selected
7.2 - Location
8 - Pager Components
8.1 - Object Pager
An Object pager components gives you a swipeable display, each swipe representing a record of a chosen Object type.
You determine which instances will be paged through using the familiar interface
On each swipe, what happens?
To configure this is just to choose a Component (or component sub-tree), which can handle instances of the kind being swiped.
The point is, an Object pager mediates between the collection of records available and a component which handles the individual records
Object pager selects an instance - creates a downstream
At any point, when using the Object pager, an instance is selected by the user.
Swiping is a different UI gesture than clicking on a list row, but the effect is the same: an instance has been selected, and a “downstream” is consequently opened up.
This means you specify a component to show the instance, but it can simply be the root of a sub-tree of components dealing with the instance.
Downstream of a selection, the Object Pager begins swiping at the selection
If the Object Pager is located downstream of the selection of an instance of its type, then the paging will start at that instance, unless, given the filters defined within the Object Pager, that instance does not appear in its target set of data.
8.2 - Period Pager
/// – [List] /// – [Chart] /// – [DataTable] /// – [WebView]
A Period pager, like an Object pager, presents a swipeable display.
With an Object pager, each swipe takes you from one instance of an Object to another.
With a Period pager, each swipe takes you from one period to the next
just 1.43 needed for this!
For each Object type defined within your Project, you can select a date field.
This would be the field that this Period Pager uses in order to determine which instances belong to which period.
The Period type
You can choose to create a swipeable monthly report, weekly report. etc.
The component to display results from a single period
With Object Pager, the “result” is one instance.
With Period Pager it can be zero or many.
The component to display the result needs to be able to handle multiple instances (so an Object View is not appropriate for example).
It could be a Listing, a Datatable, a Chart, a Cards (if the object you are displaying has Cards badge)
9 - User Components
9.1 - Login
Supabase and Firebase backends
Login is an authentication component, which communicates with backend cloud systems to authenticate against your project, using email-password.
Login uses Google Sign-in
9.2 - User Profile
The User Profile component is a specialized Object View
It is dedicated to displaying the contents of the User Profile record for the current user.
When is there a User Profile record?
A User Profile exists for the current user only if:
Enabling users to edit their Profiles
This is really simple.
User Profile available everywhere
Normal Object Views need to be located downstream of the selection of an object of their set type.
In effect, the Profile Object is always selected. There is only one for the current user, so no selection is necessary to identify it.
10 - Web Components
10.1 - Info
The Info component is the component most like a “page”.
It allows you to present information to the user.
It can contain media as well as text
You can also include html markup, and/or use the Html Editor
If you prefer, you can select the Markdown mode.
10.2 - Web View
Webview is like an embedded browser.
You configure webview by giving a URL, and webview presents the webpage available at that URL.