List Form Field

The list form field component is used to load the appropriate field information to render a list form, based on the field type.

Input Parameters (List Form Field Information)

Name Type Description
defaultValue any The default value.
field IFieldResult or IFieldQueryResult The list field.
listName string The list name.
name string The internal name of the field.
readOnly boolean Flag indicating if the field is read-only.
required boolean True indicates a required field type.
title string The display name of the field.
type number The field type.
typeAsString string The field type as a string.
webUrl string The relative web url containing the list.

Methods

Name Parameters Description
create props: IListFormFieldInfo Creates an instance of the list form field.
loadLookupData info: IListFormLookupFieldInfo, queryTop?: number Load the lookup data.
loadMMSData info: IListFormMMSFieldInfo Loads the taxonomy term data.
loadMMSValueField info: IListFormMMSFieldInfo Loads the taxonomy hidden value field.

JavaScript

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

export const MyField = function(){
    // Get the target element
    let el = document.querySelector("#myfield");
    if(el) {
        // Render a loading dialog
        $REST.JS.Fabric.Spinner({
            el,
            text: "Loading the field..."
        });

        // Load my field
        (new $REST.JS.Components.ListFormField({ listName: "My List", name: "MyFieldInternalName" })).then(function(fieldInfo) {
            // Code goes here
        });
    }
}

TypeScript

import { Components } from "gd-sprest-js";

export const MyField = () => {
    // Get the target element
    let el = document.querySelector("#myfield");
    if(el) {
        // Render a loading dialog
        $REST.JS.Fabric.Spinner({
            el,
            text: "Loading the field..."
        });

        // Load my field
        Components.ListFormField({ listName: "My List", name: "MyFieldInternalName" }).then(fieldInfo => {
            // Code goes here
        });
    }
}