Monday, February 27, 2012

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

0 comments:

Post a Comment