GoMeddo also includes a standalone reservation form component that can be embedded in your Lightning solutions. One way to include it is through the Lightning App Builder, through drag & drop. Doing so is fast and easy, but only lets you control certain attributes of the component. If you want more control over your reservation form, you can consider wrapping it in your own custom component. This article explains how.

For more information on initial creation of a standalone reservation form, refer to the standalone reservation form documentation page.

B25:standaloneReservationForm

Code Sample (example)

Below is a basic Lightning Web Component that can be included on a Lightning Record page. This component lets you specify a Calendar Name (calender-name={calendarName}), an Object API Name (object-api-name={objectApiName}), an optional Flow Name to run prior to Reservation creation (pre-create-flow-name={preCreateFlowName}), the recordId it should apply to - such as the Id of the Lightning Record page (record-id={contextId}), and some initial data for the draft Reservation (prototype-reservation={prototypeReservation}).

This is just an example. When copying this sample, keep a few things in mind:

Though the standalone reservation form does not directly display on a calendar, the calendarName specified impacts which Reservation Types are available for use.
The recordId passed to the component will be set in the Flow specified in preCreateFlowName as the contextRecordId.
Do not render the Standalone Reservation Form until all of the relevant data has loaded in the wrapper component.
- If you do, then your existing data won’t load in properly on the form component.

Component

<template>
    <div if:true={infoLoaded}>
        <b25-standalone-reservation-form
            record-id={contextId}
            calendar-name={calendarName}
            pre-create-flow-name={preCreateFlowName}
            object-api-name={objectApiName}
            prototype-reservation={prototypeReservation}
        ></b25-standalone-reservation-form>
    </div>
</template>

Controller

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import RESERVATION_FIELD from '@salesforce/schema/Opportunity.ReservationLookup__c';

export default class StandaloneReservationFormWrapper extends LightningElement {
    @api recordId;
    @api calendarName;
    @api preCreateFlowName;
    @api prototypeReservation = {
        'sobjectType': 'B25__Reservation__c'
    };
    objectApiName;
    contextId;
    infoLoaded = false;
    @wire(getRecord, { recordId: '$recordId', fields: [RESERVATION_FIELD]})
    receiveOpportunityRecord(wireData) {
        if (wireData.data === undefined) {
            return;
        }

        if (wireData?.data?.fields?.ReservationLookup__c?.value) {
            this.objectApiName = 'B25__Reservation__c';
            this.contextId = wireData.data.fields.ReservationLookup__c.value;
        } else {
            this.objectApiName = 'Opportunity';
            this.contextId = this.recordId;
        }

        this.infoLoaded = true;
    }
}

XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>62.0</apiVersion>
    <isExposed>true</isExposed>
	<description>
        Standalone reservation form (wrapped)
    </description>
    <masterLabel>
        Standalone reservation form (wrapped)
    </masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage,lightning__RecordPage">
            <property
                name="calendarName"
                type="String"
                required="true"
                label="Calendar"
                description="The calendar name that the form uses to fetch its configuration. Such as the default reservation type."
                default="Resources"
            />
            <property
                name="preCreateFlowName"
                type="String"
                required="false"
                label="Reservation pre-creation flow to run"
                description="If you supply the API name of a flow, this flow will be executed before the form is shown to the user."
                placeholder="Enter a flow name (optional)"
            />
            <supportedFormFactors>
                <supportedFormFactor type="Small" />
                <supportedFormFactor type="Large" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Properties

The following properties can be used:

Property	Expected Value	Description

Property	Expected Value	Description
recordId	The Id of the related record.	This pre-populates the form data, and is passed alone to the Flow specified in preCreateFlowName. Can be a Reservation Id, or a different Object Id depending on intentions. If the component is used on a Lightning Record page, will default to the Id of the record.
objectApiName	The API Name of the Object type specified in the recordId.	If the component is used on a Lightning Record page, will default to the name of the SObject.
calendarName	The Name of a Calendar record.	This sets the available Reservation Types based on the linked Calendar name.
preCreateFlowName	The API Name of the Flow to run before Reservation creation.	This lets you optionally specify whether you want to run a flow prior to the Reservation being created.
prototypeReservation	An object that represents a Reservation record.	Allows you to prepopulate fields on new reservations being created on the calendar, even if that field is not displayed on the reservation form. Note: you can include junctions (such as ReservationContacts) or service reservations in the prototype.

Wrapping Standalone Reservation Form

B25:standaloneReservationForm

Code Sample (example)

Component

Controller

XML

Properties