[Sharepoint 2010] Membuat kustom add/edit/view form and Custom SaveButton

Anggaplah kita mau develop web application di atas sharepoint 2010. Namun requirement untuk design form membutuhkan customization.

Untuk memenuhi hal ini ada 2 hal (yg saya tahu) yang bisa kita lakukan:

 

1.     Bikin pake formtemplate

2.     Bikin aspx sendiri dgn menggunakan content master page dari sharepoint

 

Di sini saya akan menjelaskan cara membuat customizasi dengan form template:

1.     buka visual studio 2010

2.     create new sharepoint project (Sharepoint 2010 -> Empty SharePoint Project)

3.     di halaman berikutnya, masukkan alamat dari site yang mau kita tambahkan. Dalam contoh saya menggunakan: http://mlpt-sp/my/personal/testingground

4.     Pilih Deploy as a farm solution karena kita akan menggunakan ascx dan ditempatkan di folder ControlTemplate

5.     Setelah project selesai di-load, selanjutnya kita akan membuat content type. Klik kanan pada nama project (SharePointProject1) -> Add -> New Item -> pilih yang Content Type -> kasih nama dan click Add

6.     Pilih base type yang kita inginkan. Karena saya akan membuat untuk custom list jadi saya pilih base type Item, click Finish

7.     Saat berada di file Elements.xml, hapus Inherits="TRUE" dan tambahkan xml berikut setelah tag </FieldRefs>

 

    <XmlDocuments>

      <XmlDocument NamespaceURI="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">

        <FormTemplates xmlns="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">

          <Display>CustomFormTemplates</Display>

          <Edit>CustomFormTemplates</Edit>

          <New>CustomFormTemplates</New>

        </FormTemplates>

      </XmlDocument>

    </XmlDocuments>

 

 

8.     Nama CustomFormTemplates akan kita jadikan id RenderingTemplate di ascx, ini hasil akhir dari file Elements.xml tersebut

 

 

9.     Setelah selesai mengedit file Elements.xml kita tambahkan ascx yang akan kita jadikan template untuk Add/Edit/View nanti. Kembali Klik kanan pada nama project -> Add -> New Item -> pilih yang User Control -> kasih nama apa saja (dalam contoh saya menggunakan UserControl1.ascx) dan click Add

 

 

10.  Di file UserControl1.ascx paste html berikut di paling bawah

 

<%@ Register TagPrefix="wssuc" TagName="ToolBar" src="~/_controltemplates/ToolBar.ascx" %>

<SharePoint:RenderingTemplate ID="CustomFormTemplates" runat="server">

    <Template>

        <span id='part1'>

            <SharePoint:InformationBar ID="InformationBar1" runat="server" />

            <div id="listFormToolBarTop">

                <wssuc:ToolBar CssClass="ms-formtoolbar" ID="toolBarTbltop" RightButtonSeparator="&amp;#160;"

                    runat="server">

                    <Template_RightButtons>

                        <SharePoint:NextPageButton ID="NextPageButton1" runat="server" />

                        <SharePoint:SaveButton ID="SaveButton1" runat="server" />

                        <SharePoint:GoBackButton ID="GoBackButton1" runat="server" />

                    </Template_RightButtons>

                </wssuc:ToolBar>

            </div>

            <SharePoint:FormToolBar ID="FormToolBar1" runat="server" />

            <SharePoint:ItemValidationFailedMessage ID="ItemValidationFailedMessage1" runat="server" />

            <table class="ms-formtable" style="margin-top: 8px;" border="0" cellpadding="0" cellspacing="0"

                width="100%">

                <SharePoint:FolderFormFields ID="FolderFormFields1" runat="server" />

                <h2>Custom Form Template</h2>

                <SharePoint:FormComponent ID="FormComponent1" TemplateName="AttachmentRows" runat="server" />

            </table>

            <table cellpadding="0" cellspacing="0" width="100%">

                <tr>

                    <td class="ms-formline">

                        <img src="/_layouts/images/blank.gif" width='1' height='1' alt="" />

                    </td>

                </tr>

            </table>

            <table cellpadding="0" cellspacing="0" width="100%" style="padding-top: 7px">

                <tr>

                    <td width="100%">

                        <SharePoint:ItemHiddenVersion ID="ItemHiddenVersion1" runat="server" />

                        <SharePoint:ParentInformationField ID="ParentInformationField1" runat="server" />

                        <wssuc:ToolBar CssClass="ms-formtoolbar" ID="toolBarTbl" RightButtonSeparator="&amp;#160;"

                            runat="server">

                            <Template_Buttons>

                                <SharePoint:CreatedModifiedInfo ID="CreatedModifiedInfo1" runat="server" />

                            </Template_Buttons>

                            <Template_RightButtons>

                                <SharePoint:SaveButton ID="SaveButton2" runat="server" />

                                <SharePoint:GoBackButton ID="GoBackButton2" runat="server" />

                            </Template_RightButtons>

                        </wssuc:ToolBar>

                    </td>

                </tr>

            </table>

        </span>

        <SharePoint:AttachmentUpload ID="AttachmentUpload1" runat="server" />

    </Template>

