SharePoint 中時間軸 Timeline的實現

客戶需要在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都是有限制，對於數據量很大的情況下，是有風險的。