Thursday, April 25, 2013

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


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:

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);

        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: 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.


  1. Can you please post example or new post for Application page and popup page? That will be really helpful.

    I am facing issue for callout in application page which is opened as dialog window(sp.ui.dialog.js).

    1. Hi! Can you provide more details on your problem and how to reproduce it?

  2. Hello Alex
    When adding the reference to the CSS file, the HostUrl is translated correctly in my case.
    Whe I have a look with the F12 tools I see the HostUrl is ok for the js files but for the css it stays href="<%=HostWebUrl %>/_layouts/15/1033/styles/Themable/corev15.css" as output. Also in VS HostWebUrl is not indicated as string Default.HostWebUrl as it does correctly for the js references...
    Any Ideas?

    1. Hi! I've done a little research on this subject and can confirm it. It seems to be some strange behavior if not the bug. All I can offer in this case is some kind of workaround - you can render the link in any other way. I've made a working example for you with the asp literal control for rendering the link. Download it at

    2. Thanks Alex! This works out great!
      (Also congrats with the other posts about callouts they are really helpful)

  3. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. fake documents

  4. Jammin' Jars Casino Launches at Virgin Casino - JTHub
    Jammin Jars Casino 광주 출장샵 is delighted to 포항 출장샵 announce the 사천 출장마사지 launch of a 여수 출장샵 brand-new slot and live casino game from Virgin Casino. Launching at 아산 출장마사지 Virgin

  5. Once you’ve chosen your preferred recreation and set 크랩스 clear limits on the amount you stand to win or lose, you’ll be able to|be succesful of|have the flexibility to} provide you with a technique that maximizes your chances of coming out ahead. The present research examined the mechanisms of initiating on-line playing amongst young adults. Of specific interest was whether social on line casino gaming was famous as half of} young adults’ experience with on-line ... Over the previous two years, over 245 clinicians have been educated to offer playing disorder remedy providers in Illinois. This 12 months, SUPR will present month-to-month webinars targeted on playing disorder, a two-day Summit on Problem Gambling, as well as|in addition to} supply new alternatives for participation within the 30-hour Gambling Counselor Training.

  6. If the total it's a tie and gamers' stakes are returned. The player to the best of the croupier is entitled to be the primary banker, after which the best to be banker rotates counter-clockwise across the desk. A banker is entitled to maintain the financial institution lengthy as|as lengthy as} she or he wins or ties the coup. When the banker loses a coup, the best 1xbet korean to be banker is offered to the subsequent player in rotation.