昨天已介紹了一篇《使用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。演繹或用於商業目的，但是必須保留本文的署名軟件人生（包含鏈接）。如您有任何疑問或者授權方面的協商，請給我留言。 |