Project scheduling tool made in Flex – OnTime

Program for project scheduling made in Flex

Program is located on this URL:

I would like to show you a project I made using Flex. It is a project scheduling program that allows you to make a full building or any other construction schedule. Features of the program include:

  • Creating new tasks and modifying them
  • Create connections between tasks (with options of FS – Finish Start and FF – Finish Finish)
  • Indenting tasks – creating WBS tree structure (WBS – Work Breakdown Structure)
  • Full undo and redo functionality
  • Import projects from Microsoft Project
  • History for every task performed
  • Input of financial data
  • Cash Flow diagrams based on financial data and schedule
  • Pie chart diagrams showing financial data per task bases
  • Exporting data as XML (with full history for each task)
  • Customizing columns
  • and some more…

So now let’s do a quick intro of the features and functions of the program. When you first load the program (URL is provided above). You are welcomed by a login screen shown below.

Fields for the test login are already provided, so we can just go ahead and click Login button.

After the server authenticates us as a valid user we are presented with a new screen, where we have a list of all the projects saved under our login. For each available project we have the date and time of the last save and number of tasks project has.

On the second screen we have the following options:

  • Start a new project
  • Open an existing project

Now let’s go and create a new project, so we can see what we can actually do with the scheduling program. When we click the button labeled Open New Project we are first greeted by a input box that is asking us about the name of the project. For example let’s call it Test Project – 3 story building and click OK.

Depending on the size of your browser window the program will try to adjust itself and show you the maximum number of columns you can view without a horizontal slider. Three columns are always on: Id, Task Name and Gantt Chart (others can be turned on or off by clicking on Show/Hide columns icon at the bottom of the program).

Now let’s take a look at the environment of the program. In the top bar we have program name (OnTime) and back button to go to list of all projects. In the middle is the project name (which we can change by clicking on it), and on the right side is the user data (first and last name) and feedback button, with which you can send me any thoughts you have about the program, and I would encourage everyone to do so 🙂

Just below the header bar we have a set of 7 buttons that provide functionality for our scheduling program in the table below. On the image below you can see what each one of those buttons does.

Just below function buttons we have meat of the program, actual tasks and data associated with it. Below is the list of available columns:

  • Id – number of the task (starts from 1 and inrements by one in each row)
  • Guid – Global Unique Identifier, every task has it’s own Guid that distinguishes it from all the others
  • Task Name
  • WBS – Work Breakdown Structure
  • Outlinelevel – 1 is the lowest possible level
  • Duration – in days, difference between start date and finish date
  • Percent Complete – how much of the task is already completed, values range from 0 to 1
  • Start Date – start date of a task
  • Finish Date – finish date of a task
  • Connections – with it we can set predecessors and successors for each task
  • Gantt Diagram
  • Financial data – expenses

Again if you don’t see any of the columns listed above and would like to see and change them, just click Show/Hide columns button in the lower right corner of the screen.

Let’s now input some data into the program. Name the first task already on the screen Site Preparation, set its duration to 10 and start date to 3rd of March 2010.
Now lets click the first functional button that enables us to create a new task. Let’s call it Foundations. Now create two new tasks, calling the first Excavate foundations and the second one Form and cast foundations.

Now select Excavate foundations task and indent it to the right. It’s WBS will turn from 3 to to 2.1, and it will become a subtask of Foundations task. Do the same with Form and cast foundations (it’s WBS should be 2.2). Set the duration of Excavation to 8 days and Form and cast foundations to 15 days.

The program should look like the image below.

Now let’s do some connections. First we know that we cannot begin forming and casting foundations before we excavate a hole where foundations will stand. So we connect task nr. 4 (Form and Cast foundations) to task nr. 3 (excavate foundations), we do this by inputing value 3 into the field connections for the task nr. 4. If we don’t specify type of connections it is assumed that you meant FS connection (so when task nr. 3 will finish task nr.4 will start). We could also inputed 3 FS or even 3 FF if we wanted both tasks to be completed at the same time. Now we also set connection of Foundatins Task (task nr. 2) to be started right after task nr. 1 is completed.

Once we set up connections we don’t have to worry about tasks being completed as we specified, for example if we than change finish date of Site preparation task, than start date of foundations will be changed accordingly.

Again you can see what happens in the image below.

Now let’s create 4 new tasks and name them as follows (and change their durations)

  • Structure Concrete Shell with floor plates
  • 1st floor (duration 31 days)
  • 2nd floor (duration 31 days)
  • 3rd floor (duration 31 days)