</SharePoint:RenderingTemplate>

 

11.  Pindahkan file UserControl1.ascx ini dari folder SharePointProject1 ke ControlTemplates

12.  Sekarang kita buat WebControl untuk SaveButton. Sekali lagi klik kanan pada nama project -> Add -> New Item -> di installed templates klik Code -> sebagai contoh kita beri nama class ini CustomSaveButton -> klik Add

13. Di halaman CustomSaveButton.cs rubah akses class ini jadi Public dengan menambahkan kata tersebut di depan kata class kita perlu inherits control ini dari class Microsoft.SharePoint.WebControls.SaveButton

14.  Override method SaveItem yang terdapat di inherits class. Disini kita bisa tambahkan custom code yang kita inginkan.

 

 

15.  Kembali ke file UserControl1.ascx disini kita akan ganti tombol SaveButton dengan SaveButton yang sudah kita buat tadi. Tambahkan tagprefix ini diatas

<%@ Register Assembly="$SharePoint.Project.AssemblyFullName$" Namespace="SharePointProject1" TagPrefix="cusa" %>

16.  Ganti <SharePoint:SaveButton menjadi <cusb:CustomSaveButton sehingga menjadi seperti ini

<cusa:CustomSaveButton ID="SaveButton1" runat="server" />

17.  Set trust level di sharepoint site target kita menjadi Full

18.  Deploy solution kita dengan cara klik kanan pada project name (SharePointProject1) -> klik Deploy

19.  Run iisreset

20.  Kita coba dengan membuat Custom List dan kita set agar list ini bisa memakai content type lain dari menu List Settings -> Advance Settings -> pada Allow management of content types, pilih yang yes -> lalu klik OK

21.  Kembali ke menu List Settings klik Add from existing site content type pilih content type yang sudah kita buat tadi dalam contoh saya menggunakan nama SharePointProject1 – CustomFormWithSaveButton

 

 

22.  Sekarang kita coba form ini dengan klik panah New dan pilih My Content Type seperti gambar dibawah

 

 

Setelah tombol Save di tekan:

 

 

Jika form tersebut masih sama seperti aslinya, coba lihat kembali step2 diatas.

Jika toolbar di form tersebut berwarna abu2, lihat event viewer seperti dibawah ini

Share this post: | | | |

Comments

# re: [Sharepoint 2010] Membuat kustom add/edit/view form and Custom SaveButton

Thursday, November 17, 2011 12:01 PM by Ariwibawa

Page_Load tidak jalan kalo menggunakan metode ini?

Saya mengakali dengan bikin literal control dan di set event onload ke Page_Load

- Sudah saya pake Autoeventwireup=true

- Sudah bikin instance baru dan di set event load ke Page_Load tetep ga jalan

Jadi kesimpulan saya page_load itu tidak dijalankan karena menggunakan renderingtemplate

Powered by Community Server (Commercial Edition), by Telligent Systems