My time break for Office in 365 days: March 2015

Friday, March 27, 2015

Add Custom Ribbon Button in Site Page to Popup all SharePoint Apps

From time to time i have request from customers they need to access their SharePoint Apps but they hate the Left menu "Recent group" but they want to be accessible in frequent used pages like the Site Pages.

For this example, i created a Custom Ribbon Button to list all SharePoint App of the current Site installed in a Modal Dialog View Page, using the Site Page Ribbon Tab.

Here are some links about this topic:

http://aaclage.blogspot.ch/2014/04/examples-of-customization-of-ribbons-in.html

This is the final output of this example:

When the Ribbon Button is selected should list the SharePoint App in a Modal Dialog Box in a very easy way.

For the XML configuration for the Ribbon i can recommend the following article to include your custom Ribbon.
http://aaclage.blogspot.ch/2014/04/examples-of-customization-of-ribbons-in.html
or the following XML example:

</Controls>

</Group>

</CommandUIDefinition>

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIHandlers>

</CommandUIExtension>

If you don't want to create the XML by your own you can use the Processlynx Ribbon Manager to create the ribbon XML for you using a Form Interface, like the following example:

Create a new User Custom Action Form and fill out withe following parameters.

When you create a new Ribbon Button you can configure the button edit the code source of your action.

The App provide interface where the JavaScript code can be edited to make the needed action in the Ribbon.

Here the code for the Action associated with the Ribbon "List Apps":

var appinstancesList;

var clientcontext;

var currentWeb;

LoadApps();

function LoadApps() {

clientcontext = SP.ClientContext.get_current()

currentWeb = clientcontext.get_web();

appinstancesList = SP.AppCatalog.getAppInstances(clientcontext, currentWeb);

clientcontext.load(appinstancesList);

clientcontext.executeQueryAsync(Success, fail);

}

function Success() {

var stringHtml = '';

var list = appinstancesList.getEnumerator();

while (list.moveNext()) {

var current = list.get_current();

stringHtml += '<div>' + current.get_title() + '</br><a href=\'' + _spPageContextInfo.webServerRelativeUrl + ((_spPageContextInfo.webServerRelativeUrl.indexOf('/', _spPageContextInfo.webServerRelativeUrl.length - 1) !== -1) ? '' : '/') + '_layouts/15/appredirect.aspx?instance_id={' + current.get_id() + '}\'>Link</a></div>';

}

DialogApps(stringHtml);

}

function fail(sender, args) {

alert(args.get_message());

}

function DialogApps(stringHtml) {

var element = document.createElement('div');

element.innerHTML = stringHtml;

SP.UI.ModalDialog.showModalDialog({

html: element,

title: "SharePoint Apps",

allowMaximize: false,

showClose: true,

autoSize: true

});

}

How was configured (Implementation)

To configured this Ribbon function i used the Processlynx Custom Action & Ribbon Manager for the customization of the Ribbon and Actions associated, more easy and faster to create the ribbon and code.But you can also use Visual Studio declarative XML, JSOM UserCustomAction or REST Custom Actions from SharePoint.

After the code is included and Ribbon created, you can access to you site pages and click Page and new option appear call "SharePoint Apps", when the option is selected a modal dialog appears with title and link to the app.

That is, very simple
Hope you like this article,
Andre Lage