Elements

Consumer vs Setup

The OnSched.js Elements are broken into two categories. These categories coincide with the API Interfaces offered by the OnSched Rest API.

The first type of Element is referred to as a Consumer Element. Consumer Elements are customer facing actions such as selecting a date and time to book an appointment with the Availability Element, or selecting a Resource to book with with the Resources Element.

The second, and more advanced, type of Element is referred to as a Setup Element. Setup Elements are not customer facing, these Elements are used to create and update your settings and availability such as Location Setup Element which allows you to create and manage existing OnSched Locations. Setup Elements should always be protected behind an authenticated area of your application.

Any elements that require the use of the Rest APIs Setup Interface will be considered a Setup Element. Setup Elements in Onsched.js version 2.0.0 require an access_token to first be generated, then included in the initialization options object. We recommend that you decode the JWT to determine the expiration before generating a new token with each mount. For more information on generating an access token for the Rest API please see Authentication.

Usage

Elements are created by calling the function:
OnSched.elements().create('element_name', parameters_object, options_object)

This function uses the Parameters and Options objects to configure the Element to your specifications. The Parameters Element corresponds directly with the API payload/queryparameters for each API request. For example if you create the Availability Element with 3 parameters, Service ID, Location ID, Round Robin:

<div id="availability"></div>

<script>
  const client_id = 'DemoUser';
  const environment = 'sbox';
  
  const onsched = OnSched(client_id, environment)
  const elements = onsched.elements();
  
  const availabilityParameters = { serviceId: '5', locationId: '', roundRobin, 1 };
  const availabilityOptions = {};
  const availabilityElement = elements.create('availability', availabilityParameters, availabilityOptions);
  
  availabilityElement.mount('availability');
</script>

The API request that is made to the OnSched Rest APIs Availability controller is:
GET /availability?serviceId=5&locationId=&roundRobin=1

The query parameters in the API request are directly built from the parameters object.

Mounting

When an element is mounted, the API calls are fired and the UI is rendered. Elements can be updated if you change the parameters and options. e.g. availability.update(params, options); You may wish to defer the mounting of an element until you receive required data from events.

Elements receive events that allow you to create booking flows. Events pass relevant detail for you to consume. For example, when a list element is clicked on, or data from the API is loaded, an event will be sent to the element.

Custom Events

Custom events are triggered when the API returns a response for each element. Custom events can be leveraged to utilize the API responses in your own elements rather than the OnSched.js defaults. API responses for all custom events will be accessible from e.detail.

For example, the following are custom events for the Locations Element:

• getLocations: triggered when existing locations are found
• clickLocation: triggered when a location is clicked in the Locations Element list

First we create a div in HTML to be used for mounting...

<div id="locations"></div>

Next we add our logic to initialize OnSched.js...

<div id="locations"></div>

<script>
  // Initialization
  const client_id = 'DemoUser';
  const initialization_options = {};
  
  const onsched = OnSched(client_id, initialization_options);
  const elements = onsched.elements();
</script>

Then, we add our Locations Element OnSched.js logic...

<div id="locations"></div>

<script>
  // Initialization
  const client_id = 'DemoUser';
  const initialization_options = {};
  
  const onsched = OnSched(client_id, initialization_options);
  const elements = onsched.elements();

  // Location Element Logic
	const locationsParams = {};
  const locationsOptions = {};
  const locations = elements.create('locations', locationsParams, locationsOptions);
</script>

Lastly we add our event listener, and any logic that we wish to do with the data obtained...

<div id="locations"></div>

<script>
  // Initialization
  const client_id = 'DemoUser';
  const initialization_options = {};
  
  const onsched = OnSched(client_id, initialization_options);
  const elements = onsched.elements();

  // Location Element Logic
	const locationsParams = {};
  const locationsOptions = {};
  const locations = elements.create('locations', locationsParams, locationsOptions);
  
  // Custom Event Listener
  const locations_element = document.getElementById('locations');
  
  locations_element.addEventListener('getLocations', e => {
    console.log('Locations Response: ', e.detail);
  });
  
  // Mount Element
  locations.mount('locations');
</script>