Custom Fields

Custom Fields: adding more fields to the popover in DayBack Calendar

Custom fields are available for Salesforce, Google Calendar, Google Sheets, Microsoft 365, and FileMaker sources.

In addition to the fields like Title, Description, Date, and Resource that DayBack provides, you can map additional fields so that users get a complete picture of items on your calendar. This can be especially helpful if you have required fields that need to be populated when an event is created.

Custom fields are also available to Calendar Analytics so you can sum and chart these values over time. And you can break out your schedule and create swimlanes for any custom field. 

You'll be able to configure the formatting of your additional fields and even create pick lists that can match the picklist values you're using in Salesforce.

Clicking on "Settings" in the calendar's left-hand sidebar will reveal an "Administrator Settings" button that will let you select your calendar sources and configure additional fields. 

In this article

Setting Up Custom Fields

Click "Administrator Settings" in DayBack's "Settings" tab and click your source (Salesforce, Google, etc.) under Calendar Sources in the left-hand sidebar. Select the source you want and click on the "Custom Fields" tab. There you can click "Add New Custom Field" to add a field to DayBack's popover. 

For each custom field there are three required values along with a few formatting options:

  • Label: this is the field label that will show up above the field in DayBack's popover
  • Format: here you'll determine what the formatting options are (is it a date picker, or a currency field, for example). See "Formatting Options" below.
  • Store in Field: It is this "Store In" name, not the label, that is used in the event's display string, in custom actions, and when filtering the calendar. Your options for a "Store in" name are a bit different for different data sources. In all cases, 
    • Salesforce and FileMaker - Deepening on the format you select, you'll see a list of Salesforce or FileMaker fields that match the data type you've selected. You'll almost always be able to select any text field as well since you can put numbers, etc. in text fields, though you may not want to. 
    • Google Calendar and MS365 - You'll make up a unique storage name you'd like to use. 

When you're done configuring your custom fields, scroll down a bit further and click "Validate Field Mapping" (in Salesforce and FileMaker--not necessary for Google Calendar or MS365). This will make sure that everything you've set up will work in your original data source. You can create as many custom fields as you like and they'll appear, in the order created, in the "drawer" to the right of DayBack's popover under the heading "Custom Fields".

You can change "Custom Fields" to say something else in DayBack's translation tab.

Keeping Custom Fields Always Visible

You can make any drawer open by default by selecting a drawer name on the Calendar Info settings for that calendar in the admin side of DayBack. You'll find detailed instructions here: Default a Drawer To Open.

Formatting Options

Here are the different field options along with any behaviors unique to them. We encourage you to play around and see which formats work best for you.

  • Edit Box - This is an expandable text box that you can point at any text field you have in Salesforce.
  • Number - A simple number field with lots of formatting options including leading and trailing labels (like "each" or "kg").  Under the hood only the numeric value of number and currency fields is sent to Salesforce: currency labels, etc. are not. If you choose to round a value by adding a number of decimal places, DayBack will round the value when displayed in the popover, but send the actual entered value to Salesforce. So if you set up your field to show two decimal places and enter 4.138, DayBack will show 4.14 but send 4.138 to Salesforce.
  • Currency - A special number field to which DayBack will add some default formatting. Feel free to change your currency symbol and alignment to suit your preferences.
  • Percent - Like currency, this is a number field that DayBack pre-formats for you. Feel free to change the formatting.
  • URL - A text box above which DayBack will render a "go" button so users can open the URL by clicking on it. You don't have to enter the http or https prefixes if you don't want to.

  • Checkbox - This will show a single checkbox beside the field label (like "approved" at the top of the screen. This can be pointed at text or boolean fields in Salesforce. The value "true" will be set into whichever field you choose here.


    Note for FileMaker - DayBack expects checkbox fields to be stored as a Number type in FileMaker. The value saved to the field by DayBack will be 1 for True/Checked or empty for False/Unchecked. This matches the behavior of a checkbox set on a FileMaker layout based on a value list with a single value of 1.

  • Radio Button Set - Like "Class" in the screenshot above, you'll be able to select one of the values you enter in List Items which makes up the picklist for this field. Separate your values in List Items by commas. If your field uses a pick list, enter the possible values into List Items: we hope that a future version of DayBack will pull these list items from Salesforce for you.
  • Picklist - This option presents your List Items in a new drawer and lets you select one or more of them (multiple selection is an option for this format). The values you enter in List Items make up the picklist for this field: separate your values in List Items by commas.  If you'd like to include a comma IN your values, just enclose in single quotes like this: Sindelar',' John. If your field uses a pick list, enter the possible values into List Items: we hope that a future version of DayBack will pull these list items from Salesforce for you.
  • Date Picker - You can use this for any date or text field: we aim to support date/time fields in a subsequent release. Clicking in the field will bring your users to a date picker to help them visually select a date.

Note that if you'd like to remove the Custom Fields option from the popover, you can do so by adding the following CSS to DayBack:

.edit-container div[name=customFields] {
	display: none;
}

Custom fields in custom actions

You can reference custom fields in button actions and event actions by referring to the field's ID for Calendar Actions value. For example:

var myCustomFieldValue = event['dbk-additionalField-01'];

Where dbk-additionalField-01 is the ID for Calendar Actions of your custom field.


You can see an example of using a custom field in an event action here.

Sort custom fields in a particular way

By default, DayBack will display your fields in the Custom Fields utility panel in the order in which the fields are configured. You can change the order of these fields using CSS. The following CSS will make the fields sortable, and assign a new order number to each of your fields. 

/* 
  Add this CSS to make Custom Fields movable.
  This example moves fields only for the 
  calendar named "Your Calendar Name". If your 
  custom field set is the same for all of your
  calendars, you may omit '.YourCalendarName'
  from CSS class definitions.
*/

.ng-popover.YourCalendarName custom-fields .panel-switch ul {
  display: flex;
  flex-direction: column;
}

/* 
  Create a new line item for each of the 
  currently-defined fields. If you have 5 
  fields, you will create 5 entires using:
  
       :nth-of-type(1)
       :nth-of-type(2)
       ...
       :nth-of-type(5)

  Next, assign set the new field order 
  using the 'order' directive within each 
  definition. The following example re-sorts 
  the fields in the reverse order in which 
  they were added.
*/

.ng-popover.YourCalendarName .utility-drawer custom-fields .panel-switch li:nth-of-type(1) {
   order: 5;    
}

.ng-popover.YourCalendarName .utility-drawer custom-fields .panel-switch li:nth-of-type(2) {
   order: 4;    
}

.ng-popover.YourCalendarName .utility-drawer custom-fields .panel-switch li:nth-of-type(3) {
   order: 3;    
}

.ng-popover.YourCalendarName .utility-drawer custom-fields .panel-switch li:nth-of-type(4) {
   order: 2;    
}

.ng-popover.YourCalendarName .utility-drawer custom-fields .panel-switch li:nth-of-type(5) {
   order: 1;    
}

Related Articles