List Form

The list form component will load the list information, and render the elements based on the input parameters. If no fields are specified, then the default content type is loaded to deteremine the field order.

Input Parameters

Name Type Description
cacheKey string If defined, the data will be cached to the session storage.
excludeFields Array<string> The form fields to exclude.
fields IListItemQueryResult or IListItemResult The list item.
itemId number The item id.
listName string The list name.
loadAttachments boolean Flag to deteremine if we are loading attachments.
query ODataQuery OData query used when loading an item.
webUrl string The relative web url containing the list.

Methods

Name Parameters Description
create props: IListFormProps Creates an instance of the list form.
loadAttachments listInfo: IListFormProps Method to load the item attachments.
refreshItem listInfo: IListFormResult Method to refresh the item.
removeAttachments listInfo: IListFormProps, attachmentInfo: Array<IAttachment> Method to remove attachments from an item.
renderDisplayForm props: IListFormDisplayProps Method to render the display form template.
renderEditForm props: IListFormEditProps Method to render the edit/new form.
renderFormTemplate props: IListFormDisplayProps Method to render the form template.
saveAttachments listInfo: IListFormProps, attachmentInfo: Array<IListFormAttachmentInfo> Method to save attachments to the item.
saveItem info: IListFormResult, formValues: any Method to save the item.
showFileDialog info: IListFormResult Method to show the file dialog.

renderDisplayForm

Input Parameters
Name Type Description
el HtmlElement The element to render the form to.
excludeFields Array<string> The fields to exclude from the form.
includeFields Array<string> The fields to include in the form.
info IListFormResult The list form information.
List Form Display
Name Parameters Description
getFields   Returns the form fields.

renderEditForm

Input Parameters
Name Type Description
controlMode number The form control mode.
el HtmlElement The element to render the form to.
excludeFields Array<string> The fields to exclude from the form.
includeFields Array<string> The fields to include in the form.
info IListFormResult The list form information.
List Form Edit
Name Parameters Description
getFields   Returns the form fields.
getValues   Returns the form values.

List Result

Name Type Description
attachments Array<IAttachment> The item attachments.
fields { [key: string]: IFieldResult } The form fields.
item IListItemQueryResult or IListItemResult The list item.
query ODataQuery The item query.
list IListResult The list.

JavaScript

var $REST = require("gd-sprest-js");

export const MyForm = function(){
    // Get the target element
    var el = document.querySelector("#myform");
    if(el) {
        // Render the form
        var newForm = $REST.JS.Components.ListForm({
            controlMode: $REST.SPTypes.ControlMode.New,
            el: el,
            listName: "My List"            
        });
    }
}

TypeScript

import { SPTypes } "gd-sprest";
import { ListForm } from "gd-sprest-js";

export const MyField = () => {
    // Get the target element
    let el = document.querySelector("#myform");
    if(el) {
        // Render the form
        ListForm({
            controlMode: SPTypes.ControlMode.New,
            el: el.children[0],
            listName: "My List"            
        });
    }
}