When building a Time Entry Zapp, the user may need to add a new project to the timesheet. In most typical web applications where the timesheet is a table, adding a new project requires adding a new row and filling in the project details, such as the name, description, ID, etc.
Some tables may already have a few empty rows and all the user needs to do is fill in the project details and in some cases, there may be a need to first add the empty row and only then fill it in.
Attaching and connecting the Add Project '+' button
On the timesheet page of the Zapp, attach the ‘+’ button to the relevant button on the web application that adds another empty row to the table. The button to add an empty row may be in a column as part of the timesheet table or a button outside the table.
Click the ‘+’ button and connect the "Add Project to Timesheet" page.
‘+’ button script to mark the empty row
The ‘+’ button to add a new project to the timesheet may include a short script to be able to identify the index of the first row that is empty in the timesheet table on the web.
The reason we need to know the index of the first empty row is so that we would know which row to fill out with the new project details (see additional details in the following section).
To view, edit or add the script, open the web properties dialog by clicking the wrench icon in the control toolbar when hovering over the control.
Navigate to the PROPERTIES tab, scroll down and expand the Override actions section.
To add a new script, enable the Click override and add your script.
In some systems, such as SAP and PeopleSoft, this script is provided out of the box.
Here is a sample code for saving the first empty row index:
//Get Time Sheet table control
var timeSheetTbl = context.getControl("TimeSheet");
//Save the last row index of the table + 1
shared.emptyRowIndex = timeSheetTbl.rowCount + 1;
console.log("Empty Row index " + shared.emptyRowIndex);
How to attach the Add Project page to an empty table row
In the Add Project page there are two areas. The top part of the page includes the fields that the user will need to fill out to define a new project. The bottom page of the page below the “Table to Attach” separator includes the actual table where a new project row is added. We’ll call this table a ghost table since it is not actually visible to the user on the mobile device.
The purpose of the ghost table is to allow the user to fill out an empty row in the timesheet table on the web with the new project details. We only display to the user the fields of the relevant columns representing the project details, but those fields are connected the first empty row of the table (we filter out the non-empty rows).
Once the ghost table is attached, the project fields displayed to the user will be automatically connected and there's no need to attach them as well.
In order to show to the user the relevant fields to fill out to add a new project, you will need to attach the relevant columns from the web. Once you attach each column, the associated fields in the top part of the page will become enabled.
Click on Get Started to start the Attach Wizard and follow the instructions to attach the table from the web.
You will need to attach the table normally but when modifying the type of the control to apply, a lookup type or dropdown type, for example, you can grab that type from any row in this table. The last step of attaching the ghost table will ask you to connect to the first empty row. We will automatically detect the first empty row and connect that to the controls in the Add Project dialog.
Note that the last column in the table to attach is a Delete button to delete that empty row. This delete column will be automatically attached to the Cancel button at the bottom of this page.
If the timesheet table contains a specific column with a Delete button per row, attach that column. If the timesheet includes a different way to delete a row, you may need to modify this page to attach the Cancel button differently.
Modifying the control types of the project fields
By default, the Add Project page contains two fields that describe the project. One field is a dropdown and another is a lookup.
The timesheet table in the web application may include different types of fields that describe the project. For example, instead of a dropdown, you may need another lookup.
To change the type of project field on the mobile page, simply select a different type of control that matches the type on the web application.
First, attach the relevant column from the web.
When prompted to attach the type of control for that column, you can select a different type of control from the toolbar on top that matches the actual type of control of the column on the web.
If you select any of the visible control types, the control on the mobile page will remain as a dropdown. If you select any of the types available under the Other menu, the mobile control type will change accordingly.
Adding another project detail field
By default, the Add Project page contains two fields that describe the project, but you may want to add additional fields that are required in your web application.
First you need to grab the relevant column, apply the relevant control type, and add it to the ghost table, then open the ghost table ILE and go to the ITEMS tab. Note that the new column you just added is now in the Unassigned section of the table items.
Drag the column to the Top Level section of the table items.
Click on the ‘+’ button next to the column you just added to add this control to the top section of the page visible to the user.
You should now be able to see this new control on the page.
Removing a project detail field
By default, the Add Project page contains two fields that describe the project, but you may want to remove a field that is not required or one that you added and no longer need.
To remove an unneeded field, first delete the control from the top part of the page visible to the user.
You can then remove the unneeded column from the ghost table by going to the table ILE and navigating to the ITEMS tab. There, drag the unneeded column from the Top Level section to the Unassigned section or simple click on the ‘-’ icon next to the control you wish to remove.
Once the column is in the Unassigned section you can simply click on the ‘-’ icon to remove it completely from the ghost table.