Custom context menu trong SharePoint

Căn Bản
Đầu tiên là tạo một custom context đã, nó là gì bạn có thể xem hình bên dứơi:


  Nếu muốn thêm thuộc tính trong Context menu thì làm sao ?

1. Add thêm webpart

2. Chọn Content Editor, lưu ý web part Content Editor phải nằm trước web part List, để chắc rằng script dc thực thi trước. xem thêm nguồn tham khảo bên dứơi:


3. View Source, copy đọan bên dưới:

function Custom_AddDocLibMenuItems(m, ctx)
{
var strDisplayText = “Navigate to Google”;
var strAction = “STSNavigate(‘http://www.google.com’)”;
var strImagePath = “”;
CAMOpt(m, strDisplayText, strAction, strImagePath);
CAMSep(m);
return false;
}

5. Kết quả


Chú ý:
1. “C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\" Hàm js sử dụng trong ví dụ trên nằm trong OWS.JS
2. Nếu là Document Library thì dùng hàm Custom_AddDocLibMenuItems, nếu là List thì dùng Custom_AddListMenuItems

Nguồn tham khảo: http://www.mstechblogs.com/shailaja/create-a-custom-context-menu-in-sharepoint-list-or-document-library/


Nâng cao
Nguồn đọc thêm: http://blogs.msdn.com/b/bowerm/archive/2004/07/07/175691.aspx
http://sharepointstudio.markstokes.com/2005/11/add-context-menu-send-document-link-by.html
http://stackoverflow.com/questions/745499/sharepoint-custom-context-menu-in-custom-list-appears-on-folders-and-not-just-fil 

Nên đọc thêm 3 link trên. coi thêm các file js của sharepoint OWS.JS, CORE.JS, IMGLIB.JS ở thư mục C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033.

Bây giờ ta giải thix 1 chút về các hàm đã sử dụng là Custom_AddDocLibMenuItems hay Custom_AddDocLibMenuItems.
function Custom_AddDocLibMenuItems(m, ctx)
tham số m chưa có giá trị ban đầu, nó chỉ có sau khi chạy hàm này
CAMOpt(m, strDisplayText, strAction, strImagePath);
giá trị trả về là chính nội dung strDisplayText trong thẻ span. muốn biết thì alert(m.innerHTML)

Coi thông tin biến ctx, từ view source ta thấy:

ctx = new ContextInfo();
ctx.listBaseType = 1;
ctx.listTemplate = 109;
ctx.listName = "{9370E172-8760-4303-AE31-E9426126B6ED}";
ctx.view = "{FE7A0018-7358-4B70-972D-5799B43F095C}";
ctx.listUrlDir = "\u002fnews\u002fLists\u002fPhotos";
ctx.HttpPath = "\u002fnews\u002f_vti_bin\u002fowssvr.dll?CS=65001";
ctx.HttpRoot = "http:\u002f\u002fnqnguyen\u002fnews";
ctx.imagesPath = "\u002f_layouts\u002fimages\u002f";
ctx.PortalUrl = "";
ctx.SendToLocationName = "";
ctx.SendToLocationUrl = "";
ctx.RecycleBinEnabled = -1;
ctx.OfficialFileName = "";
ctx.WriteSecurity = "1";
ctx.SiteTitle = "Tin T\u1ee9c";
ctx.ListTitle = "Photos";
if (ctx.PortalUrl == "") ctx.PortalUrl = null;
ctx.displayFormUrl = "\u002fnews\u002fLists\u002fPhotos\u002fForms\u002fDispForm.aspx";
ctx.editFormUrl = "\u002fnews\u002fLists\u002fPhotos\u002fForms\u002fEditForm.aspx";
ctx.isWebEditorPreview = 0;
ctx.ctxId = 1;
g_ViewIdToViewCounterMap[ "{FE7A0018-7358-4B70-972D-5799B43F095C}" ]= 1;
ctx.CurrentUserId = -1;

ví dụ site của tôi trong trường hợp trên. có lúc bạn sẽ cần chúng.

Ngòai ra trong source ta sẽ thấy đọan script sau:

Đọan script này dc lặp lại tương ứng với số lượng row trong list.
Để ý hàm InsertItem nó dc định nghĩa trong IMGLIB.JS:

function InsertItem(originalImageUrl, id, baseName, extension, imgWidthStr, imgHeightStr, titleStr, descriptionStr, objectType, iconUrl, fNewItem)
{
 if (originalImageUrl=="")
  return;
 items[id]=new CItem(originalImageUrl, id, baseName, extension, imgWidthStr, imgHeightStr, titleStr, descriptionStr, objectType, iconUrl, fNewItem);
 if (firstId==-1)  firstId=id;
 ids[ids.length]=id;
} 

Ở đây có hàm CItem sẽ add các thông số vào mảng items <- mọi thông tin của từng row trong list sẽ nằm trong mảng này --> ta đã có mọi thứ.
Vấn đề giờ sao lấy dc id ?
Quay lại giao diện, ta để ý mỗi nút nhấn sổ xuống context menu đều có hàm ClickRow kèm với tham số ID tương ứng với dòng dc click, hàm này cũng ở trong IMGLIB.JS

function ClickRow(id)
{
 if (!fImglibDefautlView) return;
 if (tbPreview==null)
  return;
 if (id < 0 || items[id]==null)
  return;
 if (browseris.ie)
  event.cancelBubble=true;
 HiLiteRow(id);
 ILShowMenu(id);
}

Coi hàm ILShowMenu , trong hàm này có dòng itemTable=menuTR.parentNode.parentNode;
trả về tòan bộ html tương ứng của cột có context menu của từng dòng dc click.
Trong đọan html này có thuộc tính id, ta chỉ cần get attribute về và cắt lấy chuỗi id vì nó dc ghép với "title"+id.

var txtID=itemTable.childNodes[0].childNodes[0].getAttribute("id");
var id=txtID.substr(5); 

Update 10/9/2010

Sau time tiếp tục nghiên cứu thấy: đọan script InsertItem chỉ có ở view có style là Picture Library Details , còn chỉnh sang
view có style khác như Basic Table thì sẽ ko lấy dc biến Items...-->đau đầu.
Khắc phục tạm thời: dùng js hoặc jquery để select trong source tìm giá trị phù hợp