Lesson 06: Customize Form (NewForm, EditForm) On Sharepoint Online

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(&quot;ctl00$m$g_5298a9d0_d076_436b_933f_e606a665e41d$ctl00$toolBarTbl$RightRptControls$ctl00$ctl00$diidIOSaveItem&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, 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(&quot;ctl00$m$g_5298a9d0_d076_436b_933f_e606a665e41d$ctl00$toolBarTbl$RightRptControls$ctl01$ctl00$diidIOGoBack&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, 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