Build a Time Recording App with Tadabase (Part 3)

If you have been following this series, then you will recall that I ended part two with a list of things I would like to improve in the app we have built so far:

1. It is possible to 'start' more than one time record recording at once (and they would all show in the list) - can you do more than one thing at once? I would ideally like to hide the Start component if there is an existing open time record and hide the Stop component if there isn't one to show.

2. Although new records added by clicking start appear straight away in the table, when they are stopped the table is not updated.

3. We still have the large negative number showing for time spent when there is no end date/time.

4. Some of the UI needs tidying up (titles etc).

5. Ideally there need to be pages to manage Users and also Jobs.

This time we are going to look at these points and along the way I may sort out some one the tidying up (and mention if relevant).

Preventing More Than One Open Time Record

In order to achieve this, it will be necessary to 'calculate' how many open time records (ones with no end date/time) there are for a user. This will then allow us to use this information to hide the Start component if there is an open record and hide the Stop component if there is not.

The calculation part of this is actually pretty simple - we just need to add a Count field to the Users table like this (in the Data Builder):

Note the Data Condition limiting this to count records with End Date/Time is blank.

Now, above I said we can use this to hide relevant components...

Note to any Knack Users

If you are an experienced Knack user, you will be thinking this should just be a matter of setting a Page Rule with the relevant Hide options - Unfortunately Tadabase Page Rules don't have this feature (although they are otherwise similar).

To achieve this in Tadabase, it will be necessary to use a couple of lines of Javascript code - it's not at all frightening and just needs to be added in to the Javascript tab for the My Time Recording page:

Here is the actual code:

var loggedInOpenTime = '{loggedInUser.Number of Open Time Records}';

if (loggedInOpenTime > 0) {
    TB.hideComponent('component_6');
} else {
    TB.hideComponent('component_7');
}

You can work out the number for each of the components on a page by simply hovering the mouse as shown here:

Now, if you run your app you will find that the correct items are shown when the page loads - HOWEVER, if you Start or Stop a time record, the hiding and showing options do not trigger! You need to refresh the page to get this to happen.

If we want to achieve this, then we will need to get Tadabase to refresh the page when starting or stopping a 'recording'. I found the simplest way to do this was to change the Submit Rule of the Start component and the Action Rule of the Stop Action Link - as follows:

and

Note that I used a shortened version of the page's URL (without the Tadabase parts):

/job-time-recording-for-blog/my-time-recording

So there we have it - the system now prevents a user from adding more than one time record at once and only shows them the features required at the time.

And, fortuitously, it has also solved the second issue (of updating the screen after stoping a time record)!

Getting Rid of the Negative Number

This is a fairly simple exercise - just requiring the addition of an Equation field with an If element:

The equation is:

IF({End Date/Time}<>0,{Time Spent}/3600,0)

The division by 3600 is because {Time Spent} is actually stored in seconds and we want it in hours and decimals.

Having done that, it is just a matter of replacing the previous time spent column in the table with the new one (and renaming the column title):

So here's the 'completed' app (with an open time record to show this lates update:

Note that I have also changed the 'Theme' for the app (in settings/themes) to my favourite - Serenity.

Adding a Jobs and User Page

In my 'final' version of this app, I have added pages for users to be able to add and manage users, Jobs etc., changed the My time records to be grouped by Job and the ability to add a new job when starting a time record. I am not going to go through all of these processes but here are some screen shots of the final result:

Conclusion

So there we have it - a completed Time Recording app!

In my time building this add I have been very impressed with the ability to make a really nice looking and easy to use app which I know users would enjoy using. The new themes are a huge step forward in this respect - but so too are the tools available in the page builder to layout your pages in a friendly way.

I am going to use this app as a platform to build further functionality in future blog posts - for example expanding the system to include elements of Project Management, CRM etc. Any suggestions would be most welcome!

I expect that many readers know that I spend the majority of my time building solutions for client's using Knack and these two platforms are very similar in many ways. I am definitely still more comfortable in Knack but I have to say that I am very impressed with the end result I have achieved in a short period of time here and also with the responsiveness of both the builder experience and the live app itself.

If you would like to find out more about Tadabase click here.