Now indent 1st 2nd and 3rd Floor under Structure Concrete Shell with floor plates and set the following connections. 3rd floor to 2nd floor, 2nd floor to 1st floor, and Structure Concrete Shell with floor plates with foundations.

You can help yourself with the picture below if I didn’t make myself clear enough 🙂

OK, now let’s finish this schedule up, let’s add 6 more new tasks:

  • Roof (duration: 42 days)
  • Outside envelope (duration: 56 days)
  • Interior work (duration: 93 days)
  • Final Clean-up and Occupancy
  • Remove debris from building (duration: 6)
  • Final completion (duration: 0 – making this task a Milestone, you will notice how the representation of the task is changed in gantt chart)

Indent Remove debris from building and final completion under Final Clean-up and Occupancy, and connect Roof with Structure Concrete Shell with floor plates, Outside envelope with Roof, Interior work with Outside envelope and Final Clean-up and Occupancy with Interior work.

Completed schedule should look similar to the picture below.

Our project thus begins on 3rd of March 2010 and is expected to be finished on 19th of February 2011, so just a little under a year. Now let’s go ahead and click the last functional button (above the schedule) that will hide Gantt chat and show us Financial data or expenses.

Input the following data under expenses column (these values (as is the whole schedule) are fictional and only here for purposes of showing what this program can do)

  • Site preparation – 33.000$
  • Foundations – 480.000$
  • Structure Concrete Shell with floor plates – 320.000$
  • Roof – 140.000$
  • Outside envelope – 900.000$
  • Interior work – 485.000$
  • Final Clean-up and Occupancy – 12.000$

Now that we have schedule and financial data we can generate cash flow diagram based on values inputted into the program. Click on the 3rd button on the bottom right side of the screen (Show Graphical Data). You will be presented with a cash flow diagram, that is calculated based on the cost of a given task and when it is going to be performed. It is assumed that money for every task is distributed evenly from start to finish of that task.

In the bottom right corner of the pop up window select Show per task (show together is default value). This time cash flow diagram is presented in a different way, now we can see which of the tasks are contributing to what part of the total cash flow…pretty cool huh

Now let’s click Pie Chart button on the top of the pop up window. This time we are presented with a pie chart, where all the tasks are presented as part of the whole cake (the whole cake being the whole project). If we select any of the tasks from the drop down menu on the bottom right side we can expose that task.

One last thing I will mention in this quick introduction of scheduling program is the information that you can see if you select a row in the schedule, and then click the Information button (6th one from the left). You can see what was happening to the given task since the beginning. For example let’s select Final Clean-up and occupancy and click Information. In the list than opens below the schedule we can see the entire history of this task. From the moment it was created, and it’s name changed to the expense we added at the end. It is also noted if the user (that is us using the program) was responsible for the change or was the change done automatically (example shown in the image below).

Try the program out, let me know what you think of it and please provide some feedback about what you like, what you dislike, what you would want to see changed or added.



, , , , , ,

  1. #1 by David Costelloe on January 19, 2010 - 2:11 pm

    That is amazing everything fits nice into place. Being new to Flex I can see the results of what can be done with this tool.



  2. #2 by Josh Nankivel on January 19, 2010 - 3:27 pm

    Very nice overview post.

    Just a note on using this for a Work Breakdown Structure. You mentioned tasks with the WBS, but the WBS should not have any tasks in it. It’s a deliverables-based breakdown of scope.

    Does this tool allow you to specify a deliverables-based WBS in addition to the other features?

    Josh Nankivel
    WBS Training Instructor

  3. #3 by Ladislav Klinc on January 19, 2010 - 8:01 pm

    @David: Thanx

    @Josh: What do you mean by WBS should not have any tasks in it? As of now, WBS is in place only for purpose structuring your schedule, it is similar to indenting with MS Project…

  4. #4 by PM Hut on January 20, 2010 - 12:30 am

    This is probably the most comprehensive review of a PM tool I’ve ever seen.

    What are your plans, are going to make it open source? or are you going to monetize the application? The interface and the look and feel will probably need some tweaking (it shows that they’ve been completely done by a programmer), but they’re good and very simple. Refreshing the page will require you to login again.

    Still, if possible email me when you have plans for this project, it is interesting!

    PM Hut

  5. #5 by Ladislav Klinc on January 20, 2010 - 9:34 am

    @PM Hut: I currently don’t have any plans regarding this application other than trying to finishing it. I am also doing some rather interesting things with this app, but that won’t be our until probably mid February. I will fix the refresh problem, since as of right now, no sessions or cookies were used 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: