SharePoint 中时间轴 Timeline的实现

359025439

　　客户需要在OA中实现每日动态功能，能够记录每一位员工的每天的工作动态，我很快想到了时间轴，因为时间轴能很直观的现实员工每一刻的动态。就像Facebook的Timeline效果（点击查看）。
　　尝试着搜索这个效果，园友的这篇博文正好给我启发，接下来就去实现吧。

成果演示
　　最终的效果如下所示：
　　点击每个员工的姓名，即可进入他当天的工作动态（只能看），若点击自己的名字（既能看又能发送/编辑/删除动态），如下所示：

　　动态的详细页，如下所示：

　　点击时间轴，即可新增动态，如下所示：

　　编辑效果，鼠标移至内容区域，现实黄色提醒，如下所示：

　　单击即可显示编辑界面，如下所示：

　　移开鼠标，即可自动保存。
　　当然如果想把一条当太删掉，点击右上角X即可。


实现原理
　　关于效果的实现原理可以参考这篇文章。
　　了解了上面提到的这篇文章之后（Masonry.js），接下来就是Sharepoint 客户端对象模型的实现了，比如Ecmascript。

• 根据登陆的用户点击的员工名字获取当天的动态，这儿需要利用CAML拼接出查询条件
  

function GetCurrentUser(){
//Get the current context
var context=new SP.ClientContext.get_current();
//Load the web object
var web=context.get_web();
//Get current user
this.currentUser=web.get_currentUser();
//load currentUser
    context.load(currentUser);
//Make a query call to execute the above statements
    context.executeQueryAsync(OnGetCurrentUserSuccess,OnGetCurrentUserFailed);
}
function OnGetCurrentUserSuccess(){
GetDailyWorks();
}
function OnGetCurrentUserFailed(sender,args){
console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
function GetDailyWorks(){
//Get the current context
var context=new SP.ClientContext.get_current();
//Load the web object
var web=context.get_web();
//Get the list
var list=web.get_lists().getByTitle(listNameForDailyWork);   
//Get items by caml in the specific list
var camlQuery=new SP.CamlQuery();
var d=new Date();
//Get specific field name
this.userNameWhenClickView=$("#currentUserHidden").val();
camlQuery.set_viewXml('<View><Query>'+
'<Where>'+
'<And>'+
'<And>'+
'<And>'+
'<Eq>'+
'<FieldRef Name=\'Title\'/>'+
'<Value Type=\'Text\'>'+userNameWhenClickView+'</Value>'+
'</Eq>'+
'<Eq>'+
'<FieldRef Name=\'CurrentYear\'/>'+
'<Value Type=\'Text\'>'+d.getFullYear()+'</Value>'+
'</Eq>'+
'</And>'+
'<Eq>'+
'<FieldRef Name=\'CurrentMonth\'/>'+
'<Value Type=\'Text\'>'+(d.getMonth()+1)+'</Value>'+
'</Eq>'+
'</And>'+
'<Eq>'+
'<FieldRef Name=\'CurrentDay\'/>'+
'<Value Type=\'Text\'>'+d.getDate()+'</Value>'+
'</Eq>'+
'</And>'+
'</Where>'+
'<OrderBy>'+
'<FieldRef Name=\'Created\' Ascending=\'True\'/>'+
'</OrderBy></Query></View>');
dailyWorks=list.getItems(camlQuery);
//Load the web in the context and retrieve only selected columns to improve perfomance
context.load(dailyWorks,'Include(ID,Title,DailyContent,Created)');
//Make a query call to execute the above statements
    context.executeQueryAsync(OnGetDailyWorksSuccess,OnGetDailyWorkFailed);
}
function OnGetDailyWorksSuccess(){
//Get the collection
var dailyWorksCollection=dailyWorks.getEnumerator();
//Iterate through daily works
while(dailyWorksCollection.moveNext()){
//Load the current daily work item in iterate
var workItem=dailyWorksCollection.get_current();
//Add work item to container
        
addWorkToContainer(workItem.get_item('ID'),workItem.get_item('Title'),workItem.get_item('DailyContent'),workItem.get_item("Created"));
}
//Items has added in container and execute AutoMasonry method
    AutoMasonry();
//Init in line edit if current user has permission to edit
if(userNameWhenClickView==currentUser.get_title()){
InitInlineEdit($('.editable, .editable-area'));
}
}
//Error Handler
function OnGetDailyWorkFailed(sender,args){
console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

• 当然Add一个Item也是比较方便的，当Add Item完毕后，很重要的一点是利用Masonry Reload一下所有的item
  

function AddNewDailyWorkItem(content){
//get the current context
var context=new SP.ClientContext.get_current();
//Load the web object
var web=context.get_web();
//Get the list
var list =web.get_lists().getByTitle(listNameForDailyWork);
//create the ListItemInfomational object
var listItemInfo=new SP.ListItemCreationInformation();
//add the item to the list
this.listItem=list.addItem(listItemInfo);
//get current user display name
var userDisplayName=currentUser.get_title();
//Assign values for fields
listItem.set_item('Title',userDisplayName);
listItem.set_item('DailyContent',content);
//Get current year ,month,day and assign values for fields
var newObj=new Date();
listItem.set_item('CurrentYear',newObj.getFullYear());
listItem.set_item('CurrentMonth',newObj.getMonth()+1);
listItem.set_item('CurrentDay',newObj.getDate());
//Apply changes to item
    listItem.update(listItem);
context.load(listItem);
//Make a query call to execute the above statements
    context.executeQueryAsync(AddDailyWorkItemSuccess,AddDailyWorkItemFailed);
}
function AddDailyWorkItemSuccess(sender,args){
var content = $("#update").val();   
$('<div class="item"><a href="#" itemId="'+listItem.get_id()+'" class="deletebox">X</a>' + '<div class="inner"><p itemId="'+listItem.get_id()+'" class="editable-area">' + content + '</p></div><p class="sendStyle">发送于'+(new Date()).getHours()+':'+((new Date()).getMinutes()<10?"0"+(new Date()).getMinutes():(new Date()).getMinutes())+'</p></div>').insertBefore("div#popup");
//reload masnory
$("#container").masonry("reload");
//Hiding existing arrows
$(".rightCorner").hide();
$(".leftCorner").hide();
//injecting fresh arrows
        Arrow_Points();
//clear popup text box value
$("#update").val("");
//popup hide
$("#popup").hide();
//Init in line edit
$('p[itemId='+listItem.get_id()+']');
InitInlineEdit($('p[itemId='+listItem.get_id()+']'));
}
function AddDailyWorkItemFailed(sender,args){
console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

• Update 和Add是相同的逻辑，记得最后Reload即可
  

function UpdateDailyWorkItem(itemId,updateContent){
//If no title is setted then show alert and set focus
/*if(updateContent==''){
$()
}*/
//Get the current context
var context = new SP.ClientContext.get_current();
//Load the web object
var web=context.get_web();
//Get the list
var list=web.get_lists().getByTitle(listNameForDailyWork);
//Get item to update by Id from the specific list
this.listItem=list.getItemById(itemId);
//Set the new property value
listItem.set_item('DailyContent',updateContent);
//Call the update method to commit the change
    listItem.update();
context.executeQueryAsync(updateWorkItemSuccess,updateWorkItemFailed);
}
function updateWorkItemSuccess(){
$editable
.removeClass('active-inline')
.children()
.replaceWith(edited);
if ($editable.hasClass('editable-area')) {
rapture($editable);   
}
//reload masnory
$("#container").masonry("reload");
//Hiding existing arrows
$(".rightCorner").hide();
$(".leftCorner").hide();
//injecting fresh arrows
    Arrow_Points();

}
function updateWorkItemFailed(){
}

• Delete Item，根据item id进行删除，同Add和Update逻辑，删除完毕后也是需要Reload
  

//Delete daily work item by item id
function deleteDailyWork(workElement){
//Get the daily work item id
var itemId=workElement.attr("itemId");
//Get the current context
var context=new SP.ClientContext.get_current();
//Load the web object
var web=context.get_web();
//Get the list
var list=web.get_lists().getByTitle(listNameForDailyWork);
//Get item to delete by if form the list
var itemToDelete=list.getItemById(itemId);
//Add Delete method to the query
    itemToDelete.deleteObject();
//Execute the query to perform the deletion
    context.executeQueryAsync(DeleteWorkItemSuccess,DeleteWorkItemFailed);
}
function DeleteWorkItemSuccess(){
//Masonry Reload
}
function DeleteWorkItemFailed(sender,args){
console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
总结

　　值得注意的是我将每日的动态存入List中，对于List，他能负担的item的个数和一次从数据库里获取的item都是有限制，对于数据量很大的情况下，是有风险的。