Raise your hand if you thought Javascript was a mere 'toy language' back in the early aughts? I see you in front of the monitor with your hand high in the air... er, wait, that's me looking in the mirror. Thankfully we have seen the light at TeamDirection and what has come into view are the exciting new possibilities that Javascript offers. Today's new feature? Late Binding Customizable Functions!
If that's a bit of gobbledygook bear with me because here is a simple example. Let's say IntelliGantt has a feature that lets you set the foreground and background colors for each task row of the gantt chart (which we do!). This is a powerful feature that is quite helpful, but what if I want it to be a bit more flexible. That is, I would like to color a row background, but with a piece of logic I can provide that covers my particular case.
This has certainly happened to us, and we're more than happy to do something about it. And now that IntelliGantt for SharePoint is written in 100% HTML5 + Javascript, we can! The answer is to make use of Javascript's late binding. Here's how.
First, here is a picture of the default IntelliGantt for SharePoint colors.
How can we go about dynamically changing row colors with a bit of code? First go to the configuration.js file your IntelliGantt_Online.aspx file points to.
If you have the latest IntelliGantt for SharePoint package you will notice a section in the configuration.js called 'custom_functions'.
These are the first two 'hooks' IntelliGantt provides as a callback mechanism to extend functionality. There will be many more in the future (we're excited to hear your input!), but let's start simply. You'll notice that right now the functions just return 'null'. This means nothing will happen. OK, that's a bit underwhelming, but we figured that's the best way to ship the 'default' configuration.js file.
However, let's say we want the row backgrounds to be brown. Instead of 'null', let's change the return value to 'brown'.
Back in IntelliGantt for SharePoint, when we refresh the page we see the results of our work.
Brown worked in this case because most browsers have a set of pre-coded colors. If you want an exact color then simply paste in a six character hex code (something like '#123456'). Lots of online color wheels are available to help you get the perfect hue.
Obviously this is a very simple example. So let's take it another step. Let's say we only want to color backgrounds when the due date of a task falls on a Wednesday. Remember our custom function is being passed a dataTask object that contains all sorts of information. One important piece of information is the 'DateFinish'. This is a Javascript Date object and therefore we can use the getDay method to see if it falls on a Wednesday or not.
Now when we refresh IntelliGantt we see that only tasks ending on a Wednesday have a brown background.
Sure, this is still a contrived example, but things can get as detailed as necessary to solve your business requirements because you have a tool that was powerful enough to help build the interwebs at your disposal.
We are just starting out with this customization feature set and will be investing tons more in the near future as we identify the high-value-but-very-particular business requirements that could most use these extension. What will be very powerful is leveraging arguably the worlds most common programming language found today on every modern web browser.
Posts
No comments:
Post a Comment