Welcome to our blog where will be sharing tip, tricks and detailed walk-throughs covering all areas of Dynamics 365 but primarily focused on the Field Service and Project Service Apps, Scheduling and integration using Microsoft Flow and the Common Data Service (CDS). We hope you find the blog posts useful and please feel free to comment if you would like us to elaborate on any particular area. 

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.

In short, the Client Extensions Framework allows you to load custom JavaScript, Stylesheets and Resx files along with the Schedule Board itself.

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.

(2) Create a JavaScript file which we will use to create a function which will take a ResourceId in as a parameter and call an action in Dynamics 365 which will move bookings for that resource to the following day, after which we will force a refresh of the Schedule Board. (NOTE: for the purposes of this blog i'm not going to go through the details of creating the action).

(3) Add a Client Extensions record in Dynamics 365 referring to the JavaScript file created in (2) which will then be loaded automatically when the Schedule Board is displayed.

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).

I have added the <img> element to display an icon with a specific class, "nextday-target", which will be used to locate all these <img> elements in our JavaScript extension library where we will unbind any existing right mouse menu's attached to them i.e. View Resource Card, and attach a new one for our Move Booking process. In addition, I have added an attribute for resource-id to store the individual guid of each resource being displayed so that can be accessed during our right-mouse event processing.

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.

So, to the important step (2). The JavaScript file for the Schedule Board extension needs to take a specific format in order to work with the Schedule Board. I have split it up into 2 sections and included the available override and subscribe function definitions for your reference (and I will cover in more detail in future blogs) although I will only be subscribing to the AfterRefresh event of the Schedule Board in this case.

You can see we have defined a main JavaScript object, sbClientExtension, which we will refer to a little further on in this blog. The JavaScript is commented to illustrate the steps but the key points are:

  • 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.

Onto the second section of the JavaScript function below:

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.

  • The last line is very important, without it, your JavaScript will not be loaded with the Schedule Board and thus will not get executed as you expect. You need to call the FPS.ClientExtensions.Mediator.register() function passing in the parent JavaScript object you defined at the top of the library, in this case it's sbClientExtension.

Now for the final piece of the puzzle. Adding this JavaScript as a web resource to your solution and then creating a Client Extensions record so that it is loaded with the Schedule Board. Assuming you've added it as a Web Resource you can use Advanced Find to locate the Client Extensions entity.

Creating the Client Extension will look something like the below:

  • Web Resource : obviously being a link to the main JavaScript web resource with you code (or CSS or RESX files for other extensions)

  • 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.

1,096 views3 comments