Custom Callouts in the SharePoint 2013 Metro UI, Part 4: How to use callouts in autohosted app

Previous: Custom Callouts in the SharePoint 2013 Metro UI, Part 3: CalloutManager 
Next: Custom Callouts in the SharePoint 2013 Metro UI, Part 5: Modification of the Document Library Item Callout Content
Back to contents.

---

The autohosted application in SharePoint 2013 requires some configuration for using the calouts framework inside the app frame:
1. You need to reference a bunch of javascript files from the hosting portal supporting callouts framework.
2. You need to reference core CSS styles from the hosting portal because they are defining some important properties of the callout markup.

How to Reference the Required Javascript files

Microsoft.Ajax.js

The most base JS file you need to reference is Microsoft.Ajax.js. You don't need a link to this file because the easiest way to render it is to use the ScriptManager control - it renders the content of this file from the embedded resource:

<asp:ScriptManager runat="server"></asp:ScriptManager>

If your app is not written in ASP.NET you can use a CDN version of this file: https://ajax.aspnetcdn.com/ajax/4.5/6/MicrosoftAjax.debug.js

How to get the hosting portal url

In order to reference the callout framework JS files from the hosting portal you need to obtain the portal url. Your app receives it in the "SPHostUrl" parameter in its own url. In ASP.NET it's convenient to save it to the public page property and to reference it from the page markup. Here I save it to the HostWebUrl property:

public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // The following code gets the client context and Title property by using TokenHelper.
            // To access other properties, you may need to request permissions on the host web.

            var contextToken = TokenHelper.GetContextTokenFromRequest(Page.Request);
            var hostWeb = Page.Request["SPHostUrl"];
            HostWebUrl = hostWeb;

            using (var clientContext = TokenHelper.GetClientContextWithContextToken(hostWeb, contextToken, Request.Url.Authority))
            {
                clientContext.Load(clientContext.Web, web => web.Title);
                clientContext.ExecuteQuery();
                Response.Write(clientContext.Web.Title);
            }
        }

        public string HostWebUrl { get; set; }
    }

The required JS files

Now we can easy reference the required files. I've used the debug versions of these files - of course you can use the release (without .debug suffix). Please note that the order of links is important because some of these files depends on another. There are some localized versions of scripts here- you should use the locale of your hosting portal (in my case it is the English one - 1033):

        <script type="text/javascript" src="<%=HostWebUrl %>/_layouts/15/1033/initstrings.debug.js"></script>
        <script type="text/javascript" src="<%=HostWebUrl %>/_layouts/15/1033/strings.js"></script>
        <script type="text/javascript" src="<%=HostWebUrl %>/_layouts/15/init.debug.js"></script>
        <script type="text/javascript" src="<%=HostWebUrl %>/_layouts/15/core.debug.js"></script>
        <script type="text/javascript" src="<%=HostWebUrl %>/_layouts/15/mquery.debug.js"></script>
        <script type="text/javascript" src="<%=HostWebUrl %>/_layouts/15/callout.debug.js"></script>

How to Reference the Required CSS

The required styles defined in the corev15.css. We can reference it in that way:

<link href="<%=HostWebUrl %>/_layouts/15/1033/styles/Themable/corev15.css" rel="stylesheet" type="text/css"/>

The complete ASP.Net Example

That's all! Here you can find the complete working ASP.Net example: http://yadi.sk/d/QmnPu_Qh4Ka4c. Here's the result page:

---

Previous: Custom Callouts in the SharePoint 2013 Metro UI, Part 3: CalloutManager 
Next: Custom Callouts in the SharePoint 2013 Metro UI, Part 5: Modification of the Document 
Back to contents.