How To Create A List Page : Support

Previous: How to manage tasks

The procedure of Creating a Listing Page

While using makeen transform across multiple departments and teams, many times users want to see the records submitted by some other users. In this document, we have listed a few simple steps that would help you to create a page where all records can be listed and users can select an item and perform the desired function on it.

Pre-Requisites

Before we start creating a Listing Page, we need to make sure that:

A Database connector has been created
The entities that we are going to refer on a listing page are already marked as “Downloadable”
There exist few records in the database table
The UI of the listing page is in place with your desired look and feel.

UI of the Listing Page

One can design a listing page in numerous ways as there is no limitation on how you want to place information on it. However, in the light of learning that we have got with our clients, we suggest that the following design works best for most of the users.

Action Bar

Search & Filter Bar

Records Listing Area

A sample design of the listing page has been illustrated below. In the first image, you can see how this page would look like in transform Studio, whereas in the second image it illustrates how it would appear in the transform app.

Design View in transform Studio

View in transform app

Repeater Configurations

Steps to follow:

1. Set a meaningful identifier to the repeater control

2. While you have selected the repeater control, go to Bindings pane in the properties panel and set the binding as depicted below:

Entity["dailyloadsheet"].OrderBy(ToDate(["ModifiedOn"]).Ticks desc)

This binding would be helpful to fetch all the records from the entity “dailyloadsheet” and list the records in reverse chronological order.

Another variant can be tried out with the provision of further filtering the records with respect to Project Name and Sequence No. For this purpose following expression shall be used to define binding:

Entity["dailyloadsheet"].OrderBy(ToDate(["ModifiedOn"]).Ticks desc).FindAll((Controls["searchText"].Text ! null & Controls["searchText"].Text ! ""){true=Controls["searchText"].Text.ToLower(),["txtSequence"].ToLower()} ~ ["txtSequence"].ToLower() | (Controls["searchText"].Text ! null & Controls["searchText"].Text ! ""){true=Controls["searchText"].Text.ToLower(),["autocompleteProjectName"].ToLower()} ~ ["autocompleteProjectName"].ToLower() ).FindAll(["autocompleteProjectName"] = (Controls["pckProjectName"].SelectedValue ! null){true=Controls["pckProjectName"].SelectedValue,["autocompleteProjectName"]})

Action Bar Configurations

1. Adding an action button to Create New project

Select the Add ‘ + ‘Button' on the top right corner.

Set these two triggers for this button as well.

Set Variable:

Navigate Page:

2. Refresh Button:

For this button, triggers configuration depends upon the actual form for which you are creating this listing page. You have to create a Get Data action for every table that exists corresponding to the main form. For this particular example here are three triggers:

In Actions/Trigger, add a Trigger Button Click and add Get Data action to it.

Under the data tab of GetData, select Fetch Type as “Entity” and choose the entity from the drop-down as depicted in the snapshot below.

This way you can configure Get Data calls for:

Daily Load Sheet main table
GetData Load Details
GetData Photos

List Cell Configurations

1. Select the Label in the list cell corresponding to the Project Name and go to the Bindings pane. Here you have to add a binding as depicted below.

Current["autocompleteProjectName"]

2. Do the same for Sequence No. Label as well.

Current["txtSequence"]

You can add more fields to this repeater following the above steps.

3. Now you can add action buttons to the list cell.

Variables In makeen transform:

Variables are means to pass information from one field to another field that exists on the same page, on another page in the app.

Select the action button and go to Actions/Trigger pane in the properties panel. Here you have to add two actions on button click trigger.

Edit Button Triggers:

Set variable
Navigate page

In the set variable trigger of edit button, under the Data section, create a unique key (a collection of variables). Set the scope of this Key to “Out”, this will make the information stored in this variable outside the listing page as well.

Next, create object in definition with the value “Current” (a keyword in makeen transform that will store the identity of the record user would select).

In NavigatePage trigger set the target page.

Connecting Listing Cell with Main Form

On the main form, there are few settings to be made first. At the time of loading, we have to load the form unique identification in the context that we stored on the Listing Page. For this purpose, a property named “BindingContext” shall be configured as depicted in the snapshots below. Ideally, this property shall be set for the first control on the page (here it is a layout that encompasses all the controls on this page.

Once you have set the BindingContext, you can now simply bind fields on the form with their corresponding attribute in the Entity (i.e. column in the database table).

Here you would notice that you do not need to mention the name of the entity as the BindingContext property automatically determines it.

In order to load data in the repeater controls on a form, we need to first set the ItemSource property of that repeater.

While setting the ItemSource property we have to filter records from the child table through Foreign Key, Primary Key relations between the parent and child tables. Below you can find the expression as an example:

(Controls["LoadSheetID"].Text ! null & Controls["LoadSheetID"].Text ! ""){true=Entity["DailyLoadSheet_rptrLoadDetails"].FindAll(["dailyloadsheet_ID"]+""=Controls["LoadSheetID"].Text),""}

A minor change in syntax shall be noted here. While binding controls that reside inside a repeater control, we shall use a prefix “Current” before mentioning the name of the attribute.

Configurations For Editing A Form Data

In order to edit a record, few special settings are needed.

But before we do that, we need to familiarize ourselves with a concept around which Edit function can be built.

Makeen transform has an inbuilt algorithm to distinguish between two types of submissions i.e. submission to create a new record and submission to edit an existing record in the database.

For this purpose, we need to add a field on the form, which shall be bound and mapped with the auto-generated primary key fields in the database table.

When a form is submitted with the intention to create a new record, this field would go empty and makeen transform would insert a new record against this submission. Whereas, when we open a form from the listing page for editing purposes, this field would be populated with the unique Primary Key corresponding to that record from the database table. Therefore at the time of submission, makeen transform would not insert a new record in the table; instead, it would overwrite the existing record whose primary key matches with the ID stored in the field, with the new information.

You can refer to the following examples below to better understand how it works:

LoadSheetID is the field we have added for this purpose on the Daily Load Sheet form.