Tạo mới và điều hướng trang với SharePoint Designer 2010

Đầu tiên, bạn thiết lập kết nối đến hệ thống SharePoint của bạn từ SharePoint Designer (SPD) 2010 (link download: x86 – x64)

spd2010_newpage_1

Điền vào đường dẫn đến hệ thống SharePoint của bạn trong ô Site Name

spd2010_newpage_2

SPD sẽ tự động đồng bộ hóa những dữ liệu cần thiết từ hệ thống SharePoint về máy tính của bạn để phục vụ cho việc xử lý sau này.

Vì SPD 2010 tập trung vào xử lý với object nên bên phía tay trái màn hình là danh sách các object mà SPD hỗ trợ xử lý.

spd2010_newpage_3

Trong bài viết này, mình sẽ hướng dẫn bạn tạo một trang mới và đưa nó lên navigation bar trên SharePoint.

Trước khi tiến hành tạo trang, một phần quan trọng mà các bạn nên lưu ý đó là các master page (vì SharePoint 2010 phát triển trên nền .NET 3.5, sử dụng Web Form), vì khi bạn tạo trang aspx, bạn sẽ sử dụng một (hoặc nhiều) master page để kế thừa cấu trúc trang “sườn” cho trang aspx của mình.

spd2010_newpage_4

Trong ngữ cảnh này, mình đang kết nối với Team Site của SharePoint nên ngoài 3 master page (cơ bản) khoanh đỏ như hình trên thì còn có các trang aspx khác hỗ trợ cho các tính năng trên Team Site.

  • default.master: (còn được biết đến với tên gọi v3 master) tương tự với master page mặc định trong SharePoint 2007. Nếu bạn sử dụng nó cho SharePoint site của mình, bạn sẽ thấy là thanh ribbon sẽ bị loại bỏ và Site Actions sẽ nằm bên phải thay vì bên trái. Nó được sử dụng khi một trang SharePoint 2007 được nâng cấp lên 2010, và bạn có thể sử dụng nó chỉ khi nào SharePoint 2010 ở chế độ SharePoint 2007 thông qua Visual Upgrade.
  • v4.master: là template master page mặc định của Team Site, tương tự vớiblueband.master trong phiên bản SharePoint 2007, gồm có ribbon, Site Actions menu nằm bên góc trái của site.
  • minimal.master: được sử dụng cho những trang có navigation control riêng hoặc cần thêm không gian cho phần nội dung, chẳng hạn như search center và Office Web Applications.

Bây giờ chúng ta sẽ tiến hành tạo một trang mới với SPD 2010. Trong mục All Files, các bạn click phải vào phần nội dung chính giữa và chọn ASPX để tạo một trang aspx.

spd2010_newpage_5

Hoặc từ ribbon File trên thanh menu

spd2010_newpage_6

Bạn đặt tên và tiêu đề (Title) cho tập tin vừa tạo, trong ngữ cảnh này mình đặt là Page1.aspx. Sau đó, bạn click phải và chọn Edit File in Advanced Mode. Nếu bạn chọn Open thì SPD sẽ chỉ mở tập tin ra cho bạn xem và không cho phép bạn chỉnh sửa trong đó.

spd2010_newpage_7

Bạn xóa hết phần code mặc định cho SPD tạo ra và thay vào đó bằng đoạn code đơn giản như sau:


<%@ Page Language="C#" MasterPageFile="~masterurl/default.master" %>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
 <h2>Hello World</h2>
 <p>This is a very simple page</p>
</asp:Content>

Trong SPD, bạn có thể vừa code vừa xem phần kết quả ngay trong cùng một màn hình.

spd2010_newpage_8

Lưu lại những gì đã làm. Bây giờ bạn truy cập vào hệ thống SharePoint của mình thông qua web browser và trỏ đến trang bạn vừa tạo để xem kết quả.

spd2010_newpage_9

Nhưng mỗi lần muốn truy cập trang Page1.aspx này thì bạn phải gõ vào thành address bar của trình duyệt, bạn không muốn như vậy mà muốn nó nằm cạnh Home chẳng hạn. SharePoint hỗ trợ bạn làm việc này rất nhanh chóng, đó là đưa trang này vào trong navigation bar để quản lý. Từ Site Actions, bạn chọn Site Settings.

spd2010_newpage_10

Trong phần Look and Feel, chọn Top link bar.

spd2010_newpage_11

Chọn New Navigation Link để thêm vào

spd2010_newpage_12

Điền thông tin vào 2 ô với Web Address là địa chỉ tới trang muốn chuyển tới,Description là mô tả cho trang này. Chọn OK để hoàn tất.

spd2010_newpage_13

Bạn có thể chọn Change Order để thay đổi thứ tự của các trang trên navigation bar.

spd2010_newpage_14

Kết quả bây giờ thì trang Page1.aspx (title là Page 1) đã xuất hiện trên navigation bar như mong muốn.

spd2010_newpage_15

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s