Follow

Building a new Time Entry Zapp using the Micro App

Creating a New Time Entry Zapp from a Universal Micro App

Start creating a new Zapp by clicking the New Zapp button at the top of the Dashboard. You will be directed to a page with available Universal Micro App categories. Select either the HR or Field Services category to find the Time Entry micro app.

 

Select_TE_in_Category.png

 


The name and description of your Zapp are already filled and you can always edit those fields. Enter the URL of your web application and click Go.

 

Enter_URL.png 

 

The Zapp is ready to be attached to the web application. You will be encouraged to view a quick video tutorial about working with the Time Entry micro app, which is also available in this article.

 

Video_preview.png

 

Once you watch the video and dismiss the introduction screen, you can start attaching your Zapp and also check out all the available pages in Style mode at any time.

 

Style_mode.png

 

 

 

Attaching the Time Entry Universal Micro App to a Web Application

 

Now that your micro app is selected, you need to attach each mobile control to a corresponding web control on the web application.

The following video describes the process of attaching the Time Entry micro app to a web application. Detailed instructions are below.

 

 

To begin attaching the Time Entry template using the wizard, click on the Get Started button in each one of the pages above the mobile page view in Simplify mode.

 

Get_Started.png

 

Learn more about working with micro apps in general and how to attach mobile controls to the web application in this article.

 

 

Attaching the Time Entry table

 

Once you reach the timesheet page click on Get Started to start attaching the timesheet elements.
It is recommended that the timesheet table on the web contains at least one or two rows of information, both project details and hours, but the row can be empty of hours information.

 

Attach_timesheet.png

 


You will first be asked to attach the Calendar or Date Picker.

 

 

Attach_date_picker.png

 

 

Select the calendar from the web page that allows you to select the relevant time period.

Once the calendar button is attached, you are now attaching the timesheet table itself. You will first attach the project details columns (name, description, ID, etc.) and then you will attach the columns representing the days of the week.

 

Attach_column.pngColumn_to_attach.png

 

Note that each project column is attached as text. If you need to later convert the columns to dropdowns, lookups or other types of controls, you can do that at the end of the table attachment flow. Learn how to convert text columns to non-text types in the Data > Table article, under the “Activating a Non-Text Table Item” section.

 

Once you attached the project details columns, you are now attaching each individual day column. You will first be requested to attach the day column and then convert it to text field.

 

Attach day column:

 

Attach_Monday.png

 

Convert to text field:

 

Attach_Monday_text_box.png

 

Note that you are starting from attaching the Monday column but if your timesheet table starts on Sunday or Tuesday or any other day, feel free to grab that column first. The actual content on the web will override the sample content in the micro app.

 

Continue attaching the remaining days columns. First attach the column and then convert to text field.
As you grab the days columns, the weekly view header changes to reflect the actual day and date in the web application.

 

Weekly_header.png

 

You can choose to change the style of this weekly view or customize the displayed text or selected day. This article describes how to configure and style the weekly view header.

 

Once you attach all days of the week in the timesheet table, you are taken to the project details page (row drill page) to attach the total hours of that project as well as the delete button that deletes a project row.

 

Time_Entry_-_attach_drill_page.png

 

Note that similar to the day columns you attached previously, attaching the delete button is also a two step flow. First you are prompted to attach the column with the button used to delete a row.

 

Time_Entry_-_Delete_column.png

 

Then you convert the column to a button type:

 

Time_Entry_-_Delete_button.png 

 

Once you finish attaching the timesheet table, you are prompted to hide or filter the empty row is the table, so that the timesheet on the mobile view is lot cluttered with empty project row.

 

Time_Entry_-_hide_empty_rows.png 

 

If the all timesheet rows are empty, the table will show that no projects are available.

 

Timesheet_empty_state.png

 

You can customize the empty state message in the table ILE.

 

Learn more about attaching and configuring the Delete Project button in this article.

 

The last four steps in the attachment wizard are related to attaching the bottom floating elements on the page.

 

Bottom.png

 

Attach the text indicating the total hours of the week, the button to add a new project to the timesheet and the two buttons to save and submit the timesheet.

 

Note that the text representing the Total Hours is attached as a text pair so you will need to grab both the label and the number of hours.

 

 

Attach_hours.png

 

 

If the type of control on the web application representing the total hours is different than a text or a text pair, make sure to first change the type in the control toolbar before attaching it.

 

To learn more about how to attach and configure the flow to add a new project to the timesheet associated with the ‘+’ button, read this article.

 

 

 

Attaching the remaining pages in the Zapp

 

Once all the controls on the timesheet page are attached, you can finish attaching the remaining pages.
Click on each one of the buttons on the page and select the relevant page offered by the micro app and attach it to the corresponding page on the web.
For example, click on Save Progress and select the Save Confirmation page and attach the OK button to a corresponding button on the web or keep it virtual, in case the web does not offer a dedicated confirmation dialog.

 

Progress_saved_page.png

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.