List Form Panel

The list form panel component will render a list form within a panel, based on the input parameters. A save or edit button will be displayed, based on the control mode of the form.

Input Parameters

Name Type Description
className string The class name.
controlMode number The form control mode.
el HtmlElement The element to render the list form panel to.
item any The list form values.
panelIsBlocking boolean True to make the panel blocking.
panelTitle string The panel title.
panelType number The panel type.

Methods

Name Parameters Description
getForm   Returns a display or edit list form.
show controlMode: number Displays the list form panel.

JavaScript

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

export const MyPanel = function() {
    // Get the target element
    var el = document.querySelector("#myform");
    if(el) {
        // Render the template
        el.innerHTML = "<div></div><div></div>";

        // Render the panel
        var newForm = $REST.JS.Components.ListFormPanel({
            el: el.children[0],
            listName: "My List"            
        });

        // Render a button
        $REST.JS.Fabric.Button({
            el: el.children[1],
            text: "New Item",
            onClick: () => {
                // Show the panel
                newForm.show();
            }
        })
    }
}

TypeScript

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

export const MyPanel = () => {
    // Get the target element
    let el = document.querySelector("#myform");
    if(el) {
        // Render the template
        el.innerHTML = "<div></div><div></div>";

        // Render the panel
        let newForm = ListFormPanel({
            el: el.children[0],
            listName: "My List"            
        });

        // Render a button
        Fabric.Button({
            el: el.children[1],
            text: "New Item",
            onClick: () => {
                // Show the form
                newForm.show(SPTypes.ControlMode.New);
            }
        });
    }
}