昨天已介绍了一篇《使用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#代码参考:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link href="../Metro-UI-CSS/css/metro-bootstrap.css" rel="stylesheet">

<link href="../Metro-UI-CSS/css/metro-bootstrap-responsive.css" rel="stylesheet">

<link href="../Metro-UI-CSS/css/iconFont.css" rel="stylesheet">

<link href="../Metro-UI-CSS/css/docs.css" rel="stylesheet">

<link href="../Metro-UI-CSS/js/prettify/prettify.css" rel="stylesheet">

<!-- Load JavaScript Libraries -->

<script src="../Metro-UI-CSS/js/jquery/jquery-1.11.1.js"></script>

<script src="../Metro-UI-CSS/js/jquery/jquery.widget.min.js"></script>

<script src="../Metro-UI-CSS/js/jquery/jquery.mousewheel.js"></script>

<script src="../Metro-UI-CSS/js/prettify/prettify.js"></script>

<script src="../Metro-UI-CSS/js/jquery/jquery.SPServices-2014.01.js"></script>

<!-- Metro UI CSS JavaScript plugins -->

<script src="../Metro-UI-CSS/js/load-metro.js"></script>

<!-- Local JavaScript -->

<script src="../Metro-UI-CSS/js/docs.js"></script>

<script src="../Metro-UI-CSS/js/github.info.js"></script>

<script src="../Metro-UI-CSS/js/metro-dropdown.js"></script>

<script src="../ckeditor/ckeditor.js"></script>

<title>个人工作日报系统-填写工作日报</title>

<script>

// The instanceReady event is fired, when an instance of CKEditor has finished

// its initialization.

CKEDITOR.on( 'instanceReady', function( ev ) {

	// Show the editor name and description in the browser status bar.

	document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';

	// Show this sample buttons.

	document.getElementById( 'eButtons' ).style.display = 'block';

});

function Focus() {

	CKEDITOR.instances.editor1.focus();

}

function onFocus() {

	document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';

}

function onBlur() {

	document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';

}

var thisUsersValues = $().SPServices.SPGetCurrentUser({webURL: "http://worklog",fieldNames: ["Title", "Name"],

   debug: false

    });

indexdata = [];

 Date.prototype.Format = function (fmt) { //author: meizz

        var o = {

        "M+": this.getMonth() + 1, //月份

        "d+": this.getDate(), //日

        "h+": this.getHours(), //小时

        "m+": this.getMinutes(), //分

        "s+": this.getSeconds(), //秒

        "q+": Math.floor((this.getMonth() + 3) / 3), //季度

        "S": this.getMilliseconds() //毫秒

       };

       if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

        for (var k in o)

        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

        return fmt;

       }

function CreateNewItem(wldate, wlcontent,leader,hbr) {

    $().SPServices({

        operation: "UpdateListItems",

        async: false,

        batchCmd: "New",

        listName: "{B9F5CB2C-F8EC-4522-8A4C-8E20DAC33E8A}",

        valuepairs: [["wldate", wldate], ["wlcontent", wlcontent], ["leader", leader],["hbr", hbr]],

        webURL: "http://worklog",

        completefunc: function(xData, Status) {

          if(Status=="success")

          {

              window.location.href="http://worklog/";

          }

          else

          {

            $.Dialog({

              flat: true,

              overlay: false,

              icon: '<span class="icon-book"></span>',

              title: '提示',

              width: 'auto',

              height: 'auto',

              padding: false,

              content: '提交失败！'

             });

          }

        }

    });

}

$(document).ready(function () {

  $('#username').append(thisUsersValues.Title+",您好！"); 

  $().SPServices({

  operation: "GetListItems",

   async: false,

   listName: "{81804A97-C48B-401A-B02A-D18A8B33F963}",

    CAMLViewFields: "<ViewFields><FieldRef Name='Leader' /></ViewFields>",

    webURL: "http://worklog",

    completefunc: function (xData, Status)

    {

       var i=-1;

      $(xData.responseXML).SPFilterNode("z:row").each(function()

      {

           //var liHtml = "<li>" + $(this).attr("ows_Leader") + "</li>";

           var arr = $(this).attr("ows_Leader").split(";#");

            i++;

            indexdata[i] = new Object();

           if(arr.length ==2)

           {

             if(i==0)

             {

               $('#leader').text(arr[1]);

               var tdate = new Date().Format("yyyy-MM-dd");

               $('#indate').val(tdate);

             }

             indexdata[i].id= arr[0];

             indexdata[i].name= arr[1];

             $("#leaderdp").append("<li><a href='#' onclick="+"$('#leader').text($(this).text())"+">"+arr[1]+"</a></li>");

           }

      });    

    }

   });  

    $("#save").click(function() {

	      var hbdate  = $("#indate").val();

	      var leader =$('#leader').text();

	      for(var key in indexdata)

          {

            if(indexdata[key].name == leader)

            {

              leader= indexdata[key].id;

              break;

            }

          }

          var editor=CKEDITOR.instances.editor1;

          var wlcontent = editor.getData();

          if(wlcontent.length > 0)

          {

             CreateNewItem(hbdate,$(wlcontent).text(wlcontent).html(),leader,thisUsersValues.Title);

          }

          else

          {

             $.Dialog({

              flat: true,

              overlay: false,

              icon: '<span class="icon-book"></span>',

              title: '提示',

              width: 'auto',

              height: 'auto',

              padding: false,

              content: '对不起,请填写汇报内容！'

             });

          }

    });

  });

