다음을 통해 공유

연습: 디자이너를 사용하여 SharePoint를 위한 웹 파트 만들기

  • 아티클

SharePoint 사이트용 웹 파트를 만들면 사용자는 브라우저를 사용하여 해당 사이트에 있는 페이지의 콘텐츠, 모양, 동작을 직접 수정할 수 있습니다. 이 연습에서는 Visual Studio에서 SharePoint 비주얼 웹 파트 프로젝트 템플릿을 사용하여 웹 파트를 시각적으로 만드는 방법을 보여 줍니다.

만들 웹 파트는 월별 달력 보기와 각 달력 목록의 확인란을 사이트에 표시합니다. 사용자는 확인란을 선택하여 월별 달력 보기에 포함할 달력 목록을 지정할 수 있습니다.

이 연습에서는 다음 작업을 수행합니다.

  • 비주얼 웹 파트 프로젝트 템플릿을 사용하여 웹 파트를 만듭니다.

  • Visual Studio의 Visual Web Developer 디자이너를 사용하여 웹 파트를 디자인합니다.

  • 웹 파트에 있는 컨트롤의 이벤트를 처리하는 코드를 추가합니다.

  • SharePoint에서 웹 파트를 테스트합니다.

    참고 항목

    Visual Studio 사용자 인터페이스의 일부 요소의 경우 다음 지침에 설명된 것과 다른 이름 또는 위치가 시스템에 표시될 수 있습니다. 이러한 요소는 사용하는 Visual Studio 버전 및 설정에 따라 결정됩니다. Visual Studio IDE 개인 설정을 참조하세요.

필수 조건

이 연습을 완료하려면 다음과 같은 구성 요소가 필요합니다.

  • 지원되는 Windows 및 SharePoint 버전.

웹 파트 프로젝트 만들기

먼저 비주얼 웹 파트 프로젝트 템플릿을 사용하여 웹 파트 프로젝트를 만듭니다.

  1. 관리자 권한으로 실행 옵션을 사용하여 Visual Studio를 시작합니다.

  2. 메뉴 모음에서 파일>새로 만들기>프로젝트를 선택합니다.

  3. 새 프로젝트 만들기 대화 상자에서 설치된 SharePoint 특정 버전의 ‘SharePoint 빈 프로젝트’*를 선택합니다. 예를 들어 SharePoint 2019를 설치하는 경우 SharePoint 2019 - 빈 프로젝트 템플릿을 선택합니다.

    참고 항목

    새 프로젝트 만들기 대화 상자의 위쪽에 있는 검색 텍스트 상자에 SharePoint를 입력하여 템플릿을 검색할 수도 있습니다. 프로젝트 형식 드롭다운 상자에서 “Office”를 선택하여 Office 및 SharePoint의 템플릿만 표시하도록 템플릿 목록을 필터링할 수도 있습니다. 자세한 내용은 Visual Studio에서 새 프로젝트 만들기를 참조하세요.

  4. 이름 상자에 TestProject1을 입력하고 만들기 단추를 선택합니다.

  5. 이 SharePoint 솔루션의 신뢰 수준을 선택하세요. 섹션에서 팜 솔루션으로 배포 옵션 단추를 선택합니다.

  6. 마침 단추를 선택하여 기본 로컬 SharePoint 사이트를 적용합니다.

웹 파트 디자인

도구 상자에서 Visual Web Deveolper 디자이너의 화면에 컨트롤을 추가하여 웹 파트를 디자인합니다.

  1. Visual Web Developer 디자이너에서 디자인 탭을 선택하여 디자인 보기로 전환합니다.

  2. 메뉴 모음에서 보기>도구 상자를 선택합니다.

  3. 도구 상자의 표준 노드에서 CheckBoxList 컨트롤을 선택하고 다음 단계 중 하나를 수행합니다.

    • CheckBoxList 컨트롤 바로 가기 메뉴를 열고, 복사를 선택하고, 디자이너 첫 번째 줄의 바로 가기 메뉴를 연 다음 붙여넣기를 선택합니다.

    • 도구 상자에서 CheckBoxList 컨트롤을 끌고 디자이너의 첫 번째 줄에 컨트롤을 연결합니다.

  4. 이전 단계를 반복하되 단추를 디자이너의 다음 줄로 이동합니다.

  5. 디자이너에서 Button1 단추를 선택합니다.

  6. 메뉴 모음에서 보기>속성 창을 선택합니다.

    속성 창이 열립니다.

  7. 단추의 Text 속성에서 Update를 입력합니다.

웹 파트에 있는 컨트롤의 이벤트 처리

사용자가 마스터 달력 보기에 달력을 추가하는 데 사용할 수 있는 코드를 추가합니다.

  1. 다음 단계 중 하나를 수행합니다.

    • 디자이너에서 업데이트 단추를 두 번 클릭합니다.

    • 업데이트 단추의 속성 창에서 이벤트 단추를 선택합니다. 클릭 속성에서 Button1_Click을 입력한 다음 Enter 키를 선택합니다.

      사용자 정의 컨트롤 코드 파일이 코드 편집기에서 열리고 Button1_Click 이벤트 처리기가 나타납니다. 나중에 이 이벤트 처리기에 코드를 추가합니다.

  2. 사용자 정의 컨트롤 코드 파일 맨 위에 다음 문을 추가합니다.

    using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Web.UI.WebControls;

  3. 다음 코드 줄을 VisualWebPart1 클래스 맨 위에 추가합니다. 이 코드는 월별 달력 보기 컨트롤을 선언합니다.

    private MonthlyCalendarView MonthlyCalendarView1;

  4. VisualWebPart1 클래스의 Page_Load 메서드를 다음 코드로 바꿉니다. 이 코드는 다음 작업을 수행합니다.

    • 사용자 정의 컨트롤에 월별 달력 보기를 추가합니다.

    • 사이트의 각 달력 목록에 대한 확인란을 추가합니다.

    • 달력 보기에 표시되는 각 항목 형식에 대한 템플릿을 지정합니다.

      protected void Page_Load(object sender, EventArgs e)
{
    MonthlyCalendarView1 = new MonthlyCalendarView();
    this.Controls.Add(MonthlyCalendarView1);
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    if (CheckBoxList1.Items.Count == 0)
    {
        foreach (SPList listItem in thisWeb.Lists)
        {
            if (listItem.BaseTemplate == SPListTemplateType.Events)
            {
                CheckBoxList1.Items.Add(new ListItem(listItem.Title));
            }
        }
    }
    MonthlyCalendarView1.ItemTemplateName =
        "CalendarViewMonthItemTemplate";
    MonthlyCalendarView1.ItemAllDayTemplateName =
        "CalendarViewMonthItemAllDayTemplate";
    MonthlyCalendarView1.ItemMultiDayTemplateName =
        "CalendarViewMonthItemMultiDayTemplate";
}

  5. VisualWebPart1 클래스의 Button1_Click 메서드를 다음 코드로 바꿉니다. 이 코드는 선택한 각 달력의 항목을 마스터 달력 보기에 추가합니다.

    protected void Button1_Click(object sender, EventArgs e)
{
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    foreach (ListItem item in CheckBoxList1.Items)
    {
        if (item.Selected == true)
        {
            SPList calendarList = thisWeb.Lists[item.Text];
            DateTime dtStart = DateTime.Now.AddDays(-7);
            DateTime dtEnd = dtStart.AddMonths(1).AddDays(7);
            SPQuery query = new SPQuery();
            query.Query = String.Format(
                "<Query>" +
                "<Where><And>" +
                "<Geq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{1}</Value></Geq>" +
                "<Leq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{2}</Value></Leq>" +
                "</And></Where><OrderBy><FieldRef Name=\"{0}\" /></OrderBy>" +
                "</Query>",
                "Start Time",
                dtStart.ToShortDateString(),
                dtEnd.ToShortDateString());

            foreach (SPListItem listItem in calendarList.GetItems(query))
            {
                SPCalendarItem calItem = new SPCalendarItem();
                calItem.ItemID = listItem["ID"].ToString();
                calItem.Title = listItem["Title"].ToString();
                calItem.CalendarType = Convert.ToInt32(SPCalendarType.Gregorian);
                calItem.StartDate = (DateTime)listItem["Start Time"];
                calItem.ItemID = listItem.ID.ToString();
                calItem.WorkSpaceLink = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.DisplayFormUrl = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.EndDate = (DateTime)listItem["End Time"];
                calItem.Description = listItem["Description"].ToString();
                if (listItem["Location"] != null)
                {
                    calItem.Location = listItem["Location"].ToString();
                }
                items.Add(calItem);
            }
            MonthlyCalendarView1.DataSource = items;
        }

    }

}

웹 파트 테스트

프로젝트를 실행하면 SharePoint 사이트가 열립니다. 웹 파트는 SharePoint의 웹 파트 갤러리에 자동으로 추가됩니다. 이 프로젝트를 테스트하려면 다음 작업을 수행합니다.

  • 두 개의 개별 달력 목록 각각에 이벤트를 추가합니다.
  • 웹 파트 페이지에 웹 파트를 추가합니다.
  • 월별 달력 보기에 포함할 목록을 지정합니다.

사이트의 달력 목록에 이벤트를 추가하려면

  1. Visual Studio에서 F5 키를 선택합니다.

    SharePoint 사이트가 열리고 Microsoft SharePoint Foundation 빠른 실행 표시줄이 페이지에 나타납니다.

  2. 빠른 실행 표시줄의 목록에서 달력 링크를 선택합니다.

    캘린더 페이지가 표시됩니다.

    빠른 실행 표시줄에 달력 링크가 표시되지 않는 경우 사이트 콘텐츠 링크를 선택합니다. 사이트 콘텐츠 페이지에 달력 항목이 표시되지 않으면 달력 항목을 만듭니다.

  3. 달력 페이지에서 일을 선택한 다음 선택한 날짜의 추가 링크를 선택하여 이벤트를 추가합니다.

  4. 제목 상자에 Event in the default calendar를 입력한 후 저장 단추를 선택합니다.

  5. 사이트 콘텐츠 링크를 선택하고 앱 추가 타일을 선택합니다.

  6. 만들기 페이지에서 달력 형식을 선택하고 달력 이름을 지정한 다음 만들기 단추를 선택합니다.

  7. 새 달력에 이벤트를 추가하고 Event in the custom calendar로 이벤트 이름을 지정한 다음 저장 단추를 선택합니다.

웹 파트 페이지에 웹 파트를 추가하려면

  1. 사이트 콘텐츠 페이지에서 Site Pages 폴더를 엽니다.

  2. 리본 메뉴에서 파일 탭을 선택하고 새 문서 메뉴를 연 다음 웹 파트 페이지 명령을 선택합니다.

  3. 새 웹 파트 페이지 페이지에서 페이지 이름을 SampleWebPartPage.aspx로 지정한 다음 만들기 단추를 선택합니다.

    웹 파트 페이지가 표시됩니다.

  4. 웹 파트 페이지 위쪽에서 삽입 탭을 선택한 다음 웹 파트 단추를 선택합니다.

  5. Custom 폴더에서 VisualWebPart1 웹 파트를 선택한 다음 추가 단추를 선택합니다.

    웹 파트가 페이지에 표시됩니다. 웹 파트에 표시되는 컨트롤은 다음과 같습니다.

    • 월별 달력 보기.

    • 업데이트 단추.

    • 달력 확인란.

    • 사용자 지정 달력 확인란.

월별 달력 보기에 포함할 목록을 지정하려면

웹 파트에서 월별 달력 보기에 포함할 달력을 지정한 다음 업데이트 단추를 선택합니다.

지정한 모든 달력의 이벤트가 월별 달력 보기에 표시됩니다.

참고 항목

SharePoint용 웹 파트 만들기방법: SharePoint 웹 파트 만들기연습: SharePoint용 웹 파트 만들기