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 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 desired function on it. 

Pre-Requisites

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

  1. A Database connector has been created
  2. The entities that we are going to refer on a listing page are already marked as “Downloadable”
  3. There exist few records in the database table
  4. 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 following design works best for most of the users.

Action Bar

Search & Filter Bar

Records Listing Area

 

 

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

 

Design View in transform Studio

 

 

App View in makeen transform

 


 
Repeater Configurations 

 

Steps to follow:

  1. Set a meaningful identifier to the repeater control

 

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

 

 

 

  1. 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 data tab of Get Data, select Fetch Type as “Entity” and choose the entity from the drop down below as depicted in the snap shot 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"]

 


 

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

 

Current["txtSequence"]

 

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

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

Variables In makeen transform:

Variables in are means to pass information from one fields 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 set variable trigger of edit button, under 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 key word in makeen transform that will store the identity of the record user would select).

 

In navigate page 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 snap shots 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 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 especial 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 and 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 purpose, 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 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 Daily Load Sheet form.

This field has been bound and mapped with the primary key “ID” in the Daily Load Sheet main table.

 

For controls residing under a child table (i.e. under a repeater), we have to add a similar field in each repeating segment of the form.

 

Once these settings are done, whenever a form is submitted, makeen transform would seamlessly handle the case of Editing of a record.