Is it possible to progrmamatically edit a Script Editor Web Part's code from the JS in the web part?

Question

Is it possible for JavaScript in a script editor web part or a similar web part to permanently edit the web part it resides in?

What I'd like to do is make a web part that when the page is opened in edit mode displays an interface for editing options for that web part.

Then when the user clicks save or in a similar action the web part would save the config choices they made to the containing web part.

Is something like this possible to make client side per web part config possible?

Answer 1

Yes, This is possible by updating the Code Snippet of the Script Editor. You can update the web part properties as below.

UpdateWebPartProperty();


function UpdateWebPartProperty()
{
var listName = "list1";
var jslinkURL = "~sitecollection/SiteAssets/testjslink.js";
var pageUrl = "/Lists/" + listName + "/NewForm.aspx";

var clientContext = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);
console.log(_spPageContextInfo.webServerRelativeUrl);
var oFile = clientContext.get_web().getFileByServerRelativeUrl(_spPageContextInfo.webServerRelativeUrl + pageUrl); 
var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
var collWebPart = limitedWebPartManager.get_webParts();

clientContext.load(collWebPart);
clientContext.executeQueryAsync(function () 
{
    var webPartDef = null;
    for (var x = 0; x < collWebPart.get_count() && !webPartDef; x++) {
        var temp = collWebPart.get_item(x);
        console.log(temp.get_id().toString());
    }
    webPartDef = collWebPart.get_item(0);
    if (!webPartDef) {
        console.log("Web Part: " + wpId + " not found on page: " + _spPageContextInfo.webServerRelativeUrl);
        return;
    }
    var webPartProperties = webPartDef.get_webPart().get_properties();
    clientContext.load(webPartProperties);
    clientContext.executeQueryAsync(
        function () {
            var webpartprops = webPartProperties;
            console.log(webpartprops.get_item('JSLink'));
            webpartprops.set_item("JSLink", jslinkURL);
            webPartDef.saveWebPartChanges();
            clientContext.load(webPartDef);
            clientContext.executeQueryAsync(
            function () {
                console.log("Web part properties saved.");
            },
            function() 
            {
                console.log("Failed save Web part Properties"); 
            });
        }, 
        function () 
        { 
            console.log("Failed to load web part properties"); 
        });
}, 
function () { 
    console.log("Failed to load web part collection"); 
});}

Answer 2

You may simply use the code from https://docs.microsoft.com/en-us/previous-versions/office/developer/sharepoint-2010/hh185010(v=office.14):

var siteUrl = '/sites/MySiteCollection';
var serverRelativeUrl = '/sites/MySiteCollection/Default.aspx';

function updateWebPartTitle() {

    this.clientContext = new SP.ClientContext(siteUrl);
    var oFile = clientContext.get_web().getFileByServerRelativeUrl(serverRelativeUrl);

    var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
    this.collWebPart = limitedWebPartManager.get_webParts();

    clientContext.load(collWebPart);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.changeTitle), Function.createDelegate(this, this.onQueryFailed));
}

function changeTitle() {

    if (!collWebPart.get_count()) {
        alert('No Web Parts on this page.');
    }

    var oWebPartDefinition = collWebPart.get_item(2);
    this.oWebPart = oWebPartDefinition.get_webPart();
    oWebPart.set_title('My New Web Part Title');

    oWebPartDefinition.saveWebPartChanges();

    clientContext.load(oWebPart, 'TitleUrl');

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

function onQuerySucceeded() {

    alert('Title changed for Web Part: ' + this.oWebPart.get_titleUrl());
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

The only change you'd need is to target the only Web part you want maybe by looping trhough collWebPart and checking the Ids.
You may check https://sharepoint.stackexchange.com/a/128962 for such a purpose.

Answer 3

First find out the mode of the page using below code

var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
if (inDesignMode == "1")
{
// Page instance is in edit mode
// Run code which requires accessing EditModePanel controls
}
else
{
// Page instance is in browse mode
}

And put your conditions based on the mode of the page.

For WIKI pages

var IsEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value; 
if (IsEditMode == "Edit") { 
// wiki page is in edit mode 
} else { // wiki page is not in edit mode }

When user save the webpart, save configuration to list with current WebPart Id. So when you open that page again, it will fetch configuration from list and load data as per configuration.