SharePoint:Add addEventListener Radar in Host Web to load App Part Custom postMessage to Ribbons

Hi all, 
This article talks about a frequent topic SharePoint Apps Parts and SharePoint Sites. How to communicate between App as Iframe to SharePoint Site. A lot of developers know how to manage this type of problems adding webPart with addEventListener code and postMessage to communicate with App Iframe.

This solution create a "Radar" of EventListeners in the SharePoint site and add a Custom Ribbon with content sent by the Iframe from a App Part added in the SharePoint Page. 
For this example solution was created 2 App Parts to send different content to  SharePoint Pages.

Here is the architecture of the Example Solution:

Final output of the example solution:

Here is a article talking about this type of communication between the App Part and SharePoint Site with Iframe approach:

http://blogs.msdn.com/b/richard_dizeregas_blog/archive/2014/05/07/connected-sharepoint-app-part.aspx

How to Create our Radar Listener Solution

Create Event Listener Site Radata Script File

This Script will add a Listener in the SharePoint site to load the content sent by the Client App Part.

PS: this is a simple example for more complex apps recomend to add some type of id to be more easy to indentify and complex format of Data

function processFrameEvent(message) {

    if (!message.data) {

        return;

    }

    var res = message.data.split(";");

    if (res.length == 2){
  if (res[0].indexOf("Option")> -1)
  {
  $(document).ready(function () {
   SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadRibbon(res[0], res[1]));
  });
  }
 }

};

//Add addEventListener for the App Part

if (typeof window.addEventListener != 'undefined') {

    window.addEventListener('message', processFrameEvent, false);

}

function LoadRibbon(Tab, message) {
    SP.SOD.executeOrDelayUntilScriptLoaded(function () {
        try {
            var pm = SP.Ribbon.PageManager.get_instance();
            pm.add_ribbonInited(function () {
                ribbonTab(Tab, message);
            });
            var ribbon = null;
            try {
                ribbon = pm.get_ribbon();
            }
            catch (e) { }
            if (!ribbon) {
                if (typeof (_ribbonStartInit) == "function")
                    _ribbonStartInit(_ribbon.initialTabId, false, null);
            }
            else {
                ribbonTab(Tab, message);
            }
        } catch (e)
        { }
    }, "sp.ribbon.js");
}
 
function ribbonTab(Tab, message) {
    var Ribbonhtml = "";
    Ribbonhtml += "<div><div><a href='#' onclick=\"alert('" + message + "')\" ><img src='/_layouts/images/NoteBoard_32x32.png' /></a><br/>Ribbon Example</div></div>";
 
    var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
    if (ribbon) {
        var tab = new CUI.Tab(ribbon, 'GlobalRibbon.Tab', Tab, 'Option', 'GlobalRibbon.Tab.Command', false, '', null);
        ribbon.addChildAtIndex(tab, 1);
        var group = new CUI.Group(ribbon, 'GlobalRibbon.Tab.Group', 'Custom Ribbon', 'Global Ribbon Example', 'GlobalRibbon.Group.Command', null);
        tab.addChild(group);
    }
    SelectRibbonTab('GlobalRibbon.Tab', false);
    $("span:contains('Custom Ribbon')").prev("span").html(Ribbonhtml);
    SelectRibbonTab('Ribbon.Read', true);
}

Add Javascript to Site Assets Library 

After the Javascript file is created recommend add in the Site Assets document Library.
This file will be used when the Custom Actions Scriptlink is created to be available in SharePoint Site.

Add Scriptlink reference to SiteRadar.js

After the file is created, you need to reference the Javascript File to the SharePoint site, you can make that using a Scriptlink Custom Action, the tool "Ribbon Manager App" can support you in this task. 

After you save the Custom action you will be able to see the custom actions in the View of the Ribbon Manager App. 

If you like to use Visual Studio and Declarative code you can use the option "Generate Declarative XML" to create the XML for your SharePoint Feature as shown.

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  <CustomAction Id="Site Radar" Title="Site Radar" Description="" Location="ScriptLink"ScriptSrc="~Site/SiteAssets/SiteRadata.js" Sequence="2" > </CustomAction>

</Elements>

You can use Internet Explorer Developer tools to validate if the file was included in the SharePoint Site.




Create AddRibbonListnerRadar app solution using Visual Studio

After the SiteRadar.js file is reference in the SharePoint Site, you can create a SharePoint App Solution and include 2 ClientWebPart to send content from the SharePoint Web to SharePoint Hosted from Iframes to customize the Ribbons.

Client App Part

Create 2 new Client Web Part using Visual Studio "Add Item> Client WebPart"

Add the following Javascript code in ClientWebpart1.aspx:

window.parent.postMessage('Option1;Option Select App Part1', document.referrer);

Add the following Javascript code in ClientWebpart2.aspx:
window.parent.postMessage('Option2;Option Select App Part2', document.referrer);

Client App Part web Part Schema Sctructure

Reduce the size of the Apps to minmal, change the default height and width to "0" by default the App has 200x300 and we dont want to show the app.

Deploy the App Solution to your SharePoint Site 

After the Schema is change, you are ready to deploy your sharePoint App solution to your SharePoint Site using the Right Click Solution "AddRibbonListnerRadar > Deploy" and deploy to SharePoint Site.

When you access to "Site Contents" in the SharePoint Site, you are are able to see the new App instaled in the SharePoint Hosted Site.

Deploy App Part in SharePoint Page
Access to SharePoint Page where you want to add the App Part with Custom Ribbon Customization and edit the Page to add the App Part


The App Part will be included in the page as hidden +/- because we define the site as 0 width and Heigth.

Do the same action and include "ClientWebPart1 Title" (eg: Page 1) and "ClientWebPart2 Title" (eg: Page 2) and the image bellow show the final result with 2 different Contents in the Ribbon.

 

Done, very easy to comunicate between SharePoint Host Site and SharePoint App Parts and this shouldn't be a reason to don't create App for SharePoint Sites.

Hope you like the article, 
Kind regards, 

André Lage

SharePoint App Processlynx Custom Action and Ribbon Manager Launch

Some days ago my blog reached 200.000 viewers after long time, i know i know it's not that much and is far from the millions of viewers from other SharePoint Sites, but to celebrate this little achivement want to communicate the launch of the SharePoint App (Processlynx Custom Action and Ribbon Manager).

This app made by Processlynx AG (Swiss company based in Basel) by their Collaboration team. This process started wit feedback/requests from Site Administrators asking to provide more flexibility for the customization of the Ribbons and SharePoint Site Menus actions to better response end users in few minutes. 

There was also the need to dont break Company Policies like "No SharePoint Designer, Branding considerations, no changing of Masterpages, etc"  and no requests for Farm solutions and deployments, this could take ages and most probably will not be approved by IT Administrators. 

Forget Sandbox Solutions, most of big Corporations don't allow or require a lot of validation and Microsoft recommends to evaluate all possible changes and impacts when deployed.

Update:

If you want to use the Demo Version in Office Store you can access the following link:

Processlynx Custom Action And Ribbon Manager Demo

New features released for app Processlynx Custom Action and Ribbon Manager:

http://aaclage.blogspot.ch/2014/09/new-features-released-for-app.html

To support the Site Administrators we came with the Processlynx Custom Action and Ribbon Manager App to provide a extended Out of the Box funcionality to Site administrators, normaly manage by SharePoint Consultants and Developers for Custom Actios, Ribbons and Scripts.

Why this solutions was created

•      The Processlynx Custom Action and Ribbon Manager was created to help Site Administrators manage Custom Actions, Ribbons Customization and Scripts in their SharePoint Sites. 

•      The App uses a user friendly interface that reduces in minutes the task of Customization the SharePoint Site.

–     This App could avoid installations of Solution in the Farm.

–     This App uses SharePoint Client Side Code to reproduce some operations like in Server Side code.

•      The granularity of the functionality is SharePoint Sub Site to response each business requirements.

Challenge

• Today developers create Custom Actions/Ribbons/Scripts in complex XML structures that can take hours to make and deploy.
•  The App Customization don’t change Files such us (Masterpages/Pages) to better support Company Policies.
• This App solution is SharePoint-Hosted Base to dont have external access to response security concerm.

Functionalities

Custom Actions

•       Customize the SharePoint Site creating new Custom Actions,

Custom Ribbons

•       Customize the SharePoint Site using Custom Ribbons, Add/remove icons or ribbons,

•       User friendly design to easly create the Actions.

Scripts

•       Manage Custom Scripts to customize SharePoint Sites and quickly respond to business requirements.

Custom Design

•       Define the site footer, provide corporate productivity functions in Sharepoint Ribbon.

Here some example os custom Design supported by Scriptlinks using the Processlynx App

Reclycling Bin

•      The App has a Recycle Bin to delete and restore User Custom Actions from Site Administrators

•      The Reclycle Bin can be stored in the SharePoint Site or App Site.

Logs

•      The Apps stores errors from the SharePoint App

Keep the Look and feel

The SharePoint App uses the same Styles from the SharePoint Site to keep the integrity.

Questions:

This apps will be in the Microsoft Store?

- No, there is no plans to include the full App in the Office because of "Validation policies for the apps submitted to the Office Store". This app uses full-control permission in the Web Site. There are under evaluation two possible App's for Microsoft Store (a Free Version of the App to include some Custom actions in App Site as demo) and a Paid App (to include Custom Actions/Ribbons).

Updated:

The Free version of the Processlynx Custom Action and Ribbon Manager can be accessed here:

Free version of SharePoint App Custom Action & Ribbon Manager available in Office Store

Who can I talk to or contact for more information about this App?

- If you want a presentation/demo of the App Solution please contact our Marketing Department appsupport@processlynx.ch.

There are videos about the app and what can be done?

- The Site is under construction but more material will appear, but there are examples/tutorials videos on how we can work with the Processlynx App:

Youtube Videos:

• Videos Link

Presentation Powerpoint

Link example:

How to use ProgId in SharePoint Custom Actions

Examples of Ribbons Customization in SharePoint 2013

Tutorial Videos

Plx ScriptLink:

The following example show how we can use the App to associate Scripts from Librariesadd deploy in the SharePoint Site. 

PlxScriptLink

Plx Custom Ribbon:

The following example show how we can create a simple Ribbon using the App and associate to Document Libraries.

The Ribbons uses the same options that is defined in the XML structure when we used in a declarative way.

PlxCustomRibbon

Plx Look and Feel:

The following example shows how the app was made to assume the same Look and feel from the SharePoint Site, in the design was used the same styles to maintain integrity of the SharePoint Site with the App.

PlxLookandFeel

Plx Recycle Bin:

The following example show how we can configure the Recycle Bin in the App and define the location of the Recycle Bin.

There is 2 possible locations: Host Site (SharePoint Site) or App Site (App Solution Site)

PlxRecyclebin

Plx Override Control:

The following example show how we can manage and override existing Ribbon Controls in the SharePoint like "Hide Explorer Viewer" using pre-defined Ribbons Values.

PlxOverrideControl

Plx Custom Actions:

The following example show how we can use the App to create new Menu/Item Menu/Site Settings Custom options in the SharePoint Site that could help adding new funcionalities to better support end users.

PlxRibbonCustomActions

Plx Complex Ribbons:

The following example show how we can use the App to create complex Ribbon Actions such us, Group Template, add Group Template to existing Lists, override existing Ribbon Option with new funcionalities and Hide existing Ribbons Controls and disable Ribbons Options by code.

PlxRibbonComplexRibbon

Plx Ribbon Image:

The following example show how we can use the App to add Out of the Box Images or Custom Images from Libraries and select the Image area to be associated with the Ribbon Button Control.

PlxRibbonImage

Plx Ribbon Content Type:

The following example show how we can use the App to add a Ribbon Control to be associated to a specific List/Library content type.

PlxRibbon Content Type

Plx Ribbon Flyout Anchor:

The following example show how we can use the App to add a Ribbon Control with Flyout Anchor and include in a Document Library.

PlxRibbonFlyoutAnchor

With a week of work we were able to create this App and create a Business Model base in a request from Site Collections, this is approach we can have with the SharePoint App Model.

PS:The processlynx Site is under construction new material will come in the following time.
For more information please contact appsupport@processlynx.ch"All code is protected by Copyright".

More Videos with examples will come, hope you enjoy this article. 

Kind regards, 
André Lage