Selecting List Items

Making list items selectable

Now we are able to create new Objects (instances) and also able to view them in a list, we can take the next step of making it possible to select one of them from the list to be able to do something with it.

SELECT Transition

To make the items of the list selectable, we just need to set a component as the destination of the list's "Select" transition.

How we do this will be familiar to you by now. As with the Login transition for the Login component, or the Add transition for the List component, we set the Select transition simply by selecting a Component in a dialogue which appears when you click to edit the Select transition (see image below).

Selecting instance and passing it on

But there is something different this time ...

We are not just configuring one component to follow from another component.

We will be configuring a component which will follow from another component from which we have selected a particular Object (instance).

Typically, we will want the components which follow to know about the Object (instance) which the user has selected.

Take a moment to read about selecting objects

Now let us make our Main Actions component the destination of the Select transition of the Patient List and see how we can configure a component which uses the selected instance ...

It is important to understand why, in the App Structure, next to Main Actions, you see (+patient). If this is not clear, we recommend once again reviewing selecting objects.

(+patient) is the indication that at this point in the App flow, an Object (instance) of type patient is available to us.

If you now click on Main Actions in the App Structure, you will see in the Edit panel which appears on the right that, under Object(s) selected by the user at this point, you see patient, as indicated here in the image below.

Making use of the selected Object (instance)

So what can we do now?

Let us look at a very quick example.

Let us add an Object View component to this App.

Within the App, select the +Add menu and navigate to add an Object View

In the dialogue which appears, as usual, you give a name for the new component, but also you specify what kind of Object (type) this Object View is going to display.

Now click on the Patient List component within App Structure and, in the Edit panel which appears on the right, under the Transitions tab, edit the Select Transition and replace Main Actions with Patient Information.

Then the App Structure will look like this.

Now click the newly added Object View ("Patient Information") component so that an Edit panel for it appears on the right.

Notice that, as indicated under Objects used, the Object View uses patient.

What does this mean? It means this is an Object View which will show information from an Object (instance) of type patient.

For this Object View to work, there has to be an instance of patient available at the point in the App flow where it is located.

Happily, we have located it at a point in the App flow where, as we can see under Objects selected by the user at this point, there is a patient instance selected.

So this is the one Object View will show.

The Object View will work "out of the box" without any further configuration. It will show all fields of the object.

To tailor what the Object View shows, read about Object Views.

So now our App flow is like this ....

User logs in...

The Patient list shows, along with a Floating Action Button bottom-right which will trigger the Patient Registration Process if clicked.

If you select a patient from the list, the App will transition to an Object View of the data contained in that selected patient

No items found.

Selecting List Items

Making list items selectable

Now we are able to create new Objects (instances) and also able to view them in a list, we can take the next step of making it possible to select one of them from the list to be able to do something with it.

SELECT Transition

To make the items of the list selectable, we just need to set a component as the destination of the list's "Select" transition.

How we do this will be familiar to you by now. As with the Login transition for the Login component, or the Add transition for the List component, we set the Select transition simply by selecting a Component in a dialogue which appears when you click to edit the Select transition (see image below).

Selecting instance and passing it on

But there is something different this time ...

We are not just configuring one component to follow from another component.

We will be configuring a component which will follow from another component from which we have selected a particular Object (instance).

Typically, we will want the components which follow to know about the Object (instance) which the user has selected.

Take a moment to read about selecting objects

Now let us make our Main Actions component the destination of the Select transition of the Patient List and see how we can configure a component which uses the selected instance ...

It is important to understand why, in the App Structure, next to Main Actions, you see (+patient). If this is not clear, we recommend once again reviewing selecting objects.

(+patient) is the indication that at this point in the App flow, an Object (instance) of type patient is available to us.

If you now click on Main Actions in the App Structure, you will see in the Edit panel which appears on the right that, under Object(s) selected by the user at this point, you see patient, as indicated here in the image below.

Making use of the selected Object (instance)

So what can we do now?

Let us look at a very quick example.

Let us add an Object View component to this App.

Within the App, select the +Add menu and navigate to add an Object View

In the dialogue which appears, as usual, you give a name for the new component, but also you specify what kind of Object (type) this Object View is going to display.

Now click on the Patient List component within App Structure and, in the Edit panel which appears on the right, under the Transitions tab, edit the Select Transition and replace Main Actions with Patient Information.

Then the App Structure will look like this.

Now click the newly added Object View ("Patient Information") component so that an Edit panel for it appears on the right.

Notice that, as indicated under Objects used, the Object View uses patient.

What does this mean? It means this is an Object View which will show information from an Object (instance) of type patient.

For this Object View to work, there has to be an instance of patient available at the point in the App flow where it is located.

Happily, we have located it at a point in the App flow where, as we can see under Objects selected by the user at this point, there is a patient instance selected.

So this is the one Object View will show.

The Object View will work "out of the box" without any further configuration. It will show all fields of the object.

To tailor what the Object View shows, read about Object Views.

So now our App flow is like this ....

User logs in...

The Patient list shows, along with a Floating Action Button bottom-right which will trigger the Patient Registration Process if clicked.

If you select a patient from the list, the App will transition to an Object View of the data contained in that selected patient

Next Step:
5
Processes with Objects as Input
No items found.