Creating a Basic Web Part Page using JSOM

Question

I'm trying to create a basic Web Part page using JSOM for SharePoint 2013 and in this page I want to add a CEWP.

Could someone direct me in the right direction on how to do this?

Answer 1

Creating a SharePoint Wiki Page via JavaScript and REST or CSOM

function createWikiPage(webUrl,listTitle,fileName,success, failure)
{

  getListUrl(webUrl,listTitle,
    function(listUrl){  

     var fileUrl = listUrl + '/' + fileName
     var url = webUrl + "/_api/web/GetFolderByServerRelativeUrl('" + listUrl + "')/Files" +
               "/AddTemplateFile(urlOfFile='" + fileUrl + "',templateFileType=1)";
     $.ajax({
        url: url,
        method: "POST",
        headers: {
               "accept": "application/json;odata=verbose",
               "content-type": "application/json;odata=verbose",
               "X-RequestDigest" : $("#__REQUESTDIGEST").val()
        },
        success: function (data) {
            success(data.d);
        },
        error: function (data) {
            failure(data);
        }
     });

    },
    failure
  );


}


function getListUrl(webUrl,listTitle,success, failure)
{
    var url = webUrl + "/_api/web/lists/GetByTitle('" + listTitle +  "')/RootFolder"; 
    $.ajax({
        url: url,
        method: "GET",
        headers: {
               "accept": "application/json;odata=verbose",
               "content-type": "application/json;odata=verbose"
        },
        success: function (data) {
            success(data.d.ServerRelativeUrl);
        },
        error: function (data) {
            failure(data);
        }
    });
}


//Usage
createWikiPage(_spPageContextInfo.webAbsoluteUrl,'Pages','WikiTestPage.aspx',
  function(page){  
    console.log(JSON.stringify(page));
  },
  function(error){
    console.log(JSON.stringify(error));
  }
);

function addWebPart(webUrl, pageUrl,webPartXml,zoneId,zoneIndex, Success,Error){
    var context = new SP.ClientContext(webUrl);
    var web = context.get_web();

    var file = web.getFileByServerRelativeUrl(webUrl + pageUrl);
    var webPartMngr = file.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
    var webPartDef = webPartMngr.importWebPart(webPartXml);
    var webPart = webPartDef.get_webPart();
    webPartMngr.addWebPart(webPart, zoneId, zoneIndex);

    context.load(webPart);
    context.executeQueryAsync(
      function() {
        Success(webPart);
      },
      Error
    );
}

Is it possible to programmatically add a web part to a page in a sharepoint hosted app (JS)

var webPartXml = '<?xml version="1.0" encoding="utf-8"?>' +
'<WebPart xmlns="http://schemas.microsoft.com/WebPart/v2">' +
    '<Assembly>Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>' + 
    '<TypeName>Microsoft.SharePoint.WebPartPages.ContentEditorWebPart</TypeName>' + 
    '<Title>$Resources:core,ContentEditorWebPartTitle;</Title>' +
    '<Description>$Resources:core,ContentEditorWebPartDescription;</Description>' +
    '<PartImageLarge>/_layouts/15/images/mscontl.gif</PartImageLarge>' +
'</WebPart>';

addWebPart('/','Pages/default.aspx',webPartXml,'Left',1,function(webPart){
    console.log(webPart.get_title() + ' has been added'); 
},function(sender,args){
    console.log(args.get_message());
});

Answer 2

You can add this entire block and edit it to your liking inside your CEWP. Instead of the alert, you can use something like writing html, and appending it to a container. This snippet came directly from: https://msdn.microsoft.com/en-us/library/office/jj163201.aspx

function retrieveListItems(siteUrl) {
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Announcements');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(
        '<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query>' + 
        '<RowLimit>10</RowLimit></View>'
    );
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    ); 
}

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        listItemInfo += '\nID: ' + oListItem.get_id() + 
            '\nTitle: ' + oListItem.get_item('Title') + 
            '\nBody: ' + oListItem.get_item('Body');
    }

    alert(listItemInfo.toString());
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

retrieveListItems("http://siteurl");