Use SharePoint Context Menu in Pure Web Application
-
Include required styles and JavaScript files
<script src="http://catorontdv71/_layouts/1033/owsbrows.js"></script>
<script src="http://catorontdv71/_layouts/1033/ows.js"></script>
<script language='javascript' src='http://catorontdv71/_layouts/1033/ie55up.js'></script>
<script src="http://catorontdv71/_layouts/1033/Menu.js" type="text/JavaScript" language="JavaScript"></script>
<script type="text/JavaScript" language="JavaScript">
<!--
var L_Menu_BaseUrl="http://catorontdv71";
var L_Menu_LCID="1033";
var L_Menu_SiteTheme="";
//-->
</script>
<script>
if (browseris.mac && !browseris.ie5up) {
var ms_maccssfpfixup = "http://catorontdv71/_layouts/1033/styles/owsmac.css";
document.write("<link rel='stylesheet' Type='text/css' href='" + ms_maccssfpfixup + "'>");
}
</script>
<script src="http://catorontdv71/YourApp/JavaScript/YourCustomizedJavascriptfile.js"></script>
<link rel="stylesheet" type="text/css" href="http://catorontdv71/_layouts/1033/styles/ows.css">
<link rel="stylesheet" type="text/css" href="http://catorontdv71/_layouts/1033/styles/menu.css">
<link rel="stylesheet" type="text/css" href="http://catorontdv71/_layouts/1033/styles/sps.css">
<style type="text/css">
.ms-SrvMenuUI { behavior:url("http://catorontdv71/_layouts/1033/Menu.htc"); }
</style>
<style>
v:* { behavior: url(#default#VML) }
o:* { behavior: url(#default#VML) }
.shape { behavior: url(#default#VML) }
</style>
-
Create your list of items like following sample code: Here, the most important attributes are CTXName and ItemId. You need to create your own context object. This context object will be passed to your customized JavaScript function (see step 3). The ItemId will be assigned to currentItemID global variable, so you can refer it in your custom JavaScript function.
<table ID="Table1">
<tr>
<td class="ms-vb2" height="22">
<table height="100%" cellspacing="0" class="ms-unselectedtitle" onmouseover="OnItem(this);" MsoPnlId="data" CTXName="ctx10001" ItemId="20199" ID="Table2">
<tr>
<td width="100%" class="ms-vb">
<a onfocus="OnLink(this);" onclick="GoToLink(this);return false;" target="_self" href="/clients/FavClientProfile.aspx?ID=20199">ALBERTA NEWSPRINT COMPANY</a>
</td>
<td>
<img src="images/blank.gif" width="13" style="visibility: hidden" alt="">
</td>
</tr>
</table>
</td>
<td class="ms-vb2" height="22">NTT</td>
<td class="ms-vb2" height="22">CIPS</td>
<td class="ms-vb2" height="22">Forest, Paper & Packaging</td>
<td class="ms-vb2" height="22">Edmonton</td>
</tr>
</table>
-
Create your own JavaScript code and inside it create a function called Custom_AddDocLibMenuItems(m, ctx);
var BASETYPE_PWCCLIENTLIST = 10001;
var BASETYPE_PWCCONTACTLIST = 10002;
var LISTTEMPLATE_PWCMYCLIENT = 10001;
var LISTTEMPLATE_PWCMYENGAGEMENT = 10300;
var CLIENTSTAB = "/Clients/";
var CLIENTSEDITFOLDER = "/Clients/";
var SPSSERVERBASEURL = "http://" + location.hostname;
//For Clients Tab - My List Webpart
ctx = new ContextInfo();
ctx.listBaseType = BASETYPE_PWCCLIENTLIST;
ctx.listTemplate = LISTTEMPLATE_PWCMYCLIENT;
ctx.HttpPath = SPSSERVERBASEURL + CLIENTSTAB;
ctx.HttpRoot = SPSSERVERBASEURL + CLIENTSTAB;
ctx.imagesPath = "/_layouts/images/";
ctx.PortalUrl = "/";
if (ctx.PortalUrl == "") ctx.PortalUrl = null;
ctx.ctxId = 10001;
ctx10001 = ctx;
function Custom_AddDocLibMenuItems(m, ctx)
{
//Available Options: View, Remove from My List
if (ctx.listBaseType == BASETYPE_PWCCLIENTLIST &&
ctx.listTemplate == LISTTEMPLATE_PWCMYCLIENT) // My List
{
strDisplayText = "View Company";
strAction = "STSNavigate('" + SPSSERVERBASEURL
+ CLIENTSTAB + "FavClientProfile.aspx?ID=" + currentItemID
+ "')";
strImagePath = "";
CAMOpt(m, strDisplayText, strAction, strImagePath);
strDisplayText = "Remove from My List";
strAction = "STSNavigate('" + SPSSERVERBASEURL
+ "/_layouts" + CLIENTSEDITFOLDER + "RemoveFavorite.aspx?ID=" + currentItemID
+ "')";
strImagePath = "";
CAMOpt(m, strDisplayText, strAction, strImagePath);
}
}
-
Screen shot for the result.
Comments