Schedule Form

The Schedule Form component allows users to create or edit a single schedule entry. It provides a form interface with fields for schedule details and handles the creation, updating, and deletion of schedule entries.

Parameters

Parameter	Type	Description	Required
action	String / Object	Can be initialize to initialize a new component or an object to call an action on a component.	Yes
token	String	Authentication token to authorize the component.	Yes
settings	Object	JSON object containing configuration settings for the Schedule Form component.	No
arguments	Array	JSON object containing additional arguments for the Schedule Form component.	No

Actions

Action	Description	Arguments	Settings
initialize	Initializes the component.		settings JSON object of new configuration settings.
updateSettings	Updates the component's settings.		settings JSON object of new configuration settings.

Configuration Settings

Setting	Type	Description	Default
scheduleId	string	The ID of the schedule to edit. If empty or undefined, a new schedule will be created.	null

Initialize

To load the Schedule Form component in your application, you need to embed the component's iframe in your HTML. The iframe's src attribute should be set to https://api.recrubo.app/public/v2/embed/component/schedule-form.

Example

<iframe id="scheduleFormFrame" src="https://api.recrubo.app/public/v2/embed/component/schedule-form"></iframe>

<script type="text/javascript">
const scheduleForm = document.querySelector('#scheduleFormFrame')

scheduleForm.onload = (evt) => {
    const scheduleFormSettings = {
        action: 'initialize',
        token: 'XX-XX-XX-XX-XX',
        settings: {
            scheduleForm: {
                scheduleId: '9f5a1081-dd6d-4002-a415-de202408648b' // empty or undefined means a new schedule should be created
            }
        }
    }

    scheduleForm.contentWindow.postMessage(scheduleFormSettings, 'https://recrubo.app')
}
</script>

Events

The Schedule Form component triggers events that your application can listen for and handle appropriately.

Schedule Created Event

The scheduleCreated event is triggered when a new schedule is successfully created. This event provides the ID and title of the newly created schedule.

Schedule Updated Event

The scheduleUpdated event is triggered when an existing schedule is updated. This event provides the ID and title of the updated schedule.

Schedule Deleted Event

The scheduleDeleted event is triggered when a schedule is deleted. This event provides the ID of the deleted schedule.

Example of handling the events

<script type="text/javascript">
window.addEventListener('message', function(event) {
    // Verify the origin of the message
    if (event.origin !== 'https://recrubo.app') return;
    
    const data = event.data;
    
    // Check for schedule form events
    if (data.component === 'scheduleForm') {
        switch(data.event) {
            case 'scheduleCreated':
                console.log('Schedule created:', data.id, data.title);
                // Handle the new schedule creation
                break;
            case 'scheduleUpdated':
                console.log('Schedule updated:', data.id, data.title);
                // Handle the schedule update
                break;
            case 'scheduleDeleted':
                console.log('Schedule deleted:', data.id);
                // Handle the schedule deletion
                break;
        }
    }
});
</script>

All events from the Schedule Form component will include a component field with the value 'scheduleForm' and an event field specifying the type of event (e.g., 'scheduleCreated', 'scheduleUpdated', 'scheduleDeleted').