关闭

SharePoint 2013 中开发可以被标记为未读和已读的列表之思路篇

标签: Custom actionCustom ActionCustom List ViewjavascriptJavaScriptJavascriptjavaScriptJAVASCRIPTRead Unread ListSharePoint 2013
2206人阅读 评论(0) 收藏 举报
分类:

本文介绍SharePoint 2013中开发可以被标记为未读和已读的列表的思路。 

1.      首先笔者考虑到每个UserReadMark 信息是独立的,需要有一张列表了记录那些User读过某条记录,列表命名为ReadList,使用列表名称+ Item ID + User ID作为Read Mark的组成部分。当用户View这个Item 时通过API取得列表名称,ItemID User ID拼接成Read Mark插入ReadList 中。 

2.      接着问题是如何知道用户什么时候ViewItem?我们知道Item Update, Create, Delete都是有Event Handler的,但是View是没有的,这里就要用到一个辅助字段Readed该字段使用客户化的Filed TypeSharePoint 2013中是可以客户化字段类型(Custom Filed Type)http://msdn.microsoft.com/en-us/library/jj220061.aspxSharePoint 2010 其实也是可以的,  SharePoint 2013 强大的地方就是它可以使用JSLinkUrl 所指向的JS客户化Filed Type的显示模版

 

(function () {
    var ReadMarkContext = {};

    // you can provide templates for:
    // View, DisplayForm, EditForm and NewForm
    ReadMarkContext.Templates = {};
    ReadMarkContext.Templates.Fields = {
        "ReadMarkField": {
            "View": ReadMarkViewTemplate,
            "DisplayForm": RenderDisplayFormForReadMark
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
        ReadMarkContext
        );
})();

……….


这里我们只客户化该字段在DisplayForm中和在List View显示的模版,在JavaScript 函数中我们就可以RenderDisplayFormForReadMarkReadList中插入Read Mark

 

3.      解决插入问题后就要考虑List View如何判断哪个Item是否已读了,同样我们需要借助辅助字段 Readed,在ReadMarkViewTemplate函数中返回类似占位符的标记,如 

return"<spanclass='ReadMarkFiledPlaceHloderClass' id='" + readMarkId + "' >dataloading</span>";


然后要用到的就是客户化List View了:http://msdn.microsoft.com/en-us/library/jj220045.aspx主要利用SharePoint 2013 可以使用JSLinkUrl  所指向的JS客户化List View的显示模版的特性: 

var overrideCtx = {};
 overrideCtx.Templates = {};
 overrideCtx.OnPostRender = postRenderHandler;
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

 

其实这个Template有很多属性可以覆盖和重写,我们这里主要使用OnPostRender就是当着个List View render 完成后会调用这个方法。(其他未覆盖属性SharePoint会使用默认模版中的值 clienttemplates.js)。

接下来我们在postRenderHandler函数中先找到我们先前留下的占位符

readMarkPlaceHolders = $(".ReadMarkFiledPlaceHloderClass");

然后遍历所有占位符,取得其id(readMarkId) ,拼接成CAML    

  var values ='';
     readMarkPlaceHolders.each(function () {
        values += " <Value Type = \'Text\'>" + $(this)[0].id + " </Value>"
    });

    return '<View><Query><Where><In><FieldRef Name=\'Title\'/>' +
        '<Values>' + values +
        '</Values></In></Where></Query>' +
        '<RowLimit>200</RowLimit></View>';
}

ReadList中去查询,遍历返回结果,我们在上面插入的Read Mark,所有返回的Read Mark和占位符的ID匹配上的表示该Item已经被当前用户读过了,将其余没匹配上的标记为Bold(加粗显示)且内容改为UnRead, 匹配上的内容改为Read

 

4.      接下来是如何让User可以使用RibbonbuttonContext Menu将已读的Item标记为未读,相信过SharePoint都知道要用Custom action

a.      添加内容菜单  

CustomAction
      Id="65695319-4784-478e-8dcd-4e541cb1d682.CustomAction"
      RegistrationType="List"
      RegistrationId="10057"
      Location="EditControlBlock"
      Sequence="10001"
      Title="UnRead">
    <!-- 
    Update the Url below to the page you want the custom action to use.
    Start the URL with the token ~remoteAppUrl if the page is in the
    associated web project, use ~appWebUrl if page is in the app project.
    -->
    <UrlAction Url="javascript:ClickUnReadContextMenu();" />

b.     添加Ribbon button

  

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <!-- Adds a Ribbon custom action to a list in the host web site. -->
  <!-- Create a new custom list and add a new item to it -->
  <!-- RegistrationId attribute is the list type id,
        in this case, a read mark list (id=10057). -->
  <CustomAction Id="75dd24d9-0c16-4ef5-be0a-f52ed0e620fa.CustomAction"
              RegistrationType="List"
              RegistrationId="10057"
              Location="CommandUI.Ribbon"
              Sequence="10001"
              Title="UnReadRibbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.ListItem.Manage.Controls._children">
          <Button
              Id="Ribbon.Library.Connect.PropertyViewer"
              Alt="Invoke custom action"
              Sequence="115"
              Command="Invoke_CustomAction"
              LabelText="UnReadRibbon"
              TemplateAlias="o1"
              Image32by32="_layouts/15/images/placeholder32x32.png"
              Image16by16="_layouts/15/images/placeholder16x16.png" />
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler
            Command="Invoke_CustomAction"
            CommandAction="javascript:ClickUnReadRibbonButton()"
            EnabledScript ="javascript:EnableUnRead()"/>           
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>
  <CustomAction
    Id="Ribbon.ListItem.Manage.ReadMarkAction"
    Location="ScriptLink"
    ScriptSrc ="~site/_layouts/15/ReadMark/ReadMarkAction.js"/>

</Elements>

最后还是要用JavaScript当家,需要写JavaScript函数ClickUnReadContextMenu, ClickUnReadRibbonButtonEnableUnRead来处理这些事件,可以先用下列代码取得当前选中的数据,然后找到对应的Read Mark, 调用JavaScript OM来从ReadList中删除这些Read Mark,使用JS将对应的Item的字体改为Bold:

var ctx = SP.ClientContext.get_current();
var items = SP.ListOperation.Selection.getSelectedItems(ctx);

整个思路介绍到这里了,代码我会在随后的文章中分享给大家。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:606864次
    • 积分:8921
    • 等级:
    • 排名:第2184名
    • 原创:261篇
    • 转载:26篇
    • 译文:3篇
    • 评论:199条
    自我介绍
    专注于SharePoint+BI 及.net平台的一码农。微软SharePoint server 方向MVP https://mvp.microsoft.com/en-us/mvp/Cheng%20Cheng-5000549
    个人联系信息
    博客http://blog.csdn.net/farawayplace613
    电子邮件:271722535@qq.com
    文章分类
    最新评论