WebPart

The client-side webpart component can be used to control what is displayed when a page is being edited and displayed. An optional hidden configuration element can be utilized to store a custom configuration.

Configuration

The edit form property allows you to customize the webpart configuration. Reference the Form for additional details on the form control types available.

Examples

Refer to the custom solutions for examples of creating custom webparts.

JavaScript
var WebParts = require("gd-sprest-bs").WebParts;

// Create the webpart
WebParts.WebPart({
    elementId: "my-wp",
    cfgElementId: "my-wp-cfg",
    onRenderDisplay: function(wpInfo) {
        // Render the display element
        wpInfo.el.innerHTML = '<h1>Hello Display Mode</h1>';
    },
    onRenderEdit: function(wpInfo) {
        // Render the edit element
        wpInfo.el.innerHTML = '<h1>Hello Edit Mode</h1>';
    }
});
TypeScript
import { WebParts } from "gd-sprest-bs";

// Create the webpart
WebParts.WebPart({
    elementId: "my-wp",
    cfgElementId: "my-wp-cfg",
    onRenderDisplay: (wpInfo) => {
        // Render the display element
        wpInfo.el.innerHTML = '<h1>Hello Display Mode</h1>';
    },
    onRenderEdit: (wpInfo) => {
        // Render the edit element
        wpInfo.el.innerHTML = '<h1>Hello Edit Mode</h1>';
    }
});

Properties

Name Type Description
cfgElementId string The optional configuration element id.
className string The class name.
elementId string The target element id to render the webpart to.
editForm IWPEditForm The edit form.
helpProps { title?: string; url: string; } The optional help link properties.
onPostRender (wp: IWPInfo, …args) => void The post render event.
onRenderDisplay (wp: IWPInfo) => any The render event triggered when the page is in ‘Display’ mode.
onRenderEdit (wp: IWPInfo) => any The render event triggered when the page is in ‘Edit’ mode.
wpClassName string The webpart class name.

Edit Form (IWPEditForm)

Name Type Description
actions Array<Components.IButtonProps> The form action buttons displayed in the footer of the modal.
onRenderForm (wpInfo?: IWPInfo) => Array<Components.IFormControlProps> | PromiseLike<Array<Components.IFormControlProps>> | void The render form event.
onSave (wpCfg?: IWPCfg, form?: Components.IForm) => IWPCfg The save event.
showSaveButton boolean True to hide the save button.

WebPart Configuration (IWPCfg)

Name Type Description
WebPartId string The webpart id.