Monday, March 25, 2013

SharePoint 2013- call outs , Creating custom callouts

Callout pop up is one more UI change in SharePoint 2013. Metro UI was introduced in share point 2013 and one of the new concept is Callouts. This is very light weight Ui that shows item, user information and shows actions.

here is the images shows some of the Callouts in SharePoint 2013.
For a document Library,



Task list,




Structure:
In the Callout structure, 

Title: Title area of the Callout 

Content: Content Area to show content.

Close: Close button, that to close the popup. we can close callout by using close button, clicking on out side the Callout and pressing escape button.

Beak: Way to show the callout. Here we have two options, Top to Bottom, Left to Right. Means when we click/hover on the link the way that callouts shows.  Callouts can show Top to Bottom, Left to right.

SharePoint 2013 - Callouts:
In SharePoint 2013, we have special JS files to run callouts. Callout.js, is the main JavaScript file for callouts in share point 2013. All the java script files will be located under 15/layouts folder.Here is image shows the values in debugging mode.



How to create: 
Create an Html element as launch point for the callout. This is the source (click/hover) for calling callout popups. 

<div id="calloutLaunchPoint">callout Launch Point</div>

Configure the options for callout. Choose the HTML element for callout and configure the options for callout. To Specify the configuration option we need to call CalloutOptions class.

<script type="text/javascript">
var calloutOptions = new CalloutOptions(); 
calloutOptions.ID = 'calloutID'; 
calloutOptions.launchPoint = calloutLaunchPoint; 
calloutOptions.beakOrientation = 'leftRight'; 
calloutOptions.content = 'content'; 
calloutOptions.title = 'title'; 
var callout = CalloutManager.createNew(calloutOptions);
</script>

here is the simple code to create a custom callout. Copy the code and paste the code in page.

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(CallOut, "callout.js");
function CallOut()
{
var targetElement = document.getElementById('calloutLaunchPoint');
var calloutOptions = new CalloutOptions();
calloutOptions.ID = 'notificationcallout';
calloutOptions.launchPoint = targetElement;
calloutOptions.beakOrientation = 'topbottom';
calloutOptions.content = 'content';
calloutOptions.title = 'title';
var callout = CalloutManager.createNew(calloutOptions);
}
</script>
<div id="calloutLaunchPoint">callout Launch Point</div>

Code must be placed in Embedded





Here is the image that shows the callout.



CallOut Actions:

Actions options configured Through CallOutActionOptions object
In Actions we have options below, 

Text: Required Option.

OnClickCallBack: Is a function that handles the action click event. If we don't want any menu options, this is required. it has two parameters, slandered HTML DOM and 
action

Here is the code for launch Action item in Callouts.

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(CreateCallOutPopup, "callout.js");
function CreateCallOutPopup()
{
var targetElement = document.getElementById('LaunchCallout');
var calloutOptions = new CalloutOptions();
calloutOptions.ID = 'notificationcallout';
calloutOptions.launchPoint = targetElement;
calloutOptions.beakOrientation = 'leftRight';
calloutOptions.content = 'content';
calloutOptions.title = 'title';
var displayedPopup = CalloutManager.createNew(calloutOptions);
var customAction = new CalloutActionOptions();
customAction.text = 'Action 1';
customAction.onClickCallback = function(event, action)
{
alert("This is JavasCript alert on Custom Action");
};
var _newCustomAction = new CalloutAction(customAction);
displayedPopup.addAction(_newCustomAction);
}
</script>
<div id="LaunchCallout">Launch Callout</div>

[Code must be in Embedded as explained above.]

it will show the image as







I'll show drop down option in callouts in my next post.

Share this

7 Responses to "SharePoint 2013- call outs , Creating custom callouts"

  1. Hi Suresh, could you please kindly answer what exactly all js reference should I use for using callout? I know only few of them like callout.js,MicrosoftAjax.js and core.js. er

    ReplyDelete
  2. Hi Shakizat, There is a speacial frame work to create and run sharepoint callouts. All the Js files regarding call outs will be located in 15\Layouts in file system. Callouts.js is the main js file t run the call outs and callout.debug.js, CalloutUsageControlScript.debug.js, CalloutUsageControlScript.js are some other JS files related to callouts in sharepoint 2013.

    ReplyDelete
  3. Hi Suresh,

    I would like to create a callout(from code behind) for an info button in a custom application page. Could you please help me on this ASAP

    ReplyDelete
  4. Hi Suresh,

    I tried to copy and paste your code into my site, but the callout does not appear on my SharePoint site. Is there anything (...site feature) specific that we have to enable?

    ReplyDelete
  5. Nice and helpful. have you any idea of wiki page follow option.

    ReplyDelete
  6. Excellent and very cool idea and the subject at the top of magnificence and I am happy to this post..Interesting post! Thanks for writing it.What's wrong with this kind of post exactly? It follows your previous guideline for post length as well as clarity.
    Cloud Computing Training in Chennai

    ReplyDelete
  7. This is a great article, I have been always to read something with specific tips! I will have to work on the time for scheduling my learning.
    Selenium Training in Chennai

    ReplyDelete