When using the schedule component, I have multiple custom fields that I had to make that were necessary for mapping fields on our appointment models. I noticed that one opening the events the first time, the data seems to load correctly, but upon closing and re-opening any event, even the same one, the data only partially loads or disappears. I'm at a bit of a loss for this issue. I suspect maybe it's how I'm adding the fields to the editor.
I am loading the data via axios and the JsonAdaptor. We do not make use of odata endpoints so those adaptors aren't very useful for us.
Below is a snippet of the code I'm using to make the fields in the event editor. This was how it seemed adding fields to the event editor was being recommended, but I am trying to do this via the editor template now. If the editor template is how I should be adding fields I will continue on this way, but I was hoping I could resolve why the data may be failing to populate in the editor on second load.
const makeDropdownField = (args: any, name: string, dropdownModel: DropDownListModel) => {
let dropdown = new DropDownList(dropdownModel);
let row: HTMLElement = createElement('div', { className: 'custom-field-row' });
let formElement: HTMLElement = args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, formElement.firstChild.firstChild);
let container: HTMLElement = createElement('div', { className: 'custom-field-container' });
let inputEle: HTMLInputElement = createElement('input', {
className: 'e-field',
attrs: { name },
}) as HTMLInputElement;
container.appendChild(inputEle);
row.appendChild(container);
dropdown.appendTo(inputEle);
inputEle.setAttribute('name', name);
};
const makeTextField = (args: any, name: string, textBoxModel: TextBoxModel) => {
// let dropdown = new DropDownList(dropdownModel);
let textField = new TextBox(textBoxModel);
let row: HTMLElement = createElement('div', { className: 'custom-field-row' });
let formElement: HTMLElement = args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, formElement.firstChild.firstChild);
let container: HTMLElement = createElement('div', { className: 'custom-field-container' });
let inputEle: HTMLInputElement = createElement('input', {
className: 'e-field',
attrs: { name },
}) as HTMLInputElement;
container.appendChild(inputEle);
row.appendChild(container);
textField.appendTo(inputEle);
inputEle.setAttribute('name', name);
};
const addCustomFields = (args: any) => {
if (args.type === 'Editor') {
// Create required custom elements in initial time
if (!args.element.querySelector('.custom-field-row')) {
let appointmentTypeDropdownModel: DropDownListModel = {
dataSource: appointmentTypeData.sort((a, b) => (a.text as string).localeCompare(b.text as string)),
fields: { text: 'text', value: 'value' },
value: args.data.appointmentType as string,
floatLabelType: 'Always',
placeholder: 'Type of Appointment',
};
let meansOfEngagementDropdownModel: DropDownListModel = {
dataSource: meansOfEngagementData.sort((a, b) => (a.text as string).localeCompare(b.text as string)),
fields: { text: 'text', value: 'value' },
value: args.data.meansOfEngagement as string,
floatLabelType: 'Always',
placeholder: 'Means of Engagement',
};
let appointmentStatusDropdownModel: DropDownListModel = {
dataSource: appointmentStatusData.sort((a, b) => (a.text as string).localeCompare(b.text as string)),
fields: { text: 'text', value: 'value' },
value: args.data.status as string,
floatLabelType: 'Always',
placeholder: 'Appointment Status',
};
let addressTextBoxModel: TextBoxModel = {
value: args.data.address as string,
type: 'text',
floatLabelType: 'Always',
placeholder: 'Address',
};
let providerTypeDropdownModel: DropDownListModel = {
dataSource: providerTypes.sort((a, b) => (a.text as string).localeCompare(b.text as string)),
fields: { text: 'text', value: 'value' },
value: args.data.ProviderType as string,
floatLabelType: 'Always',
placeholder: 'Internal/External Provider',
};
// Order matters here
makeDropdownField(args, 'ProviderType', providerTypeDropdownModel);
makeTextField(args, 'Address', addressTextBoxModel);
makeDropdownField(args, 'AppointmentStatus', appointmentStatusDropdownModel);
makeDropdownField(args, 'MeansOfEngagement', meansOfEngagementDropdownModel);
makeDropdownField(args, 'AppointmentType', appointmentTypeDropdownModel);
}
}
};
const onPopupOpen = (args: any) => {
if (args.type === 'Editor' && scheduleObj !== undefined) {
console.log({ args });
addCustomFields(args);
}
};
AppointmentData is fetched via our endpoint and transformed/mapped to take the form we need and then set as state in react, which triggers the memo.
How the editor looks on second load. In this case it's loading the provider type still but the other data is missing.
Please let me know if there's something I need to add here so that we can resolve this better.
Thank you.
