Time Tracker

INTRO TO THE ENVIRONMENT

This tutorial shows how to create an efficient and useful Timesheet application.

Before you start building your first Codejig App, take a quick look at the home page of Codejig App Builder.  

CREATE A NEW WEB PAGE

From the Web pages section click on the Add page button and name the new web page Time Tracker.

INTRO TO THE WEB PAGE EDITOR

App Builder opens the page in a Web page editor. It consists of the Components/Properties panel, Working area and Type actions / Page properties panel (take closer look at the screenshot below).

Please notice that the Components panel is automatically replaced with the Properties panel whenever you select anything in the Working area. Type actions / Page properties panel is hidden by default and can be shown or hidden with  more/less button.

ADD SELECT FIELDS

From the Components panel -> ADD NEW FIELD choose Select field, drag it to the Working area and name it Employee. Add in the same way  two more Select fields and name them Project and Task.

ADD DATE AND TIME FIELDS

From the Components panel -> ADD NEW FIELD -> Date and time choose Date field, drag it to the Working area and name Date.

Add two more Time fields and name them Start and Finish.

ADD NUMBER FIELD

From the Components panel -> ADD NEW FIELD choose Number field, drag it to the Working area and name Worked time, hours.

ADD MULTILINE TEXT FIELD

From the Components panel -> ADD NEW FIELD -> Text input select Multiline text field, drag it to the Working area and name Description.

PUBLISH THE APP

Before we continue, let’s take a quick look at what has been made so far.

Save the progress by clicking on the red button Save web page on the Navigation bar.

Press on the Publish button.

Publishing consists of two steps:  Build (compiles app project into executable file) and Deploy (stops app container and runs it with new version of executable). The whole process takes about 40 sec. when performed for the first time.

Once publishing is completed, Open the app.


EXPLORE THE APP

You should see the page like shown in the screenshot below.

The application is functional. Fill the data and press the Save and Close button. Use Create new link when entering values for Employee, Project and Task.

Note that
web page views for Employee, Project and Task as well as table view and list view for Time Tracker have been auto-generated.

App Builder automatically generates web page, table, text and list views. Some other views (like MS Word view or XML view) have to be explicitly defined by the developer to be used.

Views are shown on the Type Details page, with auto-generated views located under developer-defined views.

SPLIT GROUP BOX

Let’s refine the app and add more functionality to it. Close browser tab with Time Tracker app or switch back to App Builder tab.

Move the cursor onto the main group box and click on the double arrow icon to divide the box into two parts.

HIDE THE RIGHT GROUP BOX

Click on the right group box, go to the Properties panel -> GENERAL and put a tick on the Hidden option.

You will see that the right groupbox has been shaded.

ADD NEW ROW

Hover over the bottom of the left group box for the button with plus icon to appear. Unfold it by clicking on the arrow button. Click on the option with three boxes.

MOVE THE FIELDS

Drag Employee, Project, Start and Worked time, hours fields to the left box; Date, Task and Finish to the middle box; Description to the right box.

DELETE THE UNNECESSARY BOX

Move your cursor onto the empty box and delete it by pressing the cross button in the right upper corner of the box.

ADD BUTTONS

Go to the Components panel -> LAYOUT and drag the first Button below the field Start and the second one below the field Finish.

ADD ROW

Look for the Plus button below the main group box, unfold it and select the option with two columns.

MOVE THE BOXES

Drag one box below the button in the left column. Drag the second box below the button of the middle column.

MOVE FIELDS AND BUTTONS

Drag the Start field and its button to the added box below. The same for the Finish field and its button.

SELECT BOXES

To select the boxes where fields Start and Finish with their buttons are located, click on some place inside boxes which is not taken by either field or button. (NOTE: in the Properties panel -> GENERAL -> Component you must see Column.)

ADD PROPERTIES TO BOXES

Go to the Properties panel of the selected box, Appearance -> CSS and to display the button and the field in one line, type the following properties:

display: flex;

align-items: flex-end;

Do it in the same way for the box with the field Finish and its button.

 

SAVE WEB PAGE

Save the progress by clicking on the red button Save web page on the Navigation bar.

GROUP BOX HEADER

