Error with Ribbon Buttons and redeploying SharePoint 2013 Apps

While doing a SharePoint hosted app, I wanted to add a button to the ribbon in the host web, that when clicked it would take me to the App, and pass in some tokens. Creating buttons for the ribbon in Visual Studio 2012 is a lot nicer now. You just add a new item and select “Ribbon Custom Action” from the Add New Item dialog. This takes you through a wizard to create the button.

After you have created your wizard, you will get the Elements.xml file that you used to have to hand crank yourself in Visual Studio 2010 and SharePoint 2010.

You will have noticed in the XML I have changed the CommandAction from “~appWebUrl/Pages/Default.aspx?” to “~appWebUrl/Pages/Default.aspx?{StandardTokens}&SelectedList={SelectedListId}&SelectedItems={SelectedItemId}”. This is so when I click the button on the List in the host web, it will redirect to the app and pass in the List ID and any selected items ID from the list. Full list of string tokens can be found on MSDN . I deployed my app, went to an Announcement list, selected 2 items, clicked the Demo Ribbon button, and it redirected me to the app, and I could see in my URL the ID for the List, and ID’s of the two selected items.

I retracted the app by stopping debugging in Visual Studio. Now I proved my button worked, I wanted to update the JavaScript in App.js to handle my List ID and Selected Item ID’s. I made some changes to the App.js and redeployed my App again. I navigated to the Announcement list again, selected some items and click the button again. But then…

The JavaScript wasn’t even being hit, so what was going on? It wasn’t until I changed the CommandAction in the button’s element.xml back to the default ~appWebUrl/Pages/Default.aspx?{StandardTokens}, run the app again, and got the exact same message that made me realise that the button is cached in the browser. When you first deploy it to SharePoint, the ~appWebUrl is converted to the actual App Web URL. The next time you redeploy your app, the URL is a different address, but the details about the button are cached pointing to the old URL. Annoyingly the only way to fix, is to clear the cache in IE before each deployment.

  • Go to Internet Options > General > Browsing History > Delete… select Temporary Internet files and website files and click delete.
  • Close all IE Browsers and then re deploy your app. Your button will now work again.