gd-sprest-bs
Version:
SharePoint JavaScript, TypeScript and Web Components designed using the Bootstrap framework.
315 lines (280 loc) • 16 kB
text/typescript
import { Components } from "gd-bs";
import { Helper, SPTypes, Web } from "gd-sprest";
import { ListForm } from "../../components/listForm";
import { IListFormDisplayProps, IListFormEditProps } from "../../components/listForm/types";
import { SPFxListWebPart } from "./wpSPFx";
import { ISPFxListFormWebPartProps, ISPFxListFormWebPart } from "./types";
/**
* List Form WebPart
*/
export const SPFxListFormWebPart = (wpProps: ISPFxListFormWebPartProps): ISPFxListFormWebPart => {
// See if we have already rendered the form
if (wpProps.spfx.domElement.querySelector("form")) { return; }
// Set the base properties
let baseProps: ISPFxListFormWebPartProps = {
render: (el, cfg) => {
// Set the list form properties
let listProps: Helper.IListFormProps = {
itemId: wpProps.spfx.context.itemId,
listName: wpProps.spfx.context.list.title
}
// Call the get list information event
listProps = wpProps.onGetListInfo ? wpProps.onGetListInfo(listProps) : listProps;
// Load the list information
Helper.ListForm.create(listProps).then(info => {
// See if this is the display form
let isDisplay = wpProps.spfx.displayMode == SPTypes.FormDisplayMode.Display;
if (isDisplay) {
// Set the display form properties
let dispProps: IListFormDisplayProps = {
el: wpProps.spfx.domElement,
info,
rowClassName: "mb-3"
};
// Call the rendering event
dispProps = wpProps.onDisplayFormRendering ? wpProps.onDisplayFormRendering(dispProps) : dispProps;
// Render the display form
wp.DisplayForm = ListForm.renderDisplayForm(dispProps);
// Call the rendered event
wpProps.onDisplayFormRendered ? wpProps.onDisplayFormRendered(wp.DisplayForm) : null;
} else {
// Render the edit form
let editProps: IListFormEditProps = {
el: wpProps.spfx.domElement,
info,
controlMode: info.item ? SPTypes.ControlMode.Edit : SPTypes.ControlMode.New,
rowClassName: "mb-3"
}
// Call the rendering event
editProps = wpProps.onEditFormRendering ? wpProps.onEditFormRendering(editProps) : editProps;
// Render the edit form
wp.EditForm = ListForm.renderEditForm(editProps);
// Call the rendered event
wpProps.onEditFormRendered ? wpProps.onEditFormRendered(wp.EditForm) : null;
}
// Render the footer
let elFooter = document.createElement("div");
elFooter.classList.add("footer");
wpProps.spfx.domElement.appendChild(elFooter);
// Set the footer properties
let btnSave: Components.IButton = null;
let footerProps: Components.ITooltipGroupProps = isDisplay ? {
el: elFooter,
tooltips: [
{
content: "Closes the form.",
btnProps: {
text: "Close",
type: Components.ButtonTypes.OutlineDark,
onClick: () => {
// Call the close event
wpProps.spfx.formClosed();
}
}
}
]
} : {
el: elFooter,
tooltips: [
{
content: "Saves the item.",
btnProps: {
text: info.item ? "Update" : "Save",
type: Components.ButtonTypes.OutlinePrimary,
assignTo: btn => { btnSave = btn; },
onClick: () => {
// Ensure the form is valid
if (wp.EditForm.isValid()) {
let values = wp.EditForm.getValues();
// Disable the button
btnSave.disable();
// Call the saving event
values = wpProps.onSaving ? wpProps.onSaving(values) : values;
// Save the item
wp.EditForm.save(values).then(
// Success
(item) => {
// Call the saved event
wpProps.onSaved ? wpProps.onSaved(item) : null;
// Enable the button
btnSave.enable();
// Call the save event
wpProps.spfx.formSaved();
},
// Error
err => {
// TODO
}
)
}
}
}
},
{
content: "Cancels the request.",
btnProps: {
text: "Cancel",
type: Components.ButtonTypes.OutlineDanger,
onClick: () => {
// Call the close event
wpProps.spfx.formClosed();
}
}
}
]
}
// Call the rendering method
footerProps = wpProps.onEditFooterRendering ? wpProps.onEditFooterRendering(footerProps) : footerProps;
if (footerProps) {
// Render the footer
Components.TooltipGroup(footerProps);
}
});
},
renderEdit: el => {
let elBody: HTMLElement = null;
let elFooter: HTMLElement = null;
// Render a modal
let modal = Components.Modal({
el,
title: "List Form Configuration (" + wp.Configuration.ListName + ")",
onRenderBody: el => { elBody = el; },
onRenderFooter: el => { elFooter = el; }
});
// Render the configure list button
Components.Button({
el,
text: "Configure List",
onClick: () => {
// Clear the body
while (elBody.firstChild) { elBody.removeChild(elBody.firstChild); }
// Clear the footer
while (elFooter.firstChild) { elFooter.removeChild(elFooter.firstChild); }
// Ensure a list has been selected
if (wp.Configuration.ListId) {
// Show a loading message
Components.Alert({
el: elBody,
type: Components.AlertTypes.Primary,
content: "Loading the list data..."
});
// Get the content types
Web(wp.Configuration.WebUrl).Lists().getById(wp.Configuration.ListId).ContentTypes().execute(cts => {
let items: Components.IDropdownItem[] = [];
// Clear the body
while (elBody.firstChild) { elBody.removeChild(elBody.firstChild); }
// Parse the content types
for (let i = 0; i < cts.results.length; i++) {
let ct = cts.results[i];
// Add the item
items.push({
data: ct,
text: ct.Name,
value: ct.Id.StringValue
});
}
// Render a form
let form = Components.Form({
el: elBody,
controls: [
{
name: "ContentType",
label: "Content Type",
type: Components.FormControlTypes.Dropdown,
items,
required: true
} as Components.IFormControlPropsDropdown,
{
name: "ComponentId",
label: "Component ID",
type: Components.FormControlTypes.TextField,
required: true,
value: wpProps.componentId
},
{
name: "ComponentProps",
label: "Component Properties",
type: Components.FormControlTypes.TextArea,
value: wpProps.componentProps
}
]
});
// Render the footer
Components.TooltipGroup({
el: elFooter,
tooltips: [
{
content: "Clears the list forms and reverts back to the default forms.",
btnProps: {
text: "Clear Custom Forms",
type: Components.ButtonTypes.OutlineDanger,
onClick: () => {
// Ensure an item is selected
if (form.isValid()) {
let values = form.getValues();
let item = values["ContentType"] as Components.IDropdownItem;
// Clear the form component properties
Web(wp.Configuration.WebUrl).Lists().getById(wp.Configuration.ListId).ContentTypes(item.value).update({
DisplayFormClientSideComponentId: "",
DisplayFormClientSideComponentProperties: "",
EditFormClientSideComponentId: "",
EditFormClientSideComponentProperties: "",
NewFormClientSideComponentId: "",
NewFormClientSideComponentProperties: ""
}).execute(() => {
// Close the modal
modal.hide();
});
}
}
}
},
{
content: "Applies the custom list forms to the selected list.",
btnProps: {
text: "Apply Custom Forms",
type: Components.ButtonTypes.OutlineSuccess,
onClick: () => {
// Ensure an item is selected
if (form.isValid()) {
let values = form.getValues();
let item = values["ContentType"] as Components.IDropdownItem;
// Set the form component properties
Web(wp.Configuration.WebUrl).Lists().getById(wp.Configuration.ListId).ContentTypes(item.value).update({
DisplayFormClientSideComponentId: values["ComponentId"],
DisplayFormClientSideComponentProperties: values["ComponentProps"],
EditFormClientSideComponentId: values["ComponentId"],
EditFormClientSideComponentProperties: values["ComponentProps"],
NewFormClientSideComponentId: values["ComponentId"],
NewFormClientSideComponentProperties: values["ComponentProps"]
}).execute(() => {
// Close the modal
modal.hide();
});
}
}
}
}
]
})
});
// Display the modal
modal.show();
} else {
// Render an error
Components.Alert({
el: elBody,
type: Components.AlertTypes.Danger,
content: "Edit the webpart and select a list to apply the solution to."
});
// Display the modal
modal.show();
}
}
});
}
}
// Return the webpart
let wp: ISPFxListFormWebPart = SPFxListWebPart({ ...wpProps, ...baseProps });
return wp;
}