昨天已介绍了一篇《使用SharePoint Designer定制开发专家库系统实例！》，今天继续来介绍使用SharePoint Designer定制开发员工工作日志系统实例，主要功能包括填写日报、查看日报及点评日报等，这个是今年7月份的时候设计开发的一个实验系统，仅供学习参考。很多人可能并不清楚Sharepoint Designer究竟是啥东东？实际上Sharepoint Designer是Sharepoint自带的设计开发和管理工具，从Sharepoint 2007开始已有这个工具，但需要单独下载安装！该工具的概念介绍请看百度百科的解释：

SharePoint Designer是微软的下一代网站创建工具，用来取代FrontPage，微软官方提供了免费下载，并且由其提供了序列号。

这款 SharePoint Designer 是微软继 Frontpage 之后推出的新一代网站创建工具。Microsoft SharePoint Designer 提供了更加与时俱进的制作工具，可帮助你在 SharePoint 平台上建立引人入胜的 SharePoint 网站，快速构建启用工作流的应用程序和报告工具。所有这些都在一个 IT 管理环境中进行。

    这款 Microsoft SharePoint Designer 包含不少新特性，它具有全新的视频预览功能，包括新媒体和一个 Silverlight 的内容浏览器 Web 部件。微软内嵌了Silverlight 功能(一种工具，用于创建交互式 Web 应用程序)和全站支持 AJAX 功能，让企业用户很方便地给网站添加丰富的多媒体和互动性体验。我们可以通过 Silverlight Web Part 功能，在网页上设置显示一个视频显示框，这是以前没有的功能。企业可以利用这种能力建设自己的视频网站而不需要额外的编程。Microsoft SharePoint 还具有全新的备份和恢复功能，让你能够更加方便地选择需要备份的组件，节省操作时间也缩短了之前复杂繁琐的过程。SharePoint 的管理中心网站也经过了重新设计，能够提供更好的可用性，包括检测 SharePoint 服务器的工作状况这一新功能。
    Microsoft SharePoint Designer 就像 wiki 一样简单， 虽然用户可以使用功能丰富的 Office 来实现编辑功能，但 HTML 这种标记语言使用起来并不是很方便，它总是需要通过编辑工具生成。而另一方面，Wiki 是容易编写的语言代表。SharePoint 支持 Wiki 标记，而 SharePoint 所见即所得的编辑方式也让操作者能够很好的掌控设计的准确性。在某些方面，SharePoint 甚至比许多 Wiki 更容易使用。它还具有卓越的 Excel 图表功能，通过此功能，Excel Web Access 能够让你将实时的 Excel 图表和数据信息嵌入 SharePoint 的网页之中，图表内容将监视操作者所有的更新，使得表格保证显示最新数据内容。SharePoint 能够让用户可以预览在文件库中所包含的视频和其他多媒体资源，不用一一打开就能获取一定文档内容，让浏览更加方便。
    新增加了社区功能。社区应用的兴起，促使软件厂商在软件中加入企业内部网络中建设类似 Facebook 社区的功能。微软在 SharePoint 2010年中对社区功能进行了全面的提升。用户配置文件包括了你的同事、兴趣爱好或专业知识。社区的标记和评级，使得它更容易分享内容。此外，SharePoint 支持让工作流程可视化，大大的方便了让操作人员更加准确的掌握在 Microsoft Visio 中编辑工作的进展情况。还可以添加更多的管理员用户，新的管理员用户的添加能够让 IT 人员更好的控制网页上资源的分配，从而能够让服务器运行效率得到提高。
      2010版本 概述
      Microsoft SharePoint Designer 2010 是一个 Web 和应用程序设计程序，用于构建和自定义在 Microsoft SharePoint Foundation 2010 和 Microsoft SharePoint Server 2010 上运行的网站。

使用 SharePoint Designer 2010，您可以创建数据丰富的网页，构建支持工作流的强大解决方案，以及设计网站的外观。您可以创建各式各样的网站，从小型项目管理团队网站到仪表板驱动的企业门户解决方案。
     SharePoint Designer 2010 提供独特的网站创作体验，您可在该软件中创建 SharePoint 网站，自定义构成网站的组件，围绕业务流程设计网站的逻辑，将网站作为打包解决方案部署。您无需编写一行代码即可完成所有这些工作。

2013版本 概述
      SharePoint Designer 2013 是可供选择用来快速开发 SharePoint 应用程序的工具。使用 SharePoint Designer，高级用户和开发人员可以根据业务需求快速创建 SharePoint 解决方案。 高级用户可以利用 SharePoint 中提供的构建基块在易于使用的环境中撰写无代码解决方案，其中包括各种常见方案，从协作网站和 Web 发布到业务线数据集成、商业智能解决方案和有人参与的工作流。此外，开发人员可以使用 SharePoint Designer 2013 快速开始 SharePoint 开发项目！

我为啥想设计开发一个员工工作日志系统呢？最初的考虑是基于这个出发点：

目前部门的员工个人工作日志是通过邮件发送形式进行的，缺乏系统化的管理与领导反馈评价，为了进行一步提高效率，有效利用Sharepoint的资源，并为员工个人逐步养成良好地写工作日志的习惯，并支撑后续的统计与分析及对其他有相同需求的部门推广,完全基于前端WEB技术构建了基于Sharepoint上个人工作日志系统，可以很方便的移植到其他部门中去，同时考虑到移动应用的需求，采用移动优先的开发策略，方便领导与员工在移动端进行操作。

      在设计开发方式，与专家库系统类似。首先建立两个自定义Sharepoint列表和一个文档库，如下图:

其次，UI使用基于HTML5的Metro-UI，Sharepoint本身的文本编辑器功能很弱，只有最最基本的功能，因此在文件编辑器方面集成功能强大的ckeditor，前端页面与Sharepoint的列表交互继续使用SPServices库，如下图：

       

      

      最后，就可以设计开发相关的功能了，填报工作日志的完整C#代码参考:

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  7.  
  8. <link href="../Metro-UI-CSS/css/metro-bootstrap.css" rel="stylesheet">
  9. <link href="../Metro-UI-CSS/css/metro-bootstrap-responsive.css" rel="stylesheet">
  10. <link href="../Metro-UI-CSS/css/iconFont.css" rel="stylesheet">
  11. <link href="../Metro-UI-CSS/css/docs.css" rel="stylesheet">
  12. <link href="../Metro-UI-CSS/js/prettify/prettify.css" rel="stylesheet">
  13. <!-- Load JavaScript Libraries -->
  14. <script src="../Metro-UI-CSS/js/jquery/jquery-1.11.1.js"></script>
  15. <script src="../Metro-UI-CSS/js/jquery/jquery.widget.min.js"></script>
  16. <script src="../Metro-UI-CSS/js/jquery/jquery.mousewheel.js"></script>
  17. <script src="../Metro-UI-CSS/js/prettify/prettify.js"></script>
  18. <script src="../Metro-UI-CSS/js/jquery/jquery.SPServices-2014.01.js"></script>
  19. <!-- Metro UI CSS JavaScript plugins -->
  20. <script src="../Metro-UI-CSS/js/load-metro.js"></script>
  21. <!-- Local JavaScript -->
  22. <script src="../Metro-UI-CSS/js/docs.js"></script>
  23. <script src="../Metro-UI-CSS/js/github.info.js"></script>
  24.  
  25. <script src="../Metro-UI-CSS/js/metro-dropdown.js"></script>
  26.  
  27. <script src="../ckeditor/ckeditor.js"></script>
  28.  
  29. <title>个人工作日报系统-填写工作日报</title>
  30. <script>
  31. // The instanceReady event is fired, when an instance of CKEditor has finished
  32. // its initialization.
  33. CKEDITOR.on( 'instanceReady', function( ev ) {
  34. 	// Show the editor name and description in the browser status bar.
  35. 	document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';
  36.  
  37. 	// Show this sample buttons.
  38. 	document.getElementById( 'eButtons' ).style.display = 'block';
  39. });
  40.  
  41. function Focus() {
  42. 	CKEDITOR.instances.editor1.focus();
  43. }
  44.  
  45. function onFocus() {
  46. 	document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';
  47. }
  48.  
  49. function onBlur() {
  50. 	document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';
  51. }
  52.  
  53. var thisUsersValues = $().SPServices.SPGetCurrentUser({webURL: "http://worklog",fieldNames: ["Title", "Name"],
  54.    debug: false
  55.     });
  56.  
  57. indexdata = [];
  58.  
  59.  Date.prototype.Format = function (fmt) { //author: meizz
  60.         var o = {
  61.         "M+": this.getMonth() + 1, //月份
  62.         "d+": this.getDate(), //日
  63.         "h+": this.getHours(), //小时
  64.         "m+": this.getMinutes(), //分
  65.         "s+": this.getSeconds(), //秒
  66.         "q+": Math.floor((this.getMonth() + 3) / 3), //季度
  67.         "S": this.getMilliseconds() //毫秒
  68.        };
  69.        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  70.         for (var k in o)
  71.         if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  72.         return fmt;
  73.        }
  74.  
  75. function CreateNewItem(wldate, wlcontent,leader,hbr) {
  76.     $().SPServices({
  77.         operation: "UpdateListItems",
  78.         async: false,
  79.         batchCmd: "New",
  80.         listName: "{B9F5CB2C-F8EC-4522-8A4C-8E20DAC33E8A}",
  81.         valuepairs: [["wldate", wldate], ["wlcontent", wlcontent], ["leader", leader],["hbr", hbr]],
  82.         webURL: "http://worklog",
  83.         completefunc: function(xData, Status) {
  84.           if(Status=="success")
  85.           {
  86.               window.location.href="http://worklog/";
  87.  
  88.           }
  89.           else
  90.           {
  91.             $.Dialog({
  92.               flat: true,
  93.               overlay: false,
  94.               icon: '<span class="icon-book"></span>',
  95.               title: '提示',
  96.               width: 'auto',
  97.               height: 'auto',
  98.               padding: false,
  99.               content: '提交失败！'
  100.              });
  101.  
  102.           }
  103.  
  104.         }
  105.     });
  106. }
  107.  
  108. $(document).ready(function () {
  109.  
  110.   $('#username').append(thisUsersValues.Title+",您好！"); 
  111.  
  112.   $().SPServices({
  113.   operation: "GetListItems",
  114.    async: false,
  115.    listName: "{81804A97-C48B-401A-B02A-D18A8B33F963}",
  116.     CAMLViewFields: "<ViewFields><FieldRef Name='Leader' /></ViewFields>",
  117.     webURL: "http://worklog",
  118.     completefunc: function (xData, Status)
  119.     {
  120.        var i=-1;
  121.  
  122.       $(xData.responseXML).SPFilterNode("z:row").each(function()
  123.       {
  124.            //var liHtml = "<li>" + $(this).attr("ows_Leader") + "</li>";
  125.            var arr = $(this).attr("ows_Leader").split(";#");
  126.  
  127.             i++;
  128.  
  129.             indexdata[i] = new Object();
  130.  
  131.            if(arr.length ==2)
  132.            {
  133.              if(i==0)
  134.              {
  135.                $('#leader').text(arr[1]);
  136.                var tdate = new Date().Format("yyyy-MM-dd");
  137.                $('#indate').val(tdate);
  138.              }
  139.              indexdata[i].id= arr[0];
  140.              indexdata[i].name= arr[1];
  141.              $("#leaderdp").append("<li><a href='#' onclick="+"$('#leader').text($(this).text())"+">"+arr[1]+"</a></li>");
  142.  
  143.            }
  144.  
  145.       });    
  146.  
  147.     }
  148.    });  
  149.  
  150.     $("#save").click(function() {
  151.  
  152. 	      var hbdate  = $("#indate").val();
  153.  
  154. 	      var leader =$('#leader').text();
  155.  
  156. 	      for(var key in indexdata)
  157.           {
  158.             if(indexdata[key].name == leader)
  159.             {
  160.               leader= indexdata[key].id;
  161.               break;
  162.             }
  163.           }
  164.  
  165.           var editor=CKEDITOR.instances.editor1;
  166.           var wlcontent = editor.getData();
  167.  
  168.           if(wlcontent.length > 0)
  169.           {
  170.              CreateNewItem(hbdate,$(wlcontent).text(wlcontent).html(),leader,thisUsersValues.Title);
  171.           }
  172.           else
  173.           {
  174.              $.Dialog({
  175.               flat: true,
  176.               overlay: false,
  177.               icon: '<span class="icon-book"></span>',
  178.               title: '提示',
  179.               width: 'auto',
  180.               height: 'auto',
  181.               padding: false,
  182.               content: '对不起,请填写汇报内容！'
  183.              });
  184.           }
  185.  
  186.     });
  187.  
  188.   });
  189.  
  190. </script>
  191. </head>
  192. <body class="metro">
  193.     <header class="bg-dark" data-load="header.html"></header>
  194.     <div class="container">
  195.       <h3>
  196.          <small class="on-left"><span id="username"></span></small>
  197.         </h3>
  198.         <p>
  199.         汇报日期
  200.         </p>
  201.         <div class="span3">
  202.  
  203.         <div class="input-control text" data-role="datepicker" id="hbdate"
  204. data-format="yyyy-mm-dd"
  205. data-position="bottom"
  206. data-effect="fade">
  207. <input type="text" id="indate">
  208. <button class="btn-date" id="btndate"></button>
  209. </div>
  210.            </div>
  211.             <p>
  212.         汇报领导
  213.         </p>
  214.               <div class="button-dropdown">
  215. <button class="dropdown-toggle large link" style="width:220px;" id="leader">选择</button>
  216. <ul class="dropdown-menu" data-role="dropdown" id="leaderdp">
  217. </ul>
  218. </div>
  219.                 <p>
  220.         汇报内容
  221.         </p>
  222.        	<form >
  223.       <textarea cols="100" id="editor1" name="editor1" rows="10"></textarea>
  224.  
  225. 		<script type="text/javascript">
  226. 			// Replace the <textarea id="editor1"> with an CKEditor instance.
  227. 			CKEDITOR.replace( 'editor1', {
  228. 				on: {
  229. 					focus: onFocus,
  230. 					blur: onBlur,
  231.  
  232. 					// Check for availability of corresponding plugins.
  233. 					pluginsLoaded: function( evt ) {
  234. 						var doc = CKEDITOR.document, ed = evt.editor;
  235. 						if ( !ed.getCommand( 'bold' ) )
  236. 							doc.getById( 'exec-bold' ).hide();
  237. 						if ( !ed.getCommand( 'link' ) )
  238. 							doc.getById( 'exec-link' ).hide();
  239. 					}
  240. 				}
  241. 			});
  242. 		</script>
  243.       </form>
  244.         <button class="bg-dark fg-white" id="save">提交</button>
  245.      </div>
  246.  
  247. </body>
  248.  
  249. </html>

　 最终展现一些效果，如下图：

 
  

同时欢迎关注本人的微信号QYXXHQY，不定期更新企业信息化前沿相关技术和应用，欢迎扫描关注，二维码如下：

本博客为软件人生原创，欢迎转载，转载请标明出处：http://www.cnblogs.com/nbpowerboy/p/4168625.html。演绎或用于商业目的，但是必须保留本文的署名软件人生（包含链接）。如您有任何疑问或者授权方面的协商，请给我留言。
 
    

使用SharePoint Designer定制开发员工工作日志系统实例！的更多相关文章

  1. 使用SharePoint Designer定制开发专家库系统实例！

    将近大半年都没有更新博客了,趁这段时间不忙,后续会继续分享一些技术和实际应用.对于Sharepoint的定制开发有很多种方式,对于一般的应用系统,可以使用Sharepoint本身自带的功能,如列表作为 ...

  2. SharePoint Designer定制MOSS/WSS表单页面

    转:http://blog.csdn.net/yl_99/article/details/7087897 方法一.使用SharePoint Designer配合enderingTemplate文件来定 ...

  3. Android性能优化之UncaughtExceptionHandler定制自己的错误日志系统

    前言: 每当我们app测试的时候,测试人员总是对我们说这里崩溃了,那里挂掉了!我们只能默默接受,然后尝试着重现bug,更可悲的是有时候bug很难复现,为了解决这种现状所以我们要尝试这建立一个自己的bu ...

  4. python 标准日志模块loging 及日志系统实例

    本文出处:https://www.cnblogs.com/goodhacker/p/3355660.html#undefined python的标准库里的日志系统从Python2.3开始支持.只要im ...

  5. SharePoint解决方案及开发系列(1)-BPM

    自从2008年做SharePoint第一个项目至今,不知不觉已经快7个年头了:上次听涂曙光老师的讲座,有机会能跟他面对面地沟通(“我是看您的blog长大的”).刚换了新工作,暂时比较闲,乘着这段时间对 ...

  6. ELK日志系统之通用应用程序日志接入方案

    前边有两篇ELK的文章分别介绍了MySQL慢日志收集和Nginx访问日志收集,那么各种不同类型应用程序的日志该如何方便的进行收集呢?且看本文我们是如何高效处理这个问题的 日志规范 规范的日志存放路径和 ...

  7. Ansible实战：部署分布式日志系统

    本节内容: 背景 分布式日志系统架构图 创建和使用roles JDK 7 role JDK 8 role Zookeeper role Kafka role Elasticsearch role My ...

  8. SharePoint 2013 开发——SharePoint Designer 2013工作流

    博客地址:http://blog.csdn.net/FoxDave SharePoint Designer 2013为开发者和高级用户提供了两种创建定制工作流的模式: 基于文本的设计器--即我们一直 ...

  9. SharePoint Server 2013开发之旅（一）：新的开发平台和典型开发场景介绍

    我终于开始写这个系列文章,实际上确实有一段时间没有动笔了.最近重新安装了一套SharePoint Server 2013的环境,计划利用工作之余的时间为大家写一点新的东西. SharePoint Se ...

随机推荐

  1. ViEmuVS2013-3.2.1 破解

    VS升级到2013后,作为一个Vimer,自然需要更新最新的ViEmu插件,因为现在离了Vim,写代码已经寸步难行了. ViEmu 3.2.1的破解其实和Viemu 3.0.13的破解方法一样.安装前 ...

  2. TaskCompletionSource的使用场景

    TaskCompletionSource生成Task的另一种方法.使用TaskCompletionSource很简单,只需要实例化它即可.TaskCompletionSource有一个Task属性,你 ...

  3. webApp 阅读器项目实践

    这是一个webApp 阅读器的项目,是慕课网的老师讲授的一个实战,先给出项目源码在GitHub的地址:https://github.com/yulifromchina/MobileWebReader. ...

  4. paramiko操作详解(封装好的类,可以直接使用)

    #!/usr/bin/env python #encoding:utf8 #author: djoker import paramiko class myParamiko: def __init__( ...

  5. atitit.ajax bp dwr 3.的注解方式配置使用流程总结 VO9o.....

    atitit.ajax bp dwr 3.的注解方式配置使用流程总结 VO9o..... 1. 安装配置 1 1.1. 下载  dwr.jar 1M 1 1.2. 配置注解方式..web.xml 1 ...

  6. Leetcode 83 Remove Duplicates from Sorted List 链表

    就是将链表中的重复元素去除 我的方法很简单就是如果链表的前后元素相同的话,将后一个元素删除 /** * Definition for singly-linked list. * struct List ...

  7. Liferay7 BPM门户开发之35: AssetTag的集成查询

    Tag是liferay中的Asset特性,可以用来对信息进行分类,在iferay中的Asset类型为: 1. Web Content(自定义内容) 2. Documents and Media(文档库 ...

  8. 【地图API】收货地址详解2

    上次讲解的方法是: 在地图中心点添加一个标注,每次拖动地图就获取地图中心点,再把标注的位置设置为地图中心点.可参考教程:http://www.cnblogs.com/milkmap/p/6126424 ...

  9. Swift - 实现点击cell动态修改高度

    Swift - 实现点击cell动态修改高度 效果 源码 https://github.com/YouXianMing/Swift-Animations // // TapCellAnimationC ...

  10. c#复制包含子目录文件夹代码

    c#没有复制目录的代码,需要通过递归实现复制目录: 需要引用System.IO命名空间,实现代码如下: private static bool CopyDirectory(string SourceP ...