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:

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.  
or the following XML example:

<CommandUIExtension xmlns="">
<CommandUIDefinition Location="Ribbon.WikiPageTab.Groups._children">
<Group Id="SharePoint.Apps" Title="SharePoint Apps" Template="Ribbon.Templates.Flexible2">
<Controls Id="SharePoint.Apps.Controls">
<Button Id="List.Apps.Option" LabelText="List Apps Option" Image32by32="/_layouts/15/1033/images/formatmap32x32.png?rev=33" Image32by32Left="-373" Image32by32Top="-307" Command="List.Apps.Option.Command" TemplateAlias="o1" />
<CommandUIDefinition Location="Ribbon.WikiPageTab.Scaling._children">
<MaxSize Id="SharePoint.Apps.Scaling.MaxSize" GroupId="SharePoint.Apps" Size="LargeLarge" />
<CommandUIDefinition Location="Ribbon.Templates._children"><GroupTemplate Id="Ribbon.Templates.Flexible2"><Layout Title="LargeLarge" LayoutTitle="LargeLarge"><OverflowSection DisplayMode="Large" TemplateAlias="o1" Type="OneRow" /><OverflowSection DisplayMode="Large" TemplateAlias="o2" Type="OneRow" /></Layout><Layout Title="LargeMedium" LayoutTitle="LargeMedium"><OverflowSection DisplayMode="Large" TemplateAlias="o1" Type="OneRow" /><OverflowSection DisplayMode="Medium" TemplateAlias="o2" Type="ThreeRow" /></Layout><Layout Title="LargeSmall" LayoutTitle="LargeSmall"><OverflowSection DisplayMode="Large" TemplateAlias="o1" Type="OneRow" /><OverflowSection DisplayMode="Small" TemplateAlias="o2" Type="ThreeRow" /></Layout><Layout Title="MediumLarge" LayoutTitle="MediumLarge"><OverflowSection DisplayMode="Medium" TemplateAlias="o1" Type="ThreeRow" /><OverflowSection DisplayMode="Large" TemplateAlias="o2" Type="OneRow" /></Layout><Layout Title="MediumMedium" LayoutTitle="MediumMedium"><OverflowSection DisplayMode="Medium" TemplateAlias="o1" Type="ThreeRow" /><OverflowSection DisplayMode="Medium" TemplateAlias="o2" Type="ThreeRow" /></Layout><Layout Title="MediumSmall" LayoutTitle="MediumSmall"><OverflowSection DisplayMode="Medium" TemplateAlias="o1" Type="ThreeRow" /><OverflowSection DisplayMode="Small" TemplateAlias="o2" Type="ThreeRow" /></Layout><Layout Title="SmallLarge" LayoutTitle="SmallLarge"><OverflowSection DisplayMode="Small" TemplateAlias="o1" Type="ThreeRow" /><OverflowSection DisplayMode="Large" TemplateAlias="o2" Type="OneRow" /></Layout><Layout Title="SmallMedium" LayoutTitle="SmallMedium"><OverflowSection DisplayMode="Small" TemplateAlias="o1" Type="ThreeRow" /><OverflowSection DisplayMode="Medium" TemplateAlias="o2" Type="ThreeRow" /></Layout><Layout Title="SmallSmall" LayoutTitle="SmallSmall"><OverflowSection DisplayMode="Small" TemplateAlias="o1" Type="ThreeRow" /><OverflowSection DisplayMode="Small" TemplateAlias="o2" Type="ThreeRow" /></Layout></GroupTemplate></CommandUIDefinition>
<CommandUIHandler Command="List.Apps.Option.Command" CommandAction="[Code]" />


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;
        function LoadApps() {
            clientcontext = SP.ClientContext.get_current()
            currentWeb = clientcontext.get_web();
            appinstancesList = SP.AppCatalog.getAppInstances(clientcontext, currentWeb);
            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>';
        function fail(sender, args) {

        function DialogApps(stringHtml) {
            var element = document.createElement('div');
            element.innerHTML = stringHtml;
                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

No comments: