Client Object Model - Javascript(1)

UPDATE 다른 곳에 썻던 내용을 이곳에 통합하기 위해 옮겼습니다.

이번 블로그는 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의 목록을 추가하는 내용을 살펴보았습니다.