Introduction to the Schedule Board Client Extensions Framework
In this post I plan to introduce the Schedule Board Client Extensions Framework with a very basic example before diving into more detail in upcoming posts. This post also uses other concepts such as modifying the "Resource Cell Template" which have been discussed in earlier posts.
Support has been added to allow you to subscribe to override the default rendering of the Resource and HourlyBooking cells, subscribe to a number of Schedule Board events e.g. BoardAfterRefresh, FilterUpdate etc., get & set certain items of data related to the Schedule Board e.g.IScheduleBoard.getLoadBookingIds(), IFilters.setValue(key,value) and trigger actions via interfaces e.g. IScheduleBoard.refresh(). In this post, I am only going to very briefly touch on a couple of these but will go into more detail at a later date no doubt.
Let's get started. I'm going to use a very simple use case where someone wants to have similar functionality to the current action to move bookings to a different day but would like to be able to do it at a resource level via a right-mouse click rather than globally for all bookings with a particular status or statuses. It's going to look something like:
NOTE: the View Resource Card context menu will still appear in all other areas of the resource cell when the right mouse is clicked so we have not lost that functionality.
We are going to solve this problem in 3 steps:
(1) Modify the Resource Cell Template to display an icon which we can right-click on to prompt the user to move all the resource bookings to the next day by calling a method created in (2). We will also be dynamically creating the right mouse menu in step (2) as well.
The modifications to the Cell Template are relatively minor but will result in an icon being displayed to the right of the cell template (more details on modifying the Resource Cell Templates are covered in an earlier blog).
Also, I have left the ondblclick event in their as an example of another way you could invoke the "Move Bookings" function although it is somewhat obscured. It should read:
The icon looks like this on the Schedule Board when rendered.
Subscribe to the Board.AfterRefresh event
Timeout for a small period to allow load to complete, and then unbind any "contextmenu" events linked to elements with the class of "nextday-target" i.e. our <img> elements
Loop through all the elements with a class of "nextday-target" and bind a new function to the "oncontextmenu" event which will get the resource-id attribute of the element triggering the event i.e. the <img> element, and then create and display a menu to the user at the point the right mouse was clicked with an option to move bookings to the next day.
At the end of the new function ensure that any further propagation of the event is prevented.
You can see that i've created the function "moveResourceBookingsToNextDay" which prompts the user to confirm before then calling a custom action to move the bookings for the given resource (the details of which I won't go into in this post). But i've highlighted the two main other points I wish to talk about:
There are interfaces provided for interaction with the ScheduleBoard via IScheduleBoard, along with the Filter Pane with IFilters, the Requirements Panel with IRequirementPanel and a set of utility functions via IUtils. It is recommended to always use the "get" method to retrieve the interface rather than referencing them directly. In this case I need to refresh the Schedule Board after the action to move the bookings has been completed so I have simply created an instance of the IScheduleBoard interface and called the refresh() function.
Creating the Client Extension will look something like the below:
Extension Type: one of Script, Stylesheet, Localization
Schedule Board Setting Id: choose to link to a specific Tab or choose the Default to apply to all
Rank: order in which it is loaded.
So, when it's all put together we end up with this:
This hopefully will give you some idea of how you can now extend the Schedule Board functionality even further and I will finish on a cautionary note. I should point out the use of jQuery and ExtJS libraries to create my own right mouse menu are not part of the Client Extensions Framework and even though they are currently leveraged by the Schedule Board to provide existing functionality, at some point in the future references to these may be removed, so implement at your own risk being aware that you may need to potentially re-visit this after future updates.