Custom Fields in Event Popovers

Add your Custom Fields to the Popover in DayBack Calendar

In addition to standard fields like Title, Description, Date, and Resource, DayBack allows you to map additional fields to give users a complete picture of items on your calendar. This is especially useful if you have required fields that need to be populated when an event is created.

Custom fields can also be utilized in Calendar Analytics, enabling you to sum and chart these values over time. Additionally, you can create swimlanes in your schedule based on any custom field.

You can configure the formatting of your additional fields and create pick lists that match the values you're using in Salesforce. To set up custom fields, click on "Settings" in the calendar's left-hand sidebar, then select the "Administrator Settings" button. From there, you can choose your calendar sources and configure additional fields.

Setting Up Custom Fields

To set up custom fields in DayBack, follow these steps:

1. Go to the "Settings" tab (gear icon) in the Sidebar, and click "Administrator Settings"
2. Under Calendar Sources, select your source (Salesforce, Google, etc.).
3. Choose the desired source and click on the "Custom Fields" tab.
4. Click "Add New Custom Field" to add a field to DayBack's popover.

Configuring Your Custom Fields

To configure each custom field, you will need to provide three required values and select from a few formatting options:

1. Label:
   • This is the field label that will appear above the field in your event's Custom Fields "drawer" or side panel.
2. Format:
   • Determine the formatting options (e.g., date picker, currency field). Refer to the Formatting Options below for more details.
3. Store in Field:
   • The "Store In Field" name, not the label, is the name of the actual variable that will contain your field values. This variable can be used in the event's display string, custom actions, and when filtering the calendar. The options for a "Store In Field" name vary by data source:
     • Salesforce and FileMaker: Based on the format you select, you'll see a list of Salesforce or FileMaker fields that match the selected data type. You can typically also select any text field since text fields can store numbers and other data types.
     • Google Calendar and MS365: Create a unique storage field name you'd like to use.

When you finish configuring your custom fields, scroll down and click "Validate Field Mapping." This step is required for Salesforce and FileMaker but is not necessary for Google Calendar or MS365. Validation ensures everything is correctly set up with your original data source.

Locating Your Custom Fields

You can create as many custom fields as needed, and they will appear in the order created, in the "drawer" to the right of DayBack's popover under the heading "Custom Fields." You can also re-order your custom fields at a later time if you need to do so.

Changing the Custom Fields label

If desired, you can change the "Custom Fields" label to something else, like "More Fields" in DayBack's translation settings.

Keeping Custom Fields Always Visible or Hidden

Making Custom Fields Always Visible:

To make any popover side-panel or drawer open by default, go to the "Calendar Info" settings tab of each calendar and select the drawer name. Detailed instructions can be found here.

Removing the Custom Fields Draw from Popovers:

If you'd like to completely remove the Custom Fields side panel from the popover, you can do so by adding the following CSS:

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

Formatting Options

Here are the various field options available in DayBack, along with their unique behaviors. Experiment with these to find the best formats for your needs:

• Edit Box:
  • An expandable text box that you can link to any text field in Salesforce.
• Number:
  • A simple number field with various formatting options, including leading and trailing labels (e.g., "each" or "kg"). Only the numeric value is sent to Salesforce; labels are not. If you specify a number of decimal places, DayBack will round the value for display but send the actual entered value to Salesforce. For example, if you set the field to show two decimal places and enter 4.138, DayBack will display 4.14 but send 4.138 to Salesforce.
• Currency:
  • A number field with default currency formatting. You can customize the currency symbol and alignment to suit your preferences.
• Percent:
  • Similar to the currency field, pre-formatted for percentages, with customizable formatting.
• URL:
  • A text box with a "go" button that lets users open the URL. You can omit the http or https prefixes if desired.
• Checkbox:
  • Displays a single checkbox beside the field label (e.g., "approved"). It can be linked to text or boolean fields in Salesforce. The value true will be set in the selected field.
  • Note for FileMaker:
    • DayBack expects checkbox fields to be stored as Number type in FileMaker. The value saved will be 1 for True/Checked or empty for False/Unchecked, matching FileMaker's checkbox behavior.
• Radio Button Set:
  • Allows selection of one value from a list. Enter the possible values separated by commas in the List Items field. In the future, DayBack may automatically pull these list items from Salesforce.
• Picklist:
  • Presents your List Items in a new drawer, allowing single or multiple selections. Enter values separated by commas in List Items. To include a comma in a value, enclose it in single quotes (e.g., Sindelar',' John ). We hope that a future version of DayBack will pull these list items from Salesforce for you.
• Date Picker:
  • Can be used for any date or text field. Users can click in the field to access a date picker. Support for Date/Time fields is planned for a future release.

Using 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. In some calendar sources, this ID will be created for you and will be numerical, such as 1721951289977-5615655122.

Learn More

Please see this article for additional information on how to retrieve and use custom fields in your custom actions.

By default, DayBack displays your custom fields in the order they were configured. You can change this order using CSS. The following CSS will make the fields sortable and assign a new order number to each field:

/* 
  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;    
}