ĐÀO TẠO DOANH NGHIỆP : SỞ KHOA HỌC CÔNG NGHỆ TỈNH ĐỒNG NAI

ENTERPRISE TRAINING: DONG NAI DEPARTMENT OF SCIENCE AND TECHNOLOGY.

HÌNH ẢNH TẬP HUẤN LỚP SHAREPOINT WORKFLOW VÀ KIẾN TRÚC SHAREPOINT

PHOTOS OF SHAREPOINT WORKFLOW AND ARCHITECTURE CLASS.

HÌNH ẢNH TẬP HUẤN LỚP SHAREPOINT WORKFLOW VÀ KIẾN TRÚC SHAREPOINT

PHOTOS OF SHAREPOINT WORKFLOW AND ARCHITECTURE CLASS.

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

Lesson 05: Working with Sharepoint View


How to configure view Column
Click Employees list | tab List | Modify View
Display column on view
Click to Filed Created, Modified and click ok
Result as
Sort items
First sort by the column:
                Title: Show items in ascending order
Then sort by the column:
                FirstName: Show items in descending order
Result as

Filter items
Result as
Group by items
Result as
Total items
Result as
Set Style for view
Result as

Item Limit
Result as
Moreover, you can combine display column, sort, filter, group by …