Membuat People Editor di Webpart Sharepoint


sharepointSharepoint sudah menyediakan sebuah fungsi/dialog untuk melakukan pencarian terhadap user. Komponen ini dinamakan People Editor atau ada pula yang menyebutnya People Picker, sampai saat ini saya belum tahu apa perbedaan keduanya🙂. Salah satu kasus yang memerlukan komponen ini adalah misalkan pengguna sharepoint ingin melakukan query pada list dengan kriteria Created By. Nah Created By ini biasanya diisi dengan nama user yang diawali dengan domain(“domain/username”). Kalau pengguna mengetikkan nilainya secara langsung dalam sebuah textfield itu kemungkinan kesalahannya cukup besar.

Dalam posting ini saya akan menjelaskan bagaimana cara membuat WebPart yang ada komponen People Editornya ini. Saya ingin coba jelaskan dari awal banget tapi takutnya tidak terlalu fokus pada inti permasalahan. Jadi penjelasannya akan saya mulai dari kondisi  di visual studio sudah ada project sharepoint dengan item visual webpartnya (saya asumsikan pembaca sudah mengetahui cara membuat projek sharepoint dan menambahkan item visual webpart).

Hanya ada dua file yang akan kita oprek2 dalam penjelasan kali ini yaitu, file ascx dan cs pada visual webpart. Jika pembaca membuat sebuah webpart dengan nama Searcher, maka file yang akan kita ‘mainkan’ adalah SearcherUserControl.ascx dan SearcherUserControl.ascx.cs.

Yang pertama kita akan tambahkan beberapa komponen pada file SearcherUserControl.ascx nya (termasuk People Editor). Berikut ini scrip lengkapnya.

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SearcherUserControl.ascx.cs" Inherits="SharePointProject1.Searcher.SearcherUserControl" %>
<%@ Register Tagprefix="windu" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<style  type="text/css">
    .ms-inputuserfield{ font-size:8pt; font-family:Verdana,sans-serif; border:1px solid #a5a5a5;}
    div.ms-inputuserfield a{color:#000000;text-decoration: none;font-weight:normal;font-style:normal;}
    div.ms-inputuserfield{padding-left:1px;padding-top:2px;}
</style>

<table id="Table1">
    <tr>
        <td>Year</td>
        <td><asp:TextBox ID="TxtYear" runat="server" Width="184px" /></td>
    </tr>
    <tr>
        <td>Name</td>
        <td>
            <windu:PeopleEditor ID="PeopleEditor1" runat="server" width="250px" AllowEmpty="true" MultiSelect="false" SelectionSet="User"/>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        </td>
        <td><asp:Button ID="Button1" runat="server" Text="Search" onclick="Button1_Click" /></td>
    </tr>
</table>

Berikut ini point2 penting yang harus diperhatikan:

<%@ Register Tagprefix=”windu” Namespace=”Microsoft.SharePoint.WebControls” Assembly=”Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>

Kode di atas gunanya untuk mendaftarkan library yang akan digunakan untuk membuat komponen PeopleEditor.

<windu:PeopleEditor ID=”PeopleEditor1″ runat=”server” width=”250px” AllowEmpty=”true” MultiSelect=”false” SelectionSet=”User”/>

Kode di atas untuk me-render komponen PeopleEditor.

<style  type=”text/css”>
    .ms-inputuserfield{ font-size:8pt; font-family:Verdana,sans-serif; border:1px solid #a5a5a5;}
    div.ms-inputuserfield a{color:#000000;text-decoration: none;font-weight:normal;font-style:normal;}
    div.ms-inputuserfield{padding-left:1px;padding-top:2px;}
</style>

Scrip css di atas agar people editorn ada bordernya.

Sedangkan kode2 yang lainnya hanya script untuk membuat tabel dan label yang sudah biasa pembaca buat🙂 Sampai tahap ini pembaca sudah bisa melihat tampilan dari PeopleEditor. Kalau tidak percaya silahkan coba jalankan saja.

Pada tahapan kedua kita akan membuat syntaks C# untuk mengambil nilai dari PeopleEditor. Dalam tahap ini kita akan bermain dengan file yang lain yaitu SearcherUserControl.ascx.cs. Double click button Search (akan terlihat jika mode design atau split diaktifkan). Kita akan dibawa ke dalam event pemilihan button search, nah di sinilah kita akan menaruh beberapa code C#. Kode lengkapnya seperti ini.

if (PeopleEditor1.ResolvedEntities.Count > 0)
   {
      PickerEntity pickerEntity = (PickerEntity)PeopleEditor1.ResolvedEntities[0];
      Hashtable hash = pickerEntity.EntityData;
      TxtYear.Text = hash["AccountName"].ToString();
   }

Dalam potongan di atas, kita mengambil nilai hasil pemilihan oleh user kemudian menampilkannya di dalam field Year. Hasilnya kuran lebih seperti ini.

people editor

Jika dalam posting ini ada yang menyalahi konsep yang sebenernya atau ada solusi yang lebih baik silahkan dikoreksi. Wallohu’alam…

About windupurnomo

I'm interested in programming. I am active with several programming such as Java, C #, C, JavaScript, HTML. I'm also develop desktop application (Java Swing), Mobile Application (Android), and Web programming (ASP MVC).
This entry was posted in C#, Microsoft, Sharepoint and tagged , , , , , , , . Bookmark the permalink.

2 Responses to Membuat People Editor di Webpart Sharepoint

  1. Anak Baru says:

    wew kk wew….
    Sharepoint cuy….

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