How to add JSLink to a field through pnp?

Question

I am trying to add a JSLink to my field through pnp so that it displays diffrently in the edit/new mode in the list that it is connected to, the problem i am having is that pnp throws an unknown error when i am running this command (Reference):

Set-PnPField -Identity KIT_sc_ProjectType -Values @{JSLink="~sitecollection/siteassets/jslink/groupcreation_grouptemplates.js";Group="KIT Fields"} -UpdateExistingLists

this the error i am getting back:

Set-PnPField : unknown error At line:1 char:1 + Set-PnPField -Identity KIT_sc_ProjectType -Values @{JSLink="~sitecoll ... + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : WriteError: (:) [Set-PnPField], ServerException + FullyQualifiedErrorId : EXCEPTION,SharePointPnP.PowerShell.Commands.Fields.SetField

Is it possible to add JSLink some another way to a field?

Answer 1

I needed to enable "Custom Script" in "https://tenantname-admin.sharepoint.com/_layouts/15/online/TenantSettings.aspx".

Everything works now, i was able to run it with pnp.

Answer 2

Set the JSLink to a field using JSOM：

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(setJslink, 'sp.js');
function setJslink()
{
        var context = new SP.ClientContext.get_current();
        var web = context.get_web();
        var field = web.get_availableFields().getByTitle("Description");
        context.load(field);
        context.executeQueryAsync(function(){
        field.set_jsLink("~sitecollection/SiteAssets/suggestion.js");
        field.updateAndPushChanges(true);
        context.executeQueryAsync(function(){
        var jsl = field.get_jsLink();
        console.log(jsl);
        });
        });
}
</script>

Reference:

Set JSLink on a Site Column With JSOM

Answer 3

There are several ways to add the JavaScript (JSLink) in Content Editor Web Part to the page: JS, CSOM note that the URL link should be added to ContentLink:

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

function addWebPart() {
    var clientContext = new SP.ClientContext(siteUrl);
    var oFile = clientContext.get_web().getFileByServerRelativeUrl(serverRelativeUrl);
    var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
    var webPartXml = '<?xml version=\"1.0\" encoding=\"utf-8\"?>' + 
        '<WebPart xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"' + 
        ' xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\"' + 
        ' xmlns=\"http://schemas.microsoft.com/WebPart/v2\">' + 
        '<Title>My Web Part</Title><FrameType>Default</FrameType>' + 
        '<Description>Use for formatted text, tables, and images.</Description>' + 
        '<IsIncluded>true</IsIncluded><ZoneID></ZoneID><PartOrder>0</PartOrder>' + 
        '<FrameState>Normal</FrameState><Height /><Width /><AllowRemove>true</AllowRemove>' + 
        '<AllowZoneChange>true</AllowZoneChange><AllowMinimize>true</AllowMinimize>' + 
        '<AllowConnect>true</AllowConnect><AllowEdit>true</AllowEdit>' + 
        '<AllowHide>true</AllowHide><IsVisible>true</IsVisible><DetailLink /><HelpLink />' + 
        '<HelpMode>Modeless</HelpMode><Dir>Default</Dir><PartImageSmall />' + 
        '<MissingAssembly>Cannot import this Web Part.</MissingAssembly>' + 
        '<PartImageLarge>/_layouts/images/mscontl.gif</PartImageLarge><IsIncludedFilter />' + 
        '<Assembly>Microsoft.SharePoint, Version=13.0.0.0, Culture=neutral, ' + 
        'PublicKeyToken=94de0004b6e3fcc5</Assembly>' + 
        '<TypeName>Microsoft.SharePoint.WebPartPages.ContentEditorWebPart</TypeName>' + 
        '<ContentLink xmlns=\"http://schemas.microsoft.com/WebPart/v2/ContentEditor\">' + '/sites/SiteAssets/Test.js</ContentLink>' + 
        '<Content xmlns=\"http://schemas.microsoft.com/WebPart/v2/ContentEditor\">' + 
        '<![CDATA[This is a first paragraph!<DIV>&nbsp;</DIV>And this is a second paragraph.]]></Content>' + 
        '<PartStorage xmlns=\"http://schemas.microsoft.com/WebPart/v2/ContentEditor\" /></WebPart>';

    var oWebPartDefinition = limitedWebPartManager.importWebPart(webPartXml);
    this.oWebPart = oWebPartDefinition.get_webPart();
    limitedWebPartManager.addWebPart(oWebPart, 'Left', 1);
    clientContext.load(oWebPart);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
    alert('Web Part added: ' + oWebPart.get_title());
}
function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Answer 4

Set JS Link using PNP Field, just remove tilt sign from jslink path. JSLink properties requires relative path without any placeholder. it will automatically add your current site url before '/'

Set-PnPField -Identity KIT_sc_ProjectType -Values @{JSLink="/siteassets/jslink/groupcreation_grouptemplates.js";Group="KIT Fields"} -UpdateExistingLists