1. Home
  2. Docs
  3. Isimio Installation and Usage Guide
  4. Custom Styling
  5. Using Configuration

Using Configuration

Isimio is designed to be configurable, and we constantly work towards giving you the greatest degree of flexibility to make our scheduler look the way you want. With this in mind, we have built mechanisms for setting visual styles.

Setup

For any of the below mechanisms to work, you must first perform some initial setup. Isimio creates an auto-generated stylesheets from the selections you make, and this stylesheet is served from a different domain than the lightning component. This means we must instruct Salesforce to trust this domain.

  1. Enter Setup in your org
  2. In the left-hand menu, find CSP Trusted Sites
  3. Click the button at the top of the list to create a new Trusted Site
  4. Fill in the following properties:
    • Trusted Site Name: IsimioStyles
    • Trusted Site URL: https://your-domain.my.salesforce.com
      Important: replace your-domain with your actual org domain. For example:
      https://acme-corp.my.salesforce.com
    • Description: Allows the loading of automagically-created style sheets.
    • Active: selected
    • Context: All
    • Under CSP Directives, select all checkboxes.

Border Color by Object Type

To distinguish between different types of objects on the schedule, you can set different border colors using simple configuration. To do this, follow these steps:

  1. From the App Launcher, find Schedule Objects
  2. From the list of objects in the schedule, find the object you want to style
  3. In the Color field, enter a new color. This can be the English name of a color, such as Blue or Pink, or a hex or RGB color-code, such as #15868A
  4. Save the record

Styling Records by Field Values

It is common to want to create different styles by record values. For example, if you want to display an appointment with a dark background if it’s cancelled. You may configure your own styles with a little bit of CSS know-how by following these steps:

  1. From the App Launcher, find Schedule Objects
  2. From the list of objects in the schedule, find the object you want to style
  3. From the Related Lists section, find Schedule Fields
  4. Find the specific field whose value should control the styling of the record, and click it
  5. From the Related Lists section, find Schedule Style Controls
  6. Create a new Schedule Style Control record
  7. In the Value field, enter the value that the field should match in order to activate the style
  8. In the Properties field, enter a CSS-style list of properties and values. For example:
border-left-color: #f3526e;
background-color: #ffede2;

Note that CSS supports colors using their English names, such as Blue or Pink, as well as hex and RGB color codes.