Components

• 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
• 3.1: About Main Components
• 3.2: Listing
• 3.3: Process
• 3.4: Object View
• 3.5: Actions
• 4: Container Components
• 4.1: Tabbed Dialogue
• 4.2: Vertical Container
• 4.3: Horizontal Container
• 4.4: Layouts
• 5: Data Components
• 5.1: Chart
• 5.2: Data Table
• 6: Media Components
• 6.1: Gallery
• 6.2: Cards
• 7: Geo Components
• 7.1: Map
• 7.2: Location
• 8: Pager Components
• 8.1: Object Pager
• 8.2: Period Pager
• 9: User Components
• 9.1: Login
• 9.2: User Profile
• 10: Web Components
• 10.1: Info
• 10.2: Web View

1 - Introduction to Component Types

Component Flow

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

Components are the building block of Apps.

They are put together in a Component Flow to make an App

Component Types

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.

Process Interactions

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
2. Link it into the Component Flow

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

When a Component is first created, it will appear in the UNLINKED COMPONENTS column on the right, as shown here:

2. Link the component into the App

Now you need to Link the new Component into the Component Flow.

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

1. Unlinking
2. Deleting

1. Unlinking

When you remove a Component from the Component Flow, we refer to that as Unlinking the Component.

After a component is UNLINKED, it appears in the Components Column.

From there it can be deleted by clicking on the trash icon which appears to its side.

Check out How to unlink a component.

2. Deleting

Delete a single Component

Once a component is UNLINKED, find the component under UNLINKED COMPONENTS in the Components Column and click on the trash icon

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

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.

Tabs in the Component Editor

Tab
	Other components
	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
	For INFO

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.

A Process has sub-components in that it can contain different kinds of interactions and actions it contains.

LISTING

LISTING can do a lot.

It shows you data from the database.

You can define sophisticated filtering.

But it can also “tee-up” (to mix metaphors) an Object instance to be selected by the user and passed to Processes and other components downstream

ACTIONS

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

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.

In this video showing how to create a LISTING, we had defined an Object called “event”.

Creating an Events Listing

LISTING Transitions

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
Read	SELECT	yes
Update	EDIT	yes
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

Setting a Component for ADD

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?

You can

• 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.

Implicit filters

Implicit filter: show only cities in China with a population > 10 million

User filters

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.

User filter: show only cities with a population > 10 million

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.

Adding sort controls to a Listing

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.

As an illustration, we downloaded the city Data, and defined a Table Object to be able to incorporate the data into a Project

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..

See also

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

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.

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..

Composing two Object Views together in a Vertical

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

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
Shown	Not shown
Enabled	Disabled
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

• default
• 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:
  • Fixed
  • FixedCircle
  • react
  • reactCircle
  • textIn
  • titled
  • flip
  • custom
• Curved

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

Custom container

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

Chart types

With the Chart component, it is possible to create

• Bar Charts
• Line Charts
• Scatter Charts
• Pie Charts

First 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!

Bar chart to show quantities of products sold, by product

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!

Line chart to show income grouped by week

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!

Scatter chart to show turnover and units sold per product together

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!

Pie chart to show turnover from products proportionally

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!

Creating a data table

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

1. a column you have added to the table which contains numbers (i.e. represents a number field)
2. an aggregate calculation. One of:

• count
• sum total
• average
• maximum
• minimum

3. 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!

Adding a footer calculation

Display Modes

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

Making a calculation highlight component

You can compose such a “highlight” with together with other components in a Container Component

6 - Media Components

6.1 - Gallery

Simple 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!

Gallery of the elements

Making images clickable

Like the Cards component, it is possible to make images selectable by the user.

Unlike with the Cards component, there is not an Object instance underlying each of the images, so the user click does not create a downstream area in which an Object is remembered.

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.

Adding texts to image - then able to use Card display modes

Comparison with Cards

Similarities

• Displays use “Card” concept - can attach texts to Media to fit Card model
• Images can be made clickable

Differences

• 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

• Masonry
• Carousel

Gallery display modes

6.2 - Cards

Cards is like a mix between Gallery and Listing - visual displaying like a Gallery, but functioning like a Listing in the sense that every image represents a record which can be selected by the user.

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:

• title
• subtitle
• caption
• image

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 :

1. give the county Object the Card badge and
2. 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

The Map component has similarities with Listing, Cards

Like these other components, we are representing multiple records of a certain kind on the screen.

This is how we represent them

Component		Item
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.

Example Map

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

Mapping some large cities

7.2 - Location

8 - Pager Components

8.1 - Object Pager

Object pager

An Object pager components gives you a swipeable display, each swipe representing a record of a chosen Object type.

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.

You could choose to have a simple Object View for example, but you could also have a Tabbed View , with several tabs giving access to actions to do with the instances etc.

The point is, an Object pager mediates between the collection of records available and a component which handles the individual records

Using an ObjectPager in conjunction with an Object View to page through (swipeable on device) invoices one by one

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]

Period pager

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!

Using a PeriodPager to look through invoices by month, by year

Date fields

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

Login

Supabase and Firebase backends

Login is an authentication component, which communicates with backend cloud systems to authenticate against your project, using email-password.

No backend

Login uses Google Sign-in

9.2 - User Profile

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.

Enabling users to edit their Profiles

This is really simple.

User Profile is a dedicated Object View, and so you do the same thing you do to make Object Views editable.

User Profile available everywhere

Normal Object Views need to be located downstream of the selection of an object of their set type.

In contract, as long as a Profile Object has been defined, User Profile components can be placed anywhere in the Component Flow .

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

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

Display Mode

Text/Html

You can also include html markup, and/or use the Html Editor

Text/Markdown

If you prefer, you can select the Markdown mode.

10.2 - Web View

Webview

Webview is like an embedded browser.

You configure webview by giving a URL, and webview presents the webpage available at that URL.