1

I have an SharePoint hosted Add-in project in Visual Studio 2017. The solution deploys and the custom ribbon button is visible.

I want my button to run some JavaScript, but no matter how I try, I'm getting package validation error when any JS is present.

Following approach fails:

<CommandUIHandler Command="Invoke_RibbonCustomAction1ButtonRequest"
                  CommandAction="javascript:alert('123');"/>

as well as following:

<CustomAction ScriptSrc="~appWebUrl/Scripts/HelloWorld.js" 
              Location="ScriptLink" Sequence="1">

<CommandUIHandler Command="Invoke_RibbonCustomAction1ButtonRequest"
                  CommandAction="javascript:tryMe();"/>

As far as I understand, sandbox solutions are deprecated in SharePoint Online and it cannot be a work-around for this problem.

1

XML for the button is as follows:

<CommandUIExtension>
<CommandUIDefinitions>
    <CommandUIDefinition Location="Ribbon.Library.ViewFormat.Controls._children">
        <Button Id="Ribbon.Library.ViewFormat.About"
            Command="AboutButtonCommand"
            LabelText="About"
            Image32by32="{SiteUrl}/_layouts/15/1033/Images/formatmap32x32.png?rev=23"
            Image32by32Top="-273"
            Image32by32Left="-1"
            Description="About"
            TemplateAlias="o1" />
    </CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
    <CommandUIHandler
        Command="AboutButtonCommand"
        CommandAction="javascript:aboutScript({SelectedItemId});"
        EnabledScript="javascript:onlyOneItemSelected();" />
</CommandUIHandlers>

As we see in the CommandUIHandler, the CommandAction and the EnabledScript just contain calls to a JavaScript-function. These functions are placed in a simple JavaScript file:

AboutButtonScript.js

function aboutScript(itemId) {
    alert("Hello user! You have selected item " + itemId);
}

function onlyOneItemSelected() {
    return (SP.ListOperation.Selection.getSelectedItems().length == 1)
}

To make this code available, we will store the file with the JavaScript-code in a document library in our SharePoint site. In the example, I prepared a library “Scripts” to store the file.

Now we can store the script file in the library, add the extension to the ribbon and make the file available for the ribbon extension. This could be done with the Office 365 PnP PowerShell extensions:

Add-PnPFile -Path .\AboutButtonScript.js -Folder "Scripts"

$ribbon = Get-Content .\MyRibbon.xml
$ribbon = [string]$ribbon
Add-PnPCustomAction -Name "RibbonTester" -Title "RibbonTester" -Description "-" -Group "Tester" -Location "CommandUI.Ribbon" -CommandUIExtension $ribbon -RegistrationType ContentType -RegistrationId 0x0101

Add-PnPJavaScriptLink -Name "AboutButtonScript" -Url https://mytenant.sharepoint.com/sites/perm-tester/Scripts/AboutButtonScript.js -Scope Web

I took it from below mentioned article. Kindly follow it so it will be easy for you.

SharePoint – Ribbon-Scripts with external JavaScript-files

UPDATED

According to MSDN that is not possible:

CustomAction cannot contain JavaScript: Any UrlActions or CommandActions must be a URL to navigate to. The URL can be parameterized with normal custom actions tokens in addition to the app-specific tokens.

Using HostWebDialog seem to be the preferred approach for this scenario. You might also consider passing an additional parameter for your page in the App Web, so it will identify it was opened from CustomAction.

  • The article and your answer covers extracting the script from CommandAction to external file. But how come SharePoint doesn't allow me to simply call CommandAction="javascript:alert('Hello');"? – Jarek Danielak Dec 18 '18 at 12:19
  • You need to use javascript:__doPostBack('EventName',''); to call our the function or you can use CommandAction="javascript:SayHello(); function SayHello() { alert('Hello'); alert('Hello Again'); }" to call alert. – Hardik Dec 18 '18 at 12:28
  • Both of these give App Package validation error. – Jarek Danielak Dec 18 '18 at 12:34
  • Sorry as I found something in here...stackoverflow.com/questions/15784326/… – Hardik Dec 18 '18 at 12:38
  • Yes, thank you. I think you just can't use JS in CommandAction anymore. – Jarek Danielak Dec 18 '18 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.