Step 1: Tạo mới 1 custom list
CallCenter
Step 2: Mở Sharepoint Designer 2010
(SPD 2010)
Mở List CallCenter | NewForm.aspx |
Cick Advandced Mode
Step 3: Viết code tại vị trí dưới
webpart thêm mới ngay sau thẻ đóng table
Step 4: Xây dựng giao diện như sau:
Code html
<center>
<table style="width:
50%" border="1">
<tr>
<td>Title</td>
<td><input
type="text" id="txtTitle"/></td>
<td>Status</td>
<td><select
id="status">
<option
value="Spending"
selected="selected">Spending</option>
<option
value="Holdding">Holdding</option>
<option
value="Finish">Finish</option>
</select></td>
</tr>
<tr>
<td>Agent</td>
<td><input
type="text" id="txtAgent"/></td>
<td>Phone Number</td>
<td><input
type="text" id="txtPhoneNumber"/></td>
</tr>
</table>
<input
type="button" id="btnSave" value="Save"
style="width:100px" />
<input
type="button" id="btnCancal" value="Cancel"
style="width:100px"/>
</center>
Code:
Step 5: Thêm thư viện JQuery
<script
type="text/javascript"
src="../../JqueryLibrary/jquery-1.4.2.js"></script>
Code tại đây
Step 6: Khai báo biến để lưu các id
của Table đã thiết kế (nhớ thêm dấu # ngay trước id để get = Jquery)
//Khai báo id của
các control
var
txtTitle="#txtTitle";
var
ddlStatus="#ddlstatus";
var
txtAgent="#txtAgent";
var
txtPhoneNumber="#txtPhoneNumber";
Dùng chrome để lấy các ID của các
control trong webpart thêm mới tương ứng với các ID mà bạn thiết kế
//khai báo id của
webpart
var
idWebpartTitle="#ctl00_m_g_5298a9d0_d076_436b_933f_e606a665e41d_ctl00_ctl05_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00_TextField";
var
idWebpartStatus="#ctl00_m_g_5298a9d0_d076_436b_933f_e606a665e41d_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_DropDownChoice";
var
idWebpartAgent="#ctl00_m_g_5298a9d0_d076_436b_933f_e606a665e41d_ctl00_ctl05_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_upLevelDiv";
var
idWebpartPhoneNumber="#ctl00_m_g_5298a9d0_d076_436b_933f_e606a665e41d_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_TextField";
Step 7: Click phải vào thẻ input của
Title chọn Inspect element
Bạn lấy được id của Title và copy nó
gán vào biến
Step 8: Khai báo sự kiện
PreSaveAction mà sharepoint cung cấp để gán các giá trị nhập từ Form thiết kế
vào các control của webpart thêm mới tương ứng nếu thành công hàm
này trả ra true và ngược lại
function
PreSaveAction()
{
$(idWebpartTitle).val(txtTitle);
$(idWebpartStatus).val(ddlStatus);
$(idWebpartAgent).val(txtAgent);
$(idWebpartPhoneNumber).val(txtPhoneNumber);
return true;
}
Step 9: Tiếp theo copy sự kiện của
nút Save của webpart cho nút Save được thiết kế
Tìm id nút save của webpart và View
code search id vừa copy trong IE
Copy các sự kiện OnClick vào button
btnSave như sau
Step 10: Tương tự nút Cancel
Tất cả Source code như sau
<center>
<table
style="width: 50%" border="1">
<tr>
<td>Title</td>
<td><input
type="text" id="txtTitle"/></td>
<td>Status</td>
<td><select
id="ddlstatus">
<option
value="Spending"
selected="selected">Spending</option>
<option
value="Holdding">Holdding</option>
<option
value="Finish">Finish</option>
</select></td>
</tr>
<tr>
<td>Agent</td>
<td><input
type="text" id="txtAgent"/></td>
<td>Phone
Number</td>
<td><input
type="text" id="txtPhoneNumber"/></td>
</tr>
</table>
<input
type="button" id="btnSave" value="Save"
style="width:100px" onclick="if (!PreSaveItem()) return
false;WebForm_DoPostBackWithOptions(new
WebForm_PostBackOptions("ctl00$m$g_5298a9d0_d076_436b_933f_e606a665e41d$ctl00$toolBarTbl$RightRptControls$ctl00$ctl00$diidIOSaveItem",
"", true, "", "", false,
true))" accesskey="O" class="ms-ButtonHeightWidth"
target="_self" />
<input
type="button" id="btnCancal" value="Cancel"
style="width:100px"onclick="STSNavigate('\u002fLists\u002fCallCenter');return
false;WebForm_DoPostBackWithOptions(new
WebForm_PostBackOptions("ctl00$m$g_5298a9d0_d076_436b_933f_e606a665e41d$ctl00$toolBarTbl$RightRptControls$ctl01$ctl00$diidIOGoBack",
"", true, "", "", false,
true))" accesskey="C" class="ms-ButtonHeightWidth"
target="_self" />
</center>
<script
type="text/javascript"
src="../../JqueryLibrary/jquery-1.4.2.js"></script>
<script
type="text/javascript">
//Khai báo id của các control
var txtTitle="#txtTitle";
var ddlStatus="#ddlstatus";
var txtAgent="#txtAgent";
var
txtPhoneNumber="#txtPhoneNumber";
//khai báo id của webpart
var
idWebpartTitle="#ctl00_m_g_5298a9d0_d076_436b_933f_e606a665e41d_ctl00_ctl05_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00_TextField";
var
idWebpartStatus="#ctl00_m_g_5298a9d0_d076_436b_933f_e606a665e41d_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_DropDownChoice";
var
idWebpartAgent="#ctl00_m_g_5298a9d0_d076_436b_933f_e606a665e41d_ctl00_ctl05_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_upLevelDiv";
var
idWebpartPhoneNumber="#ctl00_m_g_5298a9d0_d076_436b_933f_e606a665e41d_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_TextField";
function PreSaveAction()
{
$(idWebpartTitle).val($(txtTitle).val());
$(idWebpartStatus).val($(ddlStatus).val());
$(idWebpartAgent).append($(txtAgent).val());
$(idWebpartPhoneNumber).val($(txtPhoneNumber).val());
return
true;
}
Mở Form NewForm.aspx và thêm mới giá
trị
Tuy nhiên kết quả thêm thành công
nhưng Field Agent là kiểu User and Group không thêm được và bạn phải tìm cách
thêm nhé.
Chúc các bạn thành công