Select the main group box where all fields are located. In the Properties panel -> GENERAL, click on the option Show header. In the Title field specify the header ADD TIME LOG.

CHANGE FIELDS PROPERTIES

To add a placeholder for Description field, click on it; in the Properties panel -> GENERAL -> Placeholder type Describe the accomplished work here.

To resize Description field, click on it; in the Properties panel-> APPEARANCE -> Size change value to 7 (number line heights).

To disable Worked time, hours field, click on it, in the Properties panel -> GENERAL, put a tick on the option Disabled.

To make the field Employee required, click on it, in the Properties panel -> VALIDATION put a tick on the option Required. Repeat the same step for the fields Date, Start, Finish, Project and Task.

REMOVE BUTTON’S TITLE

Click on the button, in the Properties panel -> GENERAL -> Title type a space. Repeat for another button.

ADD ICON

Click on the button, in the Properties panel -> APPEARANCE click on the field Icon and in the appeared field start typing clock. Click on the icon to select it.

Click on the button, in the Properties panel -> APPEARANCE, look for an option Icon color and click on the gray square right near it.

In the appeared color window move the selection circle to the left upper corner where the white color is located. Click save.

SAVE WEB PAGE

Save the progress by clicking on the red button Save web page on the Navigation bar.

CREATE ON FIELD CHANGE

To calculate the amount of worked hours when the user fills the field Finish, you need to create an On field change action.

Click on the field Finish, in the Properties panel -> ACTIONS, select On field change option.

INTRO TO CODE BLOCK EDITOR

Before creating your first code actions in Codejig         App Builder, take a quick look at the elements of the Code block editor.

SET FIELD

As you will store the calculated result

in the field Worked time, hours, you need to set some new value to this field.

In the Data panel -> VARIABLES -> item, select the field Worked time,hours. On the top of the panel, click on the Set option. Connect the block to the onField_change function.

GET SUM BLOCK

In the Block panel, select category Number. Drag and connect the sum block to the item.Worked time, hours.

Set the action of block to minus.

GET TIME FUNCTION

To calculate the number of hours of the fields Start and Finish we will use a special get block from the TIME category.

In the Block panel, select category TIME. Drag and connect get block to the first part of the sum block and one more to the second part of the sum block.

Change the actions to hour-of-day.

GET FIELDS

In the Data panel -> VARIABLES -> item, select the field Finish. On the top of the panel, click on the Get option. Connect the block to the first part of the sum block. In the same way connect the field Start to the second part of the sum block.

MOVE BACK

Save your progress by clicking on the button Save on the Navigation bar.

Go to the Web pages section in the Project menu and move to the Time Tracker web page.

CREATE BUTTON ACTION

To set current time to the fields Start and Finish, you will create specific actions for the buttons.

Click on the button near the field Start, in the Properties panel -> ACTIONS -> Before Server Action, choose option Create new, name it Start now and get redirected to the Code block editor.

SET FIELD

To automatically fill our Start field with the value of current time, we need to set some new value to it.

In the Data panel -> Variables -> item, select the field Start. On the top of the panel, click on the Set option. Connect the block into the Start now function.

GET NOW FUNCTION

In the Data panel select option FUNCTIONS and type now. Click on the option Local time and click on the function now; in the top of the Data panel click on the button Select. Drag and connect the block to the item.Start.

GET TIMEZONE FUNCTION

Now function calculates current time relatively to a timezone, which has to be specified as a parameter. Let’s use browser timezone in our case.

To do that, in the Data panel select option FUNCTIONS and type get. Click on the option Timezone and click on the function get browser timezone; in the top of the Data panel click on the button Select. Drag and connect the block to the now function block.

MOVE BACK

Save your progress by clicking on the button Save on the Navigation bar.

Go to the Web pages section in the Project menu and move to the Time Tracker web page.

FINISH NOW ACTION

In the same way, create a Before server action for the second button. Name it Finish now and instead setting Start field, set Finish field. Expected result:

TEST YOUR APP!

Publish your application by clicking on the Publish button on the Header bar.

Wait for some seconds. After your app is published, open it by clicking the Open button on the Header bar. Test out your first Codejig App!