Membuat Sharepoint Custom Form dari UserControl dengan cara FormTemplates di Visual Studio 2010

Navigation

Membuat Sharepoint Custom Form dari UserControl dengan cara FormTemplates di Visual Studio 2010

Membuat Sharepoint Custom Form dari UserControl dengan cara FormTemplates di Visual Studio 2010 :

1. Create Empty project

2. Add Content Type:

2.a. Set Inherits="FALSE"

2.b. Tambahkan Field-fieldnya. Perlu diperhatikan:
- Bila fieldnya LOOKUP, buat juga ListDefinition+ListInstance LOOKUPnya di Project tsb ! (Kalau tidak begitu field Lookupnya pasti kehilangan relasi!).
Contohnya ada di http://blogs.claritycon.com/blog/2011/05/27/provisioning-a-sharepoint-2010-lookup-column-with-caml/
- Bila fieldnya Managed Metadata maka tambahkan seperti cara disini : http://www.sharepointconfig.com/2011/03/the-complete-guide-to-provisioning-sharepoint-2010-managed-metadata-fields/ (di Link tsb ada Source Code yang bisa diunduh sbg pedoman juga). Yang perlu diingat kalau pakai field managed metadata Scope Feature nya harus Site kalau tidak akan Error 'object reference not set to an instance of an object' ketika aktivasi Features pas proses Deploy.

2.c. Setelah ContentType bisa dideploy, lanjutkan dengan langkah untuk menempelkan custom form, yaitu menambahkan elemen FormTemplates, sbg contoh:
    <XmlDocuments>
      <XmlDocument NamespaceURI="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
        <FormTemplates xmlns="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
          <Edit>id_CustomForm</Edit>
        </FormTemplates>
      </XmlDocument>
    </XmlDocuments>

3. Berikutnya membuat custom Formnya, Buat Sharepoint Mapped ke folder ControlTemplates. Buat usercontrol sbg contoh: CustomForm1.ascx.

4. Di CustomForm1.ascx , Tambahkan:
<%@ Register TagPrefix="wssuc" TagName="ToolBar" src="~/_controltemplates/ToolBar.ascx" mce_src="~/_controltemplates/ToolBar.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="ToolBarButton" src="~/_controltemplates/ToolBarButton.ascx" mce_src="~/_controltemplates/ToolBarButton.ascx" %>

5. Copy Paste Sharepoint Rendering Template yang diperlukan dari file DefaultTemplates.ascx yang ada di folder ControlTemplates.
- Untuk List copy yang <SharePoint:RenderingTemplate id="ListForm" runat="server">.

- Untuk Document Library, copy yang <SharePoint:RenderingTemplate id="DocumentLibraryForm" runat="server">, perlu diperhatikan didalam situ ada link ke Template "DocumentLibraryFormCore", untuk itu delete saja ini: <SharePoint:FormComponent TemplateName="DocumentLibraryFormCore" runat="server"/> dan gantikan dengan isi dari <SharePoint:RenderingTemplate id="DocumentLibraryFormCore" runat="server">.

Kemudian di RenderingTemplate, edit id-nya sesuai dengan yang di deklarasi contenttypenya, sebagai contoh disini :
<SharePoint:RenderingTemplate id="id_CustomForm" runat="server">.

Setelah itu bisa coba dideploy, hasilnya form-nya masih seperti bawaan, karena kita belum melakukan kustomisasi form.

6. Selanjutnya kita mulai kustomisasi form. Katakanlah kita akan kustom field-fieldnya. Untuk itu langkah2 sbb:

- Delete bagian yang merender Field, untuk List adalah : <SharePoint:ListFieldIterator runat="server"/> dan untuk DocumentLibrary adalah : <SharePoint:DocumentLibraryFields ID="DocumentLibraryFields1" runat="server"/>

- Selanjutnya kita tambahkan field-field nya.

Setelah <SharePoint:FormToolBar ID="FormToolBar1" runat="server"/>, tambahkan sbb :

        <tr>
            <td width="190px" valign="top" class="ms-formlabel">
                <h3 class="ms-standardheader">
                    <nobr>Title</nobr>
                </h3>
            </td>
            <td width="400px" valign="top" class="ms-formbody">
                <SharePoint:FormField runat="server" ID="FormField2" ControlMode="Edit" FieldName="Title" />
                <SharePoint:FieldDescription runat="server" ID="FieldDescription2" FieldName="Title"
                    ControlMode="Edit" />
            </td>
        </tr>

        <tr>
            <td width="190px" valign="top" class="ms-formlabel">
                <h3 class="ms-standardheader">
                    <nobr>Ukuran</nobr>
                </h3>
            </td>
            <td width="400px" valign="top" class="ms-formbody">
                <SharePoint:FormField runat="server" ID="FormField3" ControlMode="Edit" FieldName="Ukuran" />
                <SharePoint:FieldDescription runat="server" ID="FieldDescription3" FieldName="Ukuran"
                    ControlMode="Edit" />
            </td>
        </tr>
<SharePoint:ApprovalStatus ID="ApprovalStatus1" runat="server"/>
</table>

7. Setelah itu bisa dideploy ContentTypenya dan dicoba dengan mengaplikasikannya di DocumentLibrary.
Yang perlu diketahui dari kustomisasi field tsb adalah tiap Field2 itu ada atribut ControlMode, yang bisa disesuaikan, misal spy Fieldnya tidak bisa diedit kita ubah jadi ControlMode="Display". Dan tentu saja kita bisa tambahkan logic2 disitu, atau di code-behind.

Terimakasih untuk yang membuat referensi2 dibawah ini:
- Untuk Add Lookup Column di ContentType: http://blogs.claritycon.com/blog/2011/05/27/provisioning-a-sharepoint-2010-lookup-column-with-caml/
- Untuk Add Managed Metadata Column di ContentType http://www.sharepointconfig.com/2011/03/the-complete-guide-to-provisioning-sharepoint-2010-managed-metadata-fields/
- Untuk membuat Custom Form : http://customformtemplates.codeplex.com/ dan http://sharepointbox.blogspot.com/2010/11/how-to-use-custom-form-templates-in.html
- Untuk referensi cara lain membuat custom form dengan FormUrls : http://www.codeproject.com/script/Articles/ArticleVersion.aspx?aid=223431&av=333251 (disini dibahas juga tentang cara FormTemplates spt kita bahas) dan di Ebook Sharepoint 2010 as a Development Platform , hal 1027. Selain itu ada juga cara lain seperti di http://spcustomlistformdemo.codeplex.com/

Share this post: