使用SharePoint Designer定製開發員工工做日誌系統實例！

時間 2019-11-09

標籤使用 sharepoint designer 定製開發員工日誌系統實例欄目 Java開源简体版

原文原文鏈接

昨天已介紹了一篇《使用SharePoint Designer定製開發專家庫系統實例！》，今天繼續來介紹使用SharePoint Designer定製開發員工工做日誌系統實例，主要功能包括填寫日報、查看日報及點評日報等，這個是今年7月份的時候設計開發的一個實驗系統，僅供學習參考。不少人可能並不清楚Sharepoint Designer到底是啥東東？實際上Sharepoint Designer是Sharepoint自帶的設計開發和管理工具，從Sharepoint 2007開始已有這個工具，但須要單獨下載安裝！該工具的概念介紹請看百度百科的解釋：javascript

SharePoint Designer是微軟的下一代網站建立工具，用來取代FrontPage，微軟官方提供了免費下載，而且由其提供了序列號。css

這款 SharePoint Designer 是微軟繼 Frontpage 以後推出的新一代網站建立工具。Microsoft SharePoint Designer 提供了更加與時俱進的製做工具，可幫助你在 SharePoint 平臺上創建引人入勝的 SharePoint 網站，快速構建啓用工做流的應用程序和報告工具。全部這些都在一個 IT 管理環境中進行。html

這款 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 開發項目！java

我爲啥想設計開發一個員工工做日誌系統呢？最初的考慮是基於這個出發點：jquery

目前部門的員工我的工做日誌是經過郵件發送形式進行的，缺少系統化的管理與領導反饋評價，爲了進行一步提升效率，有效利用Sharepoint的資源，併爲員工我的逐步養成良好地寫工做日誌的習慣，並支撐後續的統計與分析及對其餘有相同需求的部門推廣,徹底基於前端WEB技術構建了基於Sharepoint上我的工做日誌系統，能夠很方便的移植到其餘部門中去，同時考慮到移動應用的需求，採用移動優先的開發策略，方便領導與員工在移動端進行操做。git

在設計開發方式，與專家庫系統相似。首先創建兩個自定義Sharepoint列表和一個文檔庫，以下圖:github

其次，UI使用基於HTML5的Metro-UI，Sharepoint自己的文本編輯器功能很弱，只有最最基本的功能，所以在文件編輯器方面集成功能強大的ckeditor，前端頁面與Sharepoint的列表交互繼續使用SPServices庫，以下圖：web

最後，就能夠設計開發相關的功能了，填報工做日誌的完整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>

　最終展示一些效果，以下圖：編程