Callouts in SharePoint 2013 Preview

By Anatoly Mironov

While ModalDialog is not default for editing list items in SharePoint 2013 Preview, there is a new “popup” element in SharePoint - callout or popover. I would like to recommend these two blogs when you want discover more: Andrey Markeev: Callouts (popovers) в SharePoint 2013 Preview (in Russian) Alex Boev: a three part series: 1. Custom Callouts in the SharePoint 2013 Metro UI: Part 1: Basics 2. Custom Callouts in the SharePoint 2013 Metro UI, Part 2: Actions 3. Custom Callouts in the SharePoint 2013 Metro UI, Part 3: CalloutManager To get introduced with callouts in SharePoint 2013, you can run this code (from Andrey Markeev’s blog):

myCustomCallout = calloutManager.createNewIfNecessary({
    ID: 'myCallout1',
    title: 'Hello world!',
    content: 'Please, click [here](http://google.com).',
    launchPoint: $get('ctl00\_DeltaPlaceHolderPageTitleInTitleArea')
});
myCustomCallout.open();

Which will result in: Custom Callouts in SharePoint 2013 Preview (from Andrey Markeev’s blog)

Comments from Wordpress.com

Anatoly Mironov - Feb 4, 2013

Hi! When something is undefined like m$, then the callout.js has not been loaded correctly, or some parameter is missing. Post some code example in a comment and I’ll see if I can help you. Cheers.

Raj - Feb 3, 2013

Hi, i am not able to see the callout box. getting this error in browser console.. ’m$’ is undefined callout.js, line 1 character 24301, Can You help me out in fixing this. Thank You Raj

Anatoly Mironov - Mar 1, 2013

Thank you Suresh!

Suresh Pydi - Mar 1, 2013

Very nice article. Iam impressed with your article and wrote my understandings here http://sureshpydi.blogspot.in/2013/03/sharepoint-2013-call-outs-creating.html

Ritesh - Apr 3, 2013

Hi, I read your article but when I tried to implement it in my environment in App Part it is giving me error. “‘IsElementRtl’ is undefined” can you help me in fixing this. Thanks, Ritesh

Anatoly Mironov - Apr 3, 2013

Hi, Ritesh! I haven’t tested it in an App Part. I suppose, some js references are not loaded. Try to figure out what references are missing. You can even ask a question in SharePoint Stackexchange where many experts can give a good answer.

Ritesh - Apr 3, 2013

Thanks Anatoly for Reply, I have used following JS references in my app part. I have already posted this issue in Microsoft Technet and I will also post same in Stack Exchange. Thanks, Ritesh

Ritesh - Apr 3, 2013

I have used following JS references.

<script type="text/javascript"src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"src="/_layouts/15/MicrosoftAjax.js"></script> <script type="text/javascript"src="/_layouts/15/init.js"></script> <script type="text/javascript"src="/_layouts/15/mQuery.js"></script> <script type="text/javascript"src="/_layouts/15/sp.ui.dialog.js"></script> <script type="text/javascript"src="/_layouts/15/sp.runtime.js"></script> <script type="text/javascript"src="/_layouts/15/sp.js"></script> <script type="text/javascript"src="/_layouts/15/callout.js"></script>

Thanks, Ritesh

Richard - Dec 0, 2013

Raj, make sure you have the following references in your HTML page:

Max - Apr 4, 2013

Is it possible to manage callouts opened on sharepoint list item? If I want to add a button on the system Callout of a list, can I?