Get SharePoint Apps for current web using JavaScript CSOM (Office 365)

We have a requirement for a right hand pane set-of-links, which is essentially a set of shortcuts to the “APPS” that are within the SITE CONTENTS page.   This will be shown on the home page of a SharePoint SPWeb, in a short list, rather than the user viewing all the big tiles, etc.

The basic steps are :

  • Get the current SPContext for the web
  • Get the AppTiles for the current web
  • Cycle through, and get the TITLE and TARGET (URL) for each tile
  • Inject the HTML in using jQuery

I simply saved this as a file called “allApps.htm” and then added a Content Editor WebPart.   There are only a few lines of HTML – just a placeholder :

image

And then, there’s a stack of JavaScript – yay !

image

Here’s what it looks like when displayed in the CEWP, inside a Page – needs some CSS magic – but it works !

image

And – if you want to use the above technique – here’s the code :

var ctxCurrent;
var ctxWeb;

//get the SharePoint context
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', loadContext);

function loadContext() {
    ctxCurrent = new SP.ClientContext.get_current();
    ctxWeb = ctxCurrent.get_web();
    loadAppTiles();
}

function loadAppTiles() {
    //get the appTiles
    var appTiles = ctxWeb.get_appTiles();
    ctxCurrent.load(appTiles);

    //go through them all - and find the app for 'class workspace provisioning';
    ctxCurrent.executeQueryAsync(
        function onQuerySucceeded(sender, args) {
            if (appTiles.get_count() > 0) {
                //go through the appTiles - get the TITLE and TARGET - and jQuery them into the UL
                for (var i = 0; i < appTiles.get_count() ; i++) {
                    //get the tile at the "i" number
                    appTile = appTiles.getItemAtIndex(i);

                    //grab the title and url
                    appTitle = appTile.get_title();
                    appUrl = appTile.get_target();

                    //append to the UL - using jQuery
                    var newLi = "<li><a href='" + appUrl + "' >" + appTitle + "</a></li>";
                    $jq('#currentApps ul').append(newLi);
                }
            }
        },
        function onQueryFailed(sender, args) {
            console.error('getAppTile. Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }
    );
}

Let me know if this was helpful – cheers !

🙂

Advertisements

8 thoughts on “Get SharePoint Apps for current web using JavaScript CSOM (Office 365)

  1. Pingback: Office 365 Developer Podcast: Episode 051 on Office UI Fabric | nokipedia.com

  2. Pingback: Office 365 Developer Podcast: Episode 051 on Office UI Fabric | Triptoirvine69 Blog

  3. Pingback: Office 365 Developer Podcast: Episode 051 on Office UI Fabric • PC Portal

  4. Pingback: Office 365—monthly Dev Digest for July | nokipedia.com

  5. Pingback: Office 365—monthly Dev Digest for July | Triptoirvine69 Blog

  6. Pingback: Office 365—monthly Dev Digest for July • PC Portal

  7. Pingback: Office 365—monthly Dev Digest for July | Eli Shlomo Blog

  8. Pingback: Office 365 Developer Podcast: Episode 051 on Office UI Fabric | Eli Shlomo Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s