Latest News Blog

Follow our News Blog
where we share our knowledge

We will be posting about latest technology, techniques, tips & tricks, design and many more,
you are invited to join us too!
Friday, 31 January 2014 09:47

Mengenal JavaScript Object Model untuk manipulasi data di Sharepoint

Written by

Halo guys, Belakangan ini rajin banjir ya Jakarta, ya semoga biar dingin begini tetep anget kepalanya yah… ;) Kali ini kita coba mengenal beberapa metode untuk mengakses data di sharepoint server 2013.

Mungkin dulu temen-temen udah kenal beberapa framework dibawah ini yah:

  1. Sharepoint Object Model (SOM)
    Menggunakan server side code untuk mengakses data di dalam sharepoint.
    • Kelemahan : kudu ditaroh di server ini codingnya, relative lebih lambat daripada metode yang lain
    • Kelebihan : lengkap pisan librarynya
  2. Sharepoint Client Object Model
    Nah dengan library ini kita bisa taruh code kita diluar sharepoint site seperti desktop app, website, console app, windows service, dsb
    • Kelebihan: Relatif lebih cepat untuk melakukan operasi data. Cara pake miriplah sama class yang ada di SOM
    • Kekurangan : Masih belom selengkap SOM.
  3. Sharepoint JavaScript Object Model
    ini Cuma bisa dipake di atas halaman yang dihost di sharepoint portal, karena dia butuh ngambil contextnya.
    • Kelebihan : kenceng tenan ga perlu callback segala.
    • Kekurangan : ya ga selengkap SOM dan Client Object Model.
  4. REST/Odata
    nah yang ini emang lagi nge-trend untuk support pengembangan dengan berbagai platform karena hanya menggunakan metode GET, POST, PUT/MERGE, DELETE Http command. Responnya bisa berupa XML (ATOM) atau JSON. Bisa digunakan untuk melakukan manipulasi data. Buat developer mobile cucok lah.
    • Kelebihan : Dapat digunakan oleh multiplatform dari mobile-desktop-web, dan dengan bahasa macem-macem selama mendukung akses http.
    • Kekurangan: Ya seperti biasa tidak selengkap SOM dan COM.

Kali ini kita ga akan ngomongin semua tapi focus ngomongin gimana cara pakai JSOM alias JavaScript Object Model di Sharepoint. Oke mari kita coba sama2, ikutin nih stepnya:

  1. Buka sharepoint portal abang
  2. Bikin custom list dengan struktur kaya begini

    js 0
  3. Kemudian bikin halaman baru dengan tipe Article Page. Kemudian edit.

    js 1
  4. Lalu pilih Edit Source di ribbon, lalu masukin kode dibawah ini.

    js 2

    <style> 
    .Tombol {
    cursor: pointer;
    text-align: center;
    vertical-align: central;
    border-radius: 3px 4px;
    width: 80px;
    height: 20px;
    background-color: silver;
    }
    .Tombol:hover {
    background-color: red;
    color: white;
    box-shadow: black 3px 3px;
    }
    .tabel {
    border-collapse:collapse;
    border:none;
    }
    .tabel th {
    border:none;
    background-color:#00a;
    color:#fff;
    text-align:left;
    }
    .tabel td {
    border:none;
    }
    .tabel tr:nth-of-type(even) {
    background-color:#ccccff;
    }
    .tabel tr:nth-of-type(odd) {
    background-color:#99bbee;
    }
    </style>
    <div id="btnLoad" class="Tombol">Load Data</div><br />
    <div id="btnUpdate" class="Tombol">Update Data</div><br />
    <div id="btnAdd" class="Tombol">Add Data</div><br />
    <div id="btnDelete" class="Tombol">Delete Data</div><br />
    <div id="Result">Data will be showed up here..</div>
  5. Trus di bagian bawah halaman, masukin webpart. Click tab Insert > Pilih Web Part. Trus cari kategori Media and Content, masukin tuh Content Editor

    js 3

  6. Trus klik di Content Editor yang baru dimasukin, di Ribbon pilih Insert > Embed Code, trus masukin script dibawah ini

    js 4

    <script src = "/http://code.jquery.com/jquery-1.10.1.min.js" > < /script>
    <script src = "/http://code.jquery.com/jquery-migrate-1.2.1.min.js" > < /script>
    <script type = "text/javascript" >
    //script initialize
    $(document).ready(function() {
    hostweburl = 'http://predator';<br< a=""> /> var scriptbase = hostweburl + "/_layouts/15/";
    $.getScript(scriptbase + "SP.Runtime.js", function() {
    $.getScript(scriptbase + "SP.js", scriptLoaded);
    });
    });
    function scriptLoaded() {
    alert('SP script has been loaded');
    //do nothing
    }
    //initialize end
    //load data start
    var items;
    function getItems() {
    //ambil konteks
    context = new SP.ClientContext.get_current();
    //ambil list
    var list = context.get_web().get_lists().getByTitle('Siswa');
    //bikin query caml
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query></Query>' + '<RowLimit>10</RowLimit></View>');
    //tarik data berdasarkan caml
    items = list.getItems(camlQuery);
    context.load(items);
    context.executeQueryAsync(onGetListItemsSuccess, onFailed);
    }
    function onGetListItemsSuccess() {
    var TableStr = "<table class='tabel'>";
    TableStr += '<tr><th>Nama</th><th>No Induk</th><th>Tanggal Lahir</th></tr>';
    //iterasi data bentuk jadi tabel html
    var listItemEnumerator = items.getEnumerator();
    while (listItemEnumerator.moveNext()) {
    TableStr += "<tr>";
    var item = listItemEnumerator.get_current();
    TableStr += '<td>' + item.get_item('Title') + '</td>';
    TableStr += '<td>' + item.get_item('NoInduk') + '</td>';
    TableStr += '<td>' + item.get_item('TanggalLahir') + '</td>';
    TableStr += "</tr>";
    }
    TableStr += '</table>';
    //set tabel ke div konten
    $("#Result").html(TableStr);
    }
    function onFailed(sender, args) {
    alert('data gagal tarik:' + args.get_message());
    }
    //load data end
    //update data start
    var updatedListItem;
    function UpdateData(FID) {
    //ambil konteks
    context = new SP.ClientContext.get_current();
    //ambil list
    var list = context.get_web().get_lists().getByTitle('Siswa');
    //ambil item berdasar id item
    updatedListItem = list.getItemById(FID);
    //set item value
    updatedListItem.set_item('Title', 'Nama diupdate!!');
    updatedListItem.set_item('NoInduk', '199');
    updatedListItem.set_item('TanggalLahir', '11/11/2011');
    //update item
    updatedListItem.update();
    context.load(updatedListItem);
    context.executeQueryAsync(onUpdateListItemsSuccess, onUpdateListItemsFail);
    }
    function onUpdateListItemsSuccess() {
    getItems();
    alert('Data berhasil di update: ' + updatedListItem.get_id());
    }
    function onUpdateListItemsFail(sender, args) {
    alert('Gagal Update data. Error:' + args.get_message());
    }
    //update data end
    //add data start
    var newListItem;
    function createItems(nama, noinduk, tgllahir) {
    //ambil konteks
    context = new SP.ClientContext.get_current();
    //ambil list
    var list = context.get_web().get_lists().getByTitle('Siswa');
    var itemCreateInfo = new SP.ListItemCreationInformation();
    //tambah item dan set item value
    newListItem = list.addItem(itemCreateInfo);
    newListItem.set_item('Title', nama);
    newListItem.set_item('NoInduk', noinduk);
    newListItem.set_item('TanggalLahir', tgllahir);
    //update item
    newListItem.update();
    context.load(newListItem);
    context.executeQueryAsync(onCreateListItemsSuccess, onCreateListItemsFail);
    }
    function onCreateListItemsSuccess() {
    getItems();
    alert('Data baru berhasil masuk: ' + newListItem.get_id());
    }
    function onCreateListItemsFail(sender, args) {
    alert('Gagal tambah data. Error:' + args.get_message());
    }
    //add data end
    //delete data start
    var deletedID;
    function deleteData(FID) {
    //ambil konteks
    context = new SP.ClientContext.get_current();
    //ambil list
    var list = context.get_web().get_lists().getByTitle('Siswa');
    deletedListItem = list.getItemById(FID);
    deletedID = FID;
    //delete item
    deletedListItem.deleteObject();
    context.executeQueryAsync(ondeleteListItemsSuccess, ondeleteListItemsFail);
    }
    function ondeleteListItemsSuccess() {
    getItems();
    alert('Data berhasil di delete: ' + deletedID);
    }
    function ondeleteListItemsFail(sender, args) {
    alert('Gagal delete data. Error:' + args.get_message());
    }
    //delete data end
    //button load d klik
    $("#btnLoad").click(function() {
    getItems();
    });
    //button add d klik
    $("#btnAdd").click(function() {
    createItems('Asep baru', '101', '10/10/2010');
    });
    //button update d klik
    $("#btnUpdate").click(function() {
    UpdateData(1);
    });
    //button delete d klik
    $("#btnDelete").click(function() {
    deleteData(2);
    }); < /script>
  7. Tada…. Bereslah…
    js 5

Penjelasan singkat, sebenernya cara kerjanya simple. Untuk memastikan JSOM jalan dia butuh referensi ke dua file berikut:

<script type="text/javascript" src="/_layouts/15/sp.runtime.debug.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.debug.js"></script>

Terus sebelom dia melakukan operasi manipulasi data kita butuh dapetin context si sharepoint dengan cara:

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

Abis itu bebas deh mo query data, edit, delete dan sebagainya. Baca aja scriptnya, udah jelas kok ada komentarnya disana.

Kalau takut salah copy paste ni download aja disini sourcenya.

Salam joss.

Adiel

© Copyright 2019 PT. Gravicode Multinovative Plexindo. All Rights Reserved.

Explore

Reach Us

This email address is being protected from spambots. You need JavaScript enabled to view it.