Using HTML and Custom Calendar Fields and Field Sets

improveit 360 provides Field Sets on the Sales Appointment object, Project Activity object and Staff object, to allow you to display custom data as well as display custom HTML and images within the Staff Calendar Tiles. 

First, let's review the Field Sets available to use: 

Field Sets on Sales Appointment, Project Activity and Staff

On the Sales Appointment object there are two Field Set(s) related to the Calendar Tiles: 

• Staff Calendar Event Tiles
• Scheduling Calendar Event Tiles 

On the Project Activity object there are two Field Set(s) related to the Calendar Tiles: 

• Staff Calendar Event Tiles
• Scheduling Calendar Event Tiles 

And finally on the Staff object there is one Field Set related to both Calendars: 

• Calendar 

By adding fields to these Field Sets you will make the field data visible on the Calendar.

Now, let's discuss the out of the box fields which are intended to work in conjunction with these Field Sets... 

Custom Calendar Text and HTML Fields

There are two (2) fields on the Sales Appointment object which are named similarly but have different functionality, for different purposes. The Custom Calendar Text field on the Sales Appointment object allows you to enter HTML directly into the field and have that represented appropriately on the Staff Calendar and Scheduling Calendar, simply by adding the field to these same Field Sets mentioned above. 

Let's quickly review these fields. 

On a Sales Appointment record, I can manually enter HTML into the Custom Calendar Text field or use a Flow to populate the HTML in the field using a Text formula resource in my Flow. Either way, when I add the Custom Calendar Text field to one of these Field Sets, the appropriate Calendar will render the HTML correctly on the page, including any style tags or line breaks. 

On the Calendar the above HTML will appear as follows: 

Note: There is also a Rich Text field on the Sales Appointment object which is labeled Custom Calendar HTML. This field allows users to manually Format text, images and hyperlinks exactly as they would like it to appear on the Staff Calendar or Scheduling Calendar, without needing to know HTML. This field does NOT support typing raw HTML into the field. You can use the Rich Text editor to insert images, create hyperlinks and format Text exactly as you would like it to appear on the Calendar. This field should be displayed on the Page if Users want to manually enter things to appear on the Calendar. 

This is how the above Rich Text is represented on the Staff Calendar, note the working hyperlink: 

These same fields exist on the Project Activity Object and function the same way. A brief synopsis: 

• Custom Calendar Text - plain text HTML, typically will be populated with a Flow not displayed on the record page. 
• Custom Calendar HTML - Rich Text editor, add this field to the page layout so Users can interact with the field.

Now that you have a good understanding of the Fields and Field Sets that impact the Calendars, let's review a custom scenario where we want an image to be displayed on the Calendar to represent data already being tracked/entered in an existing Field. 

Scenario 1: Add a Confirmed checkmark to the Sales Appointment 

When a Sales Appointment has been confirmed with the Contact, we want to display a green checkmark on the Calendar tile, to make it easy to differentiate our Confirmed Appointments on the Calendar. 

First, we will need to find an image and upload it to the system. 

Use the App Launcher to Navigate to the Files menu 

Choose Libraries, then select Asset Library 

Click Upload Asset File

Locate the image file you saved.

NOTE: Be sure the image is sized appropriately for the Calendar Tiles. We recommend nothing larger than 35 x 35 pixels. Small icons will prevent over-crowding and stretching of the Calendar tiles. 

Name your File and click Save

Next, click on the Name of the File you uploaded. You will need to copy the image source URL. 

Right-click on the image, and then select Copy image link

Next you will need to create a new custom field, to display this image when a specific Value is selected. In this example we want this image to be displayed when the Sales Appointment has a Confirmed on date (the date field is not Blank). 

Navigate to the Setup menu 

Go to the Object Manager

Then go to the Sales Appointment object 

Go to the Fields & Relationships menu

Then click the New button

Create a Formula field:

Name it Confirmed checkmark. 

Choose a Return Type of: Text

The formula for this will be:

IF (NOT(ISBLANK( i360core__Confirmed_On__c)) , IMAGE("Copy your Image URL HERE", "Confirmed"), "")

Which basically states that this the Confirmed On date is not Blank then display the Image URL we've specified, otherwise display nothing (""). 

The field formula will look something like this when Saved: 

Now we will add this field to the Staff Calendar and Scheduling Calendar by adding it to the Field Sets mentioned at the beginning of this Article. 

From the Sales Appointment Object, click on Field Sets

Open the Staff Calendar Event Tiles Field Set

Click and Drag the new field you just created into the Field Set. 

Be sure to click Save at the top of the page when finished. 

When I refresh the Staff Calendar, I will see the Confirmed checkmark on any Sales Appointments which have a Confirmed On date entered. 

These new Field Sets support HTML within all Text fields, including Rich Text.

Scenario 2: Add an Image Icon to represent each Sales Appointment Type value

When a Sales Appointment has a specific Type, we want to display an image on the Calendar tile, to make it easy to differentiate our ReHash from Reset, from New Appointments on the Calendar. 

First, we will need to find the images and upload them to the system. 

Use the App Launcher to Navigate to the Files menu 

Choose Libraries, then select Asset Library 

Click Upload Asset File

Locate the image file you saved.

NOTE: Be sure the image is sized appropriately for the Calendar Tiles. We recommend no larger than 35 x 35 pixels. Small icons will prevent over-crowding and stretching of the Calendar tiles. 

Name your File and click Save

Continue uploading images into the Asset Files Library until you have an image uploaded for every Value in the Sales Appointment Type picklist. 

Next, click on the Name of the File you uploaded. You will need to copy the image source URL. 

Right-click on the image, and then select Copy image link

Paste the image links into Notepad or a Word document and be sure to keep track of which link is for which image. You will want to Copy/Paste the links for all the images you want to use. 

Next, you will need to create a new custom field, to display each image when a specific Value is selected in the Type field. In this example we have four different images for our four (4) Appointment Types. 

Navigate to the Setup menu 

Go to the Object Manager

Then go to the Sales Appointment object 

Go to the Fields & Relationships menu

Then click the New button

Create a Formula field:

Name it Type Calendar Icon

Choose a Return Type of: Text

The formula for this will look something like this:

CASE ( i360core__Type__c ,

"New" , IMAGE("insert image link here", "New"),

"Rehash", IMAGE("insert image link here", "Rehash"),

"Reset" , IMAGE("insert image link here", "Reset"),

"Follow-up", IMAGE("insert image link here", "Follow-up"), "")

Which basically states that if the Type is New, display this image, otherwise if the Type is Rehash then display this image, else if the Type is Reset then display this image, else if the Type is Follow-up then display this image, else if the Type is anything else display nothing (""). 

The field formula will look something like this when Saved: 

Now we will add this field to the Staff Calendar and Scheduling Calendar by adding it to the Field Sets mentioned at the beginning of this Article. 

From the Sales Appointment Object, click on Field Sets

Open the Staff Calendar Event Tiles Field Set

Click and Drag the new field you just created into the Field Set. 

Be sure to click Save at the top of the page when finished. 

When I refresh the Staff Calendar, I will see the Icon on any Sales Appointments displaying what Type of Sales Appointment they each are. 

NOTE: Be sure to check the Picklist Field you are using as your source data. Make sure you account for all the Values within the Picklist. I have only four (4) values in the picklist and all four images are being properly displayed on my Staff Calendar. 

Note: The Field Sets for Calendar Tiles support HTML within all Text fields, including Rich Text.

Also note: You can stack fields within the Field Set and each field will be separated by a line break. In the example below, I am using the Confirmed checkmark field, and the Type Calendar Icon field as well as displaying everything from the Custom Calendar HTML field, simply by adding all of those Fields to the Staff Calendar Event Tile Field Set. This eliminates any character limits that might have incurred when using custom HTML.