HomeBook an Intro CallStartup Program
Guides

Setup Elements

Suggest Edits

Location Setup Element

👍

locationSetup Events

locationSetupComplete fired when location setup response is returned

var elLocationSetup = document.getElementById("locationSetup");
  var businessHours = {
                "mon": { "startTime": 800, "endTime": 1700 },
                "tue": { "startTime": 800, "endTime": 1700 },
                "wed": { "startTime": 900, "endTime": 1700 },
                "thu": { "startTime": 800, "endTime": 1700 },
                "fri": { "startTime": 0, "endTime": 2400 },
                "sat": { "startTime": 800, "endTime": 1200 },
                "sun": { "startTime": 0, "endTime": 0 },
            };

  var locationData = { name:"Test F Location", address:{ "state": "ON", "country": "CA" }, settings: {}};

  var locationSetupParams = { "tzOffset": tzOffset, "data":locationData};
  var locationSetupOptions = {};
  var locationSetup = elements.create("locationSetup", locationSetupParams, locationSetupOptions);

	locationSetup.mount("locationSetup");

Resource Setup Element

The objective of the Resource Setup Element is to render a setup form widget to collect inputs from the user which will determine the profile and availability information attached to the Resource. Please see below for the required and optional parameters that are to be provided to this element, custom events included with the element, a code sample for the element, and screenshot before any additional style sheet is provided.

Required Parameters:

  • locationId defaults to the primary business location if not present

Optional Parameters:

  • id ID of the Resource, if included will pre-fill form responses and make a PUT call to the API to update the Resource object with any changes provided
  • data An object including all fields that should be pre-filled (i.e. name and email inputs, address object, etc.)

Additional Options

  • resourceCustomFields additional custom inputs that will attach to the Resource Object. Field objects must be labelled field1 - field10 and include a boolean parameter labelled required and a string parameter labelled label. An example of the structure for the customFields object is included below. Please note if no custom fields (or an empty object) is provided the widget step will be skipped

👍

Resource Setup Custom Events

resourceSetupComplete Returns the Resource object in e.detail when the setup is complete

📘

Suppressing the UI

Rather than using our OnSched Form Wizard UI, you can create or update a resource by including the following:
Options

  • suppressUI: true
    Optional parameters supplied to data object in resourceSetupParams Shown in example below
const resourceSetupParams = {};

const resourceSetupOptions = { 
  labels: true, // Default: false.
  allocations: false, // Default: false. Set allocations to true in order to replace weekly availability with allocations 
  blocks: false, // Default: false. Includes an additional step for Blocked Dates & Times
};

const resourceSetup = elements.create("resourceSetup", resourceSetupParams, resourceSetupOptions);

var elResourceSetup = document.getElementById("resourceSetup");
elResourceSetup.addEventListener("resourceSetupComplete", function (e) {
  console.log(e.detail);
});

resourceSetup.mount('resourceSetup');

Service Setup Element

var elServiceSetup = document.getElementById("serviceSetup");
  //var serviceSetupParams = {"id":"5", "availability": businessHours};
  var serviceSetupParams = {"availability": businessHours};
  var serviceSetupOptions = {};
  var serviceSetup = elements.create("serviceSetup", serviceSetupParams, serviceSetupOptions);
  var elServiceSetup = document.getElementById("serviceSetup");
  elServiceSetup.addEventListener("serviceSetupComplete", function (e) {
    console.log(e.detail);
  });
  elServiceSetup.addEventListener("serviceSetupError", function (e) {
    console.log(e.detail);
  });

Allocation Setup Element

The objective of the Allocation Setup Element is to render a setup form widget to collect inputs from the user which will determine the event allocations that will be used to open availability for event type services. Please see below for the required and optional parameters that are to be provided to this element, custom events included with the element, a code sample for the element, and screenshot before any additional style sheet is provided.

var allocationSetupParams = {serviceId: '1', id: '16012'};
  var allocationSetupOptions = {};
  
	var allocationSetup = elements.create("allocationSetup", allocationSetupParams, allocationSetupOptions);

	var elAllocationSetup = document.getElementById("allocationSetup");

  elAllocationSetup.addEventListener("allocationSetupComplete", function (e) {
    console.log(e.detail);
    ShowToast("allocationSetupComplete event fired with response in e.detail");
  });

Updated 6 months ago