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


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.

8 comments:

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

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

      Delete
  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?

    ReplyDelete
    Replies
    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 http://yadi.sk/d/_s01YcJoKuEPX

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

      Delete