</script>

</head>

<body class="metro">

    <header class="bg-dark" data-load="header.html"></header>

    <div class="container">

      <h3>

         <small class="on-left"><span id="username"></span></small>

        </h3>

        <p>

        汇报日期

        </p>

        <div class="span3">

        <div class="input-control text" data-role="datepicker" id="hbdate"

data-format="yyyy-mm-dd"

data-position="bottom"

data-effect="fade">

<input type="text" id="indate">

<button class="btn-date" id="btndate"></button>

</div>

           </div>

            <p>

        汇报领导

        </p>

              <div class="button-dropdown">

<button class="dropdown-toggle large link" style="width:220px;" id="leader">选择</button>

<ul class="dropdown-menu" data-role="dropdown" id="leaderdp">

</ul>

</div>

                <p>

        汇报内容

        </p>

       	<form >

      <textarea cols="100" id="editor1" name="editor1" rows="10"></textarea>

		<script type="text/javascript">

			// Replace the <textarea id="editor1"> with an CKEditor instance.

			CKEDITOR.replace( 'editor1', {

				on: {

					focus: onFocus,

					blur: onBlur,

					// Check for availability of corresponding plugins.

					pluginsLoaded: function( evt ) {

						var doc = CKEDITOR.document, ed = evt.editor;

						if ( !ed.getCommand( 'bold' ) )

							doc.getById( 'exec-bold' ).hide();

						if ( !ed.getCommand( 'link' ) )

							doc.getById( 'exec-link' ).hide();

					}

				}

			});

		</script>

      </form>

        <button class="bg-dark fg-white" id="save">提交</button>

     </div>

</body>

</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. MySQL数据库主键设计原则

    目录 1. 主键定义... 5 2. 主键设计原则... 5 2.1 确保主键的无意义性... 5 2.2 采用整型主键... 5 2.3 减少主键的变动... 5 2.4 避免重复使用主键... 6 ...

  2. thrift之TTransport层的堵塞的套接字I/O传输类TSocket

    本节将介绍第一个实现具体传输功能的类TSocket,这个类是基于TCP socket实现TTransport的接口.下面具体介绍这个类的相关函数功能实现. 1.构造函数 分析一个类的功能首先看它的定义 ...

  3. Scala 中 构造函数，重载函数的执行顺序

    在调试scala在线开发教程(http://www.imobilebbs.com/wordpress/archives/4911)的过程中看到了以下代码,但是这段代码无论怎么调试都无法成功. abst ...

  4. Atitit.实现反向代理(1)----url rewrite 配置and内容改写 and -绝对路径链接改写 java php

    Atitit.实现反向代理(1)----url rewrite  配置and内容改写 and -绝对路径链接改写 java php 1. 代理的实现:::普通代理and反向代理?? 1 2. url  ...

  5. INNO setup安装卸载钱判断进程中是否在运行总结

    1.安装前判断进程中是否有程序在运行. [files] ; 安装前判断进程,dll文件放在inno的安装目录中Source: compiler:psvince.dll; Flags: dontcopy ...

  6. HOWTO - Basic MSI安装包在安装运行过程中如何获取完整源路径

    有朋友问到如何在一个Windows Installer安装包中获取安装包源路径,就是在安装包运行过程中动态获取*.msi所在完整路径. 这个问题分两类,如果我们的安装包只是一个*.msi安装文件,那么 ...

  7. [转]office2010一直卡在“正在受保护的视图中打开”

    用Office 2010 打开文件遇到“”,如下图: 转自: 解决办法: 还可以使用下面的方法打开上图的受保护视图设置界面:   1. 启动 Word 2010 应用程序,单击[文件]按钮并选择[选项 ...

  8. Swift入门篇-字符串和字符

    今天主要是介绍一下字符串的用法 ,字符串的语法和object-c语法不太一样,但是思想是一样,就是写法不太一样.如果您对.net和java语法比较熟悉的话,那您几乎没有深压力.如果您对swift 基本 ...

  9. PHP多次调用Mysql存储过程报错解决办法

    PHP多次调用Mysql数据库的存储过程会出现问题,主要问题为存储过程中执行多次SQL语句不能一一释放导致的,网上找了一些解决办法,比如使用 multi_query 然后一个一个释放,但是发现根本不适 ...

  10. Linux Futex的设计与实现(转)

    引子在编译2.6内核的时候,你会在编译选项中看到[*] Enable futex support这一项,上网查,有的资料会告诉你"不选这个内核不一定能正确的运行使用glibc的程序" ...