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.

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
8
  • 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, 2018 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, 2018 at 12:28
  • Both of these give App Package validation error.
    – Jarek Danielak
    Dec 18, 2018 at 12:34
  • Sorry as I found something in here...stackoverflow.com/questions/15784326/…
    – Hardik
    Dec 18, 2018 at 12:38
  • Yes, thank you. I think you just can't use JS in CommandAction anymore.
    – Jarek Danielak
    Dec 18, 2018 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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