Using SharePoint Chrome Control in APP model

I have been working on building an SharePoint Hosted app for some time now. App as we all know is running in a separate web called app web. The app web does not inherit from the host web for its Styling or user experience. often times we hear that user wants the same user experience as SharePoint. It is actually good for the developers if we could get the SharePoint user experience because it is one less thing that we have to worry about. Users are already familiar with SharePoint user experience and we do not have to train them to use our app.

Getting the Apps to inherit the SharePoint user experience is easier said than done. There is something called Chrome Control that Microsoft exposes in SharePoint. This is the top blue bar that we are now familiar with. The blue bar provides a simple but useful navigation back to the host site from the app site. How many time we have to create either custom navigation or JavaScript code to get this done.

In this pursuit I set out to create a reusable control that help me implement the chrome control that I can just include in my Apps and not worry about writing code.In the recent times I am more than in love with AngularJs. The reason being that Angular lets me write less code which is always better for the developer and the product. So in this blog let's see how we can create the angular based chrome control that we can use in our Apps. Without further ado lets see the code and how we construct it

I am using Office 365 Developer Site to do my development. The approach works and code works pretty much same for on-premise environment as well. The app I have here is SharePoint Hosted app. This works the same way for provider hosted app and auto hosted app as well.


Now create a DIV tag in the HTML file or the default aspx page

 <div data-ng-app="chromecontrol" data-ng-controller="chromecontrolController">
     <div id="chrome_ctrl_container"></div>
</div>

The highlighted div is the container for the chrome control and since I am using angularjs I am surrounding it with the data-ng-app and data-ng-controller attributes to bootstrap my chrome control

Next we will see how we wire the code up

Create a new JS file to define the angular app. I named the file as chromecontrolapp.js

var chromecontrol = angular.module('chromecontrol', []);

I am not passing any other argument to the app and I am just defining what my app will be called which I have specified in the HTML above with data-ng-app attribute.

Next we need to define our controller. For which add another file called

chromecontrolcontroller.js

Code in the controller block

var hostWebUrl, hostWebTitle, hostWebLogoUrl, options;

chromecontrol.controller('chromecontrolController', function ($scope) {

    // get the HostWeb URL, title & logo image
    hostWebUrl = decodeURIComponent($.getQueryStringValue("SPHostUrl"));
    hostWebTitle = decodeURIComponent($.getQueryStringValue("SPHostTitle"));
    hostWebLogoUrl = decodeURIComponent($.getQueryStringValue("SPHostLogoUrl"));

    // create chrome control settings
    options = {
        siteUrl: hostWebUrl,
        siteTitle: hostWebTitle,
        appIconUrl: hostWebLogoUrl,
        appTitle: "Stock Ticker",
        settingsLinks: [
          {
              linkUrl: "../Lists/Stock Symbol",
              displayName: "LIST: Stock Symbol"
          }         
        ]
    };

    // create the chrome control
    var nav = new SP.UI.Controls.Navigation("chrome_ctrl_container", options);

    // show chrome control
    nav.setVisible(true);

    // hide top app chrome (image & app name)
    nav.setBottomHeaderVisible(false);

});

 In the controller block I am defining a global variable  for hostwebURL, hostWebTitle, hostWebLogoUrl, options.

variable options is used to define the items that will be shown when the gear icon is clicked. 

 I do not want to show my site icon and app title hence I am setting the bottomheader to be invisible using the  command

nav.setBottomHeaderVisible(false); 
 One more thing to remember to set in the app is

SPHostTitle={HostTitle}

This needs to be set in the App Manifest so that we can get the Host web title. The standard token do not contain Host title and it only bring APP URL and Host Web URL

The entire source can be downloaded from the GITHub project. For further reference please refer to MSDN

Count Related Field

How many times we have cursed SharePoint for not able to get the item count natively without writing code or using workflow. There is an easier way which I stumbled up recently but may be some of you have already figured this out earlier. I wanted to document this so this can be useful for someone like me who is always interested in code.

Recently when I was working on a project where there is absolutely no server side code, pretty much everything was done at the client side. There was a need to get item count per category. This is simple on the list because we could just do a group by and we would know how many items in a particular category, but we wanted to use those number to draw chart. The group by numbers will not be useful and we cannot use char web part (yes I know chart part is gone in 2013 but this project is still in 2010).

How do we do this? We had a lists of categories in a list which is used as lookup for the categories column. We initially thought of writing a client side script that would count items and add it to a field. But this needs to be triggered every time a new item is added to the list. I was trying to create a new field and accidentally I chose lookup field and I noticed that there is a field called count related in the options when i chose the looked up list a source. When I created a field I could immediately see item count for all the items in the lookedup list. Form now on this becomes easy to use this chart part or anything you want even in code that would need to do count.

Figure shows how to create Count Related field

Create new List column Lookup

Item count corresponding to categories

Please leave your feedback in comments.

Get Site URL in Javascript

This post is more like a note of remembrance.I have been playing with Angular lately (I am not a expert just starting to explore). Thanks to my colleague Javed for his help. I was trying to create a web part to read information from the SharePoint site. I was faced with problem when trying to combine the CSOM with AngularJS. This could just be my poor Angular skills causing. But all i was trying to do was get the URL so I can do a GET using $http. I think the problem was in ExecuteQueryAsync.While trying to investigate I stumbled upon Nik Patel's article talking about getting site collection URL form.

Since we are using more and more javascript and client side development i think this would be a useful information to share.

_spPageContextInfo object is available by default in all SharePoint webpart pages and hence it becomes simple to get the URL as opposed to writing a lot of code to get a site collection URL. Though the returned URL is server relative we could easily form the full URL which can then be used in $http.get() in my case

here is how i used it

var url = window.location.protocol + "//" + window.location.host + _spPageContextInfo.siteServerRelativeUrl; 


// Form the full URL for $hhtp get
url = url + "_api/web/lists/GetByTitle('News')/items"

//Call Http Get
$http.get(url);