In SharePoint 2013,
Microsoft has Introduced a new Framework to Create CallOuts that is somewhat
similar to the Dialog Framework Introduced in SharePoint 2010.
The SharePoint
callout control provides a flexible way to engage user. When you do searches in
a SharePoint 2013 site, you’ll see examples of the callout control in action,
as it pops up whenever you hover over a search result.
Please find more
details from MSDN
As you know Callouts
are displayed OOB for following Lists & Libraries
- Document Library
- Assert Library
- Images Library
- Pages Library
- Task Lists
So, I extended this
to my custom page with a javascript.
Script:
<script
type="text/javascript">
//This functions
makes the request to the RESTful ListData service
function
getListItems(sende,callback, OrderNumber, Element) {
var Url = "http://servername/_vti_bin/ListData.svc/ElementsHelp()?$filter=OrderNumber
//Create a WebRequest object
var request = new Sys.Net.WebRequest();
//Specify the verb
request.set_httpVerb("GET");
//Use the URL we already formulated
request.set_url(Url);
//Set the Accept header to ensure we get a
JSON response
request.get_headers()["Accept"] =
"application/json";
//Add a callback function that will execute
when the request is completed
request.add_completed(callback);
//Run the web requests
request.invoke();
}
function
onCompletedCallback(response, eventArgs) {
//Parse the JSON reponse into a set of
objects by using the JavaScript eval() function
var shelptext = eval("(" +
response.get_responseData() + ")");
//Display some properties
_elementhelpTitle =
shelptext.d.results[0].Title;
_elementhelpID =
shelptext.d.results[0].OrderNumber;
_elementhelpBody =
shelptext.d.results[0].HelpText;
var launchPoint =
document.getElementById("Element"+_elementhelpID);
var listCallout =
CalloutManager.createNew({
launchPoint: launchPoint,
beakOrientation: "topBottom",
contentWidth: 610,
ID: _elementhelpID,
title: _elementhelpTitle,
content: "<div class=\"ms-soften\" style=\"margin-top:4px;\">"
+ "<hr/></div>"
+ "<div class=\"callout-section\" style=\"margin-top:10px;\">" + _elementhelpBody + "
", }); + "<hr/></div>"
+ "<div class=\"callout-section\" style=\"margin-top:10px;\">" + _elementhelpBody + "
listCallout.open();
}
SP.SOD.executeFunc("callout.js",
"Callout", function () {
});
</script>
Elements Help List:
Usage on page:
< a
href="Javascript:getListItems(this, onCompletedCallback, '1', 'Element
1');" id="1">Systems are in place for reporting, investigating, analyzing, communicating and documenting all incidents (including significant near-misses). Analysis is conducted using statistically valid methods </a>
End Results:
