1. Home
  2. Docs
  3. Isimio Installation and Usage Guide
  4. Advanced Topics
  5. Client-Side Plugins

Client-Side Plugins

Isimio supports client-side plugins in the form of Javascript and CSS files. These files must be uploaded as a static resource to your org, either separately or as a zip containing multiple files.

Uploading Plugin Files

To upload a file as a static resource, follow these steps:

  • Click the gear icon on the top-right corner of the screen
  • Select Setup
  • In the menu, find or search for Static Resources
  • Click the New button to create a new resource
  • Enter a name for your resource (remember this value)
  • Click the Choose File button to select the plugin file

Configure a Plugin

Once a static resource has been created, it needs to be configured as a plugin by following these steps:

  • Click the gear icon on the top-right corner of the screen
  • Select Setup
  • In the menu, find or search for Custom Metadata Types
  • In the row named Plugin, click the Manage Records link on the left
  • Click the New button to create a new plugin, or select an existing plugin to modify it
  • Enter a Label for the plugin. This is a friendly, human-readable name that explains what this plugin is for.
  • Optionally, enter a description of the plugin.
  • Set Component Type as Scheduler UI Extension.
  • Set the Static Resource to the Name of the static resource created in the previous section.
  • If using a zipped file, set the Files field to a line-separated list of file names. For example:
    myJavascript.js
    myStylesheet.css
  • Ensure the Active checkbox is selected
  • If multiple plugins are loaded in this org, you may use the Load Order field to decide the order in which they are loaded. Lower values are loaded first.

Plugin Examples

Use the following as examples to create your own plugins!

Record background colors (CSS)

.kruviScheduler .isimio-table .row .dayCell .UIElement.task {
    background-color: #54F1CE;
}

All records that appear in the scheduler have the UIElement CSS class. They also have a class with the name of the object type. In this example, we are setting .UIElement.task to have a different background color, which will change the background of all Task records.

Advanced Default Values (Javascript)

window.classes.UIElement.prototype.update_orig = window.classes.UIElement.prototype.update;
window.classes.UIElement.prototype.update = function(data, params) {
    if (this.sObjectType.name == "task") {
        if (params && params.isNew === true && !data["id"]) {
		//New Task created
		data["recordtypeid"] = "012f4000000fZ1aAAE";
	}

	this.update_orig(data, params);
};

In the event where setting a default value through configuration isn’t enough, such as when wanting to use a dynamic value (the current time, values that change per user, etc), you may use a plugin like this to set a default value with code.

The first line creates a pointer to the original UIElement.update() method, called update_orig:
window.classes.UIElement.prototype.update_orig = window.classes.UIElement.prototype.update;

We then replace the update method with our own, which sets the default value for the recordtypeid field -but only for brand new records being created. We then call the original update method by calling this.update_orig.