Field

The field component will render the appropriate element type, based on the field type and control mode.

Supported Types

The field components currently supported are:

  • Attachments
  • Boolean
  • Choice
  • Date
  • Date/Time
  • Lookup
  • Managed Metadata
  • Multi-Choice
  • Multi-User
  • Note (Plain Text)
  • Number
  • Text
  • Url
  • User

Input Parameters

Name Type Description
className string The class name.
controlMode number The control mode of the form.
disabled boolean True to disable the field, when in edit/new mode.
el HtmlElement The element to render the field to.
fieldInfo IListFormFieldInfo The field information.
onChange (value) => void The change event.
value any The field value.

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.

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..."
        });

        // Get the list information
        $REST.JS.Components.ListInfo({ listName: "My List" }).then(info => {
            // Render the field to the element
            Field({
                el,
                controlMode: SPTypes.ControlMode.Display,
                fieldInfo: {
                    field: info.fields["MyFieldInternalName"],
                    listName: "My List",
                    name: "MyFieldInternalName"
                },
                value: "Default Value"
            });
        });
    }
}

TypeScript

import { SPTypes } "gd-sprest";
import { Fabric, Field, ListInfo } from "gd-sprest-js";

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

        // Get the list information
        ListInfo({ listName: "My List" }).then(info => {
            // Render the field to the element
            Field({
                el,
                controlMode: SPTypes.ControlMode.Display,
                fieldInfo: {
                    field: info.fields["MyFieldInternalName"],
                    listName: "My List",
                    name: "MyFieldInternalName"
                },
                value: "Default Value"
            });
        });
    }
}