28 Nov 2012

SharePoint. Add webpart via JavaScript Client Object Model

Code below add SimpleFormWebPart to page via JavaScript Client Object Model. This example show:

  • how to add webpart via JavaScript Client Object Model
  • how to add JavaScript file reference to any SharePoint page (here we add link to JS file on new element list form - newform.aspx)
Igotta.ResourcesBooking.DeployHelper = function () {
    this._initialize();
}

Igotta.ResourcesBooking.DeployHelper.prototype = {
    _context: null,

    _initialize: function () {
        this._context = new SP.ClientContext();
    },

    // targets = [
    //  {ServerRelativeUrl:'/site/Lists/List1/NewForm.aspx', htmlContent:'<p>Any HTML</p>' }, 
    //  {...}, ... 
    // ]
    addSimpleFormWebPartToPages: function (targets, callBack) {
        for (var ii in targets) {
            var webPartXml = '<WebPart xmlns="http://schemas.microsoft.com/WebPart/v2" xmlns:sfwp="http://schemas.microsoft.com/WebPart/v2/SimpleForm"><Assembly>Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly><TypeName>Microsoft.SharePoint.WebPartPages.SimpleFormWebPart</TypeName><FrameType>None</FrameType><Title>JS1</Title><sfwp:Content><![CDATA[{htmlContent}]]></sfwp:Content></WebPart>'
                .replace(/{htmlContent}/, targets[ii].htmlContent);

            var pageFile = this._context.get_web().getFileByServerRelativeUrl(targets[ii].ServerRelativeUrl);
            var limitedWebPartManager = pageFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
            var webPartDefinition = limitedWebPartManager.importWebPart(webPartXml);
            var webPart = webPartDefinition.get_webPart();
            limitedWebPartManager.addWebPart(webPart, 'Main', 1);
            this._context.load(webPart);
        }

        var self = this;
        this._context.executeQueryAsync(function () { callBack(); }, this._onError);
    },

    _onError: function (sender, args) { alert(args.get_message()); }
}

Igotta.ResourcesBooking.DeployHelper.registerClass('Igotta.ResourcesBooking.DeployHelper');


//
// usage
//

var deployHelper = new Igotta.ResourcesBooking.DeployHelper();
var addSimpleFormWebPartToPagesCallBack = function(){console.log('DONE')}
deployHelper.addSimpleFormWebPartToPages(
    [{
        ServerRelativeUrl: '/Booking15/Lists/BookingBookings/newform.aspx',
        htmlContent: '<script type=\"text/javascript\" src=\"../../Scripts/igotta.js\"></script>'
    }],
    addSimpleFormWebPartToPagesCallBack);

No comments:

Post a Comment