客户需要在OA中实现每日动态功能,能够记录每一位员工的每天的工作动态,我很快想到了时间轴,因为时间轴能很直观的现实员工每一刻的动态。就像Facebook的Timeline效果(点击查看)。 尝试着搜索这个效果,园友的这篇博文正好给我启发,接下来就去实现吧。
最终的效果如下所示:
点击每个员工的姓名,即可进入他当天的工作动态(只能看),若点击自己的名字(既能看又能发送/编辑/删除动态),如下所示:
动态的详细页,如下所示:
点击时间轴,即可新增动态,如下所示:
编辑效果,鼠标移至内容区域,现实黄色提醒,如下所示:
单击即可显示编辑界面,如下所示:
移开鼠标,即可自动保存。
当然如果想把一条当太删掉,点击右上角X即可。
关于效果的实现原理可以参考这篇文章。
了解了上面提到的这篇文章之后(Masonry.js),接下来就是Sharepoint 客户端对象模型的实现了,比如Ecmascript。
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());
}
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());
}
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 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都是有限制,对于数据量很大的情况下,是有风险的。