Visual Studio 2010 공식 팀 블로그 @vsts2010

이전 블로그에서는 javascript로 SharePoint 항목의 데이터를 추가하는 것을 알아보았는데 이번 블로그에서는 공지사항 목록을 생성하는 내용을 알아보겠습니다. 여기까지 Client Object Model을 살펴보시면 SharePoint Server Object Model의 내용을 그대로 원격 클라이언트 위에서도 사용이 가능하다는 것을 알 수 있습니다.

Visual Studio 2010을 이용해서 빈 SharePoint 프로젝트를 생성하여 Application Page를 추가합니다. 추가한 페이지에 아래와 같은 코드를 작성하고 결과를 확인해봅니다.

추가한 Application Page 의 PageHead content 부분에 아래 내용을 추가합니다.

<SharePoint:ScriptLink ID="ScriptLink1" Name="SP.js" runat="server" OnDemand="true"

    Localizable="false" />

목록을 생성하는 자바 스크립트 코드를 바로 아래 부분에 추가합니다.

<script language="javascript" type="text/javascript">

function CreateList() {

        var clientContext = new SP.ClientContext.get_current();

        var site = clientContext.get_web();

        //공지사항 목록 생성

        var listCreationInfo = new SP.ListCreationInformation();

        listCreationInfo.set_title("HJ2");

        listCreationInfo.set_templateType(SP.ListTemplateType.announcements);

        listCreationInfo.set_quickLaunchOption(SP.QuickLaunchOptions.on);

        site.get_lists().add(listCreationInfo);

        clientContext.executeQueryAsync(Function.createDelegate(this, this.onSucceeded)

        , Function.createDelegate(this, this.onFailed));

    }

function onSucceeded(sender, args) {

        alert("Succeeded");

    }

function onFailed(sender, args) {

        alert("Failed");

    }

      </script>

목록을 생성하는 코드는 바로 아래 내용입니다. SP.ListCreationInformation을 이용해서 Title과 TemplateType, 빠른 실행 표시를 지정하고 있습니다.

var listCreationInfo = new SP.ListCreationInformation();

listCreationInfo.set_title("HJ2");

listCreationInfo.set_templateType(SP.ListTemplateType.announcements);

listCreationInfo.set_quickLaunchOption(SP.QuickLaunchOptions.on);

실제 생성된 내용을 적용하는 코드입니다.

site.get_lists().add(listCreationInfo);

서버 개체 모델에서 본 것과 거의 동일하다는 것을 알 수 있습니다.

Application Page 의 Main content 부분에 아래 내용을 추가해서 CreateList() 를 호출합니다.

    <input id="Button1" type="button" value="Create List"  onclick=" CreateList()" />

 솔루션 탐색기를 오른쪽 클릭하여 배포를 선택하고 해당 Application Page를 액세스 해서 결과를 확인합니다.

HJ2 라는 공지사항이 생성되어 있고 빠른 실행에 표시되는지 확인합니다.

이상으로 Client Object Model중에서 JavaScript 를 이용한 내용을 알아보았습니다.

이번 블로그는 SharePoint 2010의 데이터 기술 중에서 Client Object Model의 마지막 javascript에 대한 내용을 다루어 보겠습니다.

Javascript는 sp.js를 통해 SharePoint 개체를 접근할 수 있습니다.

SharePoint 2010 프로젝트를 통해 알아보도록 하겠습니다.

빈 SharePoint 프로젝트를 생성하면서 프로젝트 이름을 아래와 같이 “javascriptOM”이라고 합니다.

SharePoint 2010 사이트 주소를 입력하고 Farm Solution 으로 지정합니다.

프로젝트에서 Application Page를 추가하도록 합니다. 솔루션 탐색기에서 오른쪽 클릭해서 추가, 새 항목을 클릭해서 Application Page를 선택하고 이름은 “ClientOM.aspx”라고 지정합니다.

생성된 Application page의 HTML 소스의 Main 부분에 아래와 같은 HTML 코드를 작성합니다.

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">

<SharePoint:FormDigest ID="FormDigest1" runat="server"></SharePoint:FormDigest>

 

<table>

<tr>

<td>Title:</td>

<td><input id="txtTitle" type="text" /></td>

</tr>

<tr>

<td>Body:</td>

<td><input id="txtBody" type="text" /></td>

</tr>

<tr>

<td colspan="2">  

<input id="btnGo" type="button" value="Javascript Client OM" onclick="javascript:execOM();" />

</td>

</tr>

</table>

</asp:Content>

 

FormDigest 는 SharePoint 데이터를 변경하려고 할 경우 보안의 유효성 검사를 위해 추가해야 합니다.

 

<asp:Content ID="PageHead" 바로 아래 부분에 도구 상자에서 SharePoint Controls 부분에서 ScriptLink를 드래그하고 아래와 같이 속성을 정의합니다.

 

<SharePoint:ScriptLink ID="ScriptLink1" Name="SP.js" runat="server" OnDemand="true"

    Localizable="false" />

 

SharePoint:ScriptLink  아래 부분에 버튼의 onClick 이벤트에 있는 javascript를 작성합니다.

SP.js를 통해 Client Object Model 을 JavaScript를 통해 액세스하는데 HJ라는 공지사항에 항목을 생성하는 내용이며 아래 코드와 같습니다.

 

 

<script language="javascript" type="text/javascript">

    function AddHJItem() {

        var context = new SP.ClientContext.get_current();

        this.site = context.get_web();

        context.load(this.site);

        this.list = site.get_lists().getByTitle("HJ");

        context.load(this.list);

        var listitemCI = new SP.ListItemCreationInformation();

        var item = list.addItem(listitemCI);

        item.set_item("Title", document.getElementById("txtTitle").value);

        item.set_item("Body", document.getElementById("txtBody").value);

        item.update();

        context.executeQueryAsync(Function.createDelegate(this, this.Succeeded)

        , Function.createDelegate(this, this.Failed));

    }

    function Succeeded(sender, args) {

        alert("Succeeded");

    }

    function Failed(sender, args) {

        alert("Failed");

    }

</script>

 

 

 

프로젝트를 배포하고 웹 브라우저를 통해 액세스 해서 텍스트 박스에 값을 입력하고 버튼을 클릭합니다

HJ 공지 사항에서 보면 Javascript를 통해 SharePoint 2010의 공지 사항 항목이 생성된 것을 확인할 수 있습니다.

이상으로 javascript를 통한 SharePoint 2010의 목록을 추가하는 내용을 살펴보았습니다.