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. 

Customize the Resource Cell Display

A common request from users of the Schedule Board is to be able to customize what is displayed to the scheduler in the Resource cell on the Schedule Board. This is now possible and in this post I'll show you just how easy it is through a fairly simplistic example.

Note: we'll refer to features in this post which are explored in other details in other posts on our blog.

The standard display for the Resource Cell looks like the screenshot below:









But let's say we actually want to replace the Booked Duration and Utilization %age by indicators to show the hourly rate of the resource and if the the resource is a sub-contractor (e.g. in our example this will simply be an account resource).

So we want our new cell template to look something like the one below:









There are a couple of things that need to be done in order to achieve this:

  • Adjust the default "Retrieve Resource Query" to return the necessary attributes required to render the new cell template

  • Adjust the "Resource Cell Template" itself to use those new fields returned by the updated Resource Query

The first thing we are going to do is actually adjust the "Resource Cell Template" to change the layout which will also make use of attributes we will return in the "Retrieve Resources Query" we are going to customise a little later.

Double-click on the Tab on the Schedule Board so we can update its settings and click on the cog icon alongside the "Resource Cell Template".

This shows the screen below with the default template. It essentially standard HTML markup with some additional custom statements used to dynamically build the template at runtime. Choose "Save As" to save a copy which we will modify to meet our requirements.

The final amended "Resource Cell Template" will look like the one below:

So let's look at these changes in a bit more detail

  • The 3 lines starting with "<i class=" will be used to render the $ sign dependent upon the resources hourly rate. The "fa" and "fa-dollar" classes are part of the FontAwesome Icons which are bundled with Dynamics 365 Field and Project service and as such can be re-used here. For more detail on FontAwesome see https://fontawesome.com/v4.7.0. NOTE: the use of the <i> tag is a standard FontAwesome convention

  • The "display" property of the style attribute refers to 3 variables lowrate,medrate and highrate enclosed in {{ }}. These variables will be set by us in the "Retrieve Resources Query" a little later on and substituted accordingly when the Cell is rendered at runtime. They will contain either "block" or "none" depending on the resources hourly rate.

  • Next, the {{#if contractorimagepath}} statement is a directive meaning that the HTML embedded inside it will only be rendered if the contractorimagepath is defined i.e. not null.

  • The <img> tag within the {{#if contactorimagepath}} will be used to display an icon representing a sub-contractor resource (e.g. an account in our example). A couple of points to note here regarding the "src" attribute. Firstly the use of the pre-defined {{client-url}} will mean the main URL of the Dynamics 365 App (which you would get via Xrm.Page.context in standard JavaScript) will be subsituted here e.g. https://mydemo365.crm4.dynamics.com. Secondly, the {{contractorimagepath}} will be set below and is going to reference a Web Resource I have uploaded into my solution but equally the <img> could just as easily refer to an image publicly accessible on the internet.

Ok, so now we've got the "Resource Cell Template" setup as we wish we need to amend the "Retrieve Resource Query" to return the attributes we have just defined in the template.

As with the "Resource Cell Template" click on the cog to the right of the "Retrieve Resource Query" to load up the default and then press "Save As" to ensure you are creating your own copy.

The contents of the query should look pretty familiar as it is essentially an extension of FetchXML called Universal Fetch XML (or UFX for Short). There are some differences including the use of "bags" and custom UFX statements such as ufx:source, ufx:select, ufx:if etc. I will not be going into detail about these in this post but you will see there usage below.

There are a couple of areas of the default query we are going to amend. First, we need to ensure we return the hourly rate for the resource so that we can check it to determine how many $ we should display in the template.

Becomes..

Note, this is a very simplistic example but can reference any relationship (and it's attributes) which can be accessed via the bookableresource entity including those multiple level's down the chain. This gives you great scope for customising the query to meet any requirements you might have.

The next change is a little more complex. Scroll to the end of the query.

Once are changes are made it will look like..

So, the first thing you willnotice is the definition of 3 custom elements (or properties/variables depending on your terminology preference) called lowrate, medrate and highrate and they directly tie back to the variables we specifed in the "Resource Cell Template" a little earlier.


Let's breakdown the <medrate> element as an example:

  • So the element name is obviously that which should be used when referring to it in other places such as the "Resource Cell Template"

  • The ufx-type='string' is indicating that this element will contain a string value . You can also specify many of the other common types such as 'int', 'bool', 'datetime' etc. Even 'lookup' and 'option' are supported.

  • The ufx-select statement specifies the value that is stored for this element and within it we can see an 'iif' statement checking if the rate variable is greater than 20, then return 'block' otherwise return 'none' as the string. You may wonder where the 'rate' variable is specifed but if you look up at the change we made when adding the "msdyn_hourlyrate" to the query it had an alias specified, and it's value was 'rate'.

For those unfamiliar with the "iif" statement it basically evaluates the first statement and if true returns the second statement, if false the third. In the case of <medrate> this means if the hourly rate is greater than or equal to 20 return a string of "display" if not return "none". ​

Putting it all together, from query to template we can see how it works:

Query

<medrate ufx-type="string" ufx:select="iif(rate>=20, 'block','none')"></medrate>

Cell Template

<i class="fa fa-dollar" style="float:left;display:{{medrate}}"></i>

Runtime (resource hourly rate = $25)

<i class="fa fa-dollar" style="float:left;display:block"></i>

Runtime (resource hourly rate = $10)

<i class="fa fa-dollar" style="float:left;display:none"></i>


You can see something similar with the contractorimagepath, where again we define it as a string and then check to see if the Resource Type is 5 (i.e. Account), and if so set the value to our ebecs_contractorimage.png held in Web Resources or otherwise return null, meaning that the HTML for the <img> tag will not be rendered in the Cell Template due to the use of the {{#if contractorimagepath}} directive.


I have barely scratched the surface of what you can achieve using these new features but hopefully it has given you an insight into the potential for customisation of the Schedule Board Resource Cell Templates. Other things you might want to consider doing for example might include:

  • Showing an "L" icon to represent trainees

  • Colour-code the background of the Resource Cell to indicate their weekly progress towards their utilization KPI (e.g. green = on or above target, amber = close to target, red = far off target)​

In addition there is also a new ClientExtensions framework for the Schedule Board which provides even more granular control of the appearance and functionality of the Schedule Board, but that's for another post.

451 views0 comments