Ariwibawa: 2012

Suppose we want to develop web application on the sharepoint 2010. But the requirement to design form need customization.

To accomplish this there are 2 options (that i know of) that we can do:

Use formtemplate
Create aspx page with page content master from sharepoint

Here, I'm going to explain how to customize form using formtemplate:

Open Visual Studio 2010
Create new Sharepoint project (Sharepoint 2010 -> Empty SharePoint Project)

On the next page, enter Uri from site we want to add. In my example i used: http://mlpt-sp/my/personal/testingground
Select Deploy as a farm solution because we're going to use ascx and place it in ControlTemplate folder

After project has been loaded, next we're going to create content type. Left click on your project name (SharePointProject1) -> Add -> New Item -> click on Content Type -> give it a name and then click Add

Choose base content type you want to create. Since I'm going to create this content type for custom list, i picked Item. Click Finish

Open file Elements.xml, delete Inherits="TRUE" and add the following xml after 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>

The name CustomFormTemplates will became id for RenderingTemplate in ascx, This was the result from that Elements.xml

When you have finished editing the file Elements.xml we need to add a new ascx that will become the template for Add / Edit / View later. Right click on project name -> Add -> New Item -> select the User Control -> you can name it anything (in the example I used UserControl1.ascx) and click Add

on file UserControl1.ascx paste the following html at the bottom

<%@ 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:ParentInformationFieldID="ParentInformationField1"runat="server"/>

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

       <Template_Buttons>

        <SharePoint:CreatedModifiedInfoID="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>

Move file UserControl1.ascx from folder SharePointProject1 to ControlTemplates
Now we need to create WebControl for SaveButton. right click on project name -> Add -> New Item -> under installed templates click Code -> give this class a name CustomSaveButton-> click Add
On file CustomSaveButton.cs change this class access to Public with by adding the word in front of the word class, we alse need to inherits this class from Microsoft.SharePoint.WebControls.SaveButton
Override method SaveItem which is available under inherits class. Here we can add any custom code that we would like.

Back to file UserControl1.ascx here we're going to change default SaveButton with SaveButton that we've created before. Add this tagprefix in above.

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

Change <SharePoint:SaveButton to <cusa:CustomSaveButton so it becomes like this

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

Set trust level in sharepoint site target to Full
Deploy ours solution by right clicking on Project Name (SharePointProject1) -> clik Deploy
Run iisreset
Let's try this by creating a new Custom List and set this list to use other content type, from menu List Settings -> Advance Settings -> Allow management of content types, select yes -> then click on OK
Back to menu List Settings klik Add from existing site content type pick content type that we've already made, mine was SharePointProject1 – CustomFormWithSaveButton

Let's try this custom form with clicking on the New Item then click on the content type that we've created before

After the save button got clicked:

If the form still showing the orginal one, try again the steps above.

If the toolbar got disabled, look for the error message in event viewer

I don't know whether this is an intended behaviour or not, but when you click on the button in property PropertyValues, it will always open dialog string collection editor. But actualy this should point to a variable in code behind that will store the value from project information. Assigning variable string[] (using ReadProjectProperty1.PropertyValues = arrayOfStringVariable) in code behind manualy also doesn't seem to work either. You need to use ActivityBind method for this to work. This is how i did (_projectName is variable string[]):

ActivityBind activityBindReadProjectName = new ActivityBind();
activityBindReadProjectName.Name = "Workflow1";
activityBindReadProjectName.Path = "_projectName";
this.ReadProjectName.SetBinding(Microsoft.Office.Project.Server.Workflow.ReadProjectProperty.PropertyValuesProperty, ((System.Workflow.ComponentModel.ActivityBind)(activityBindReadProjectName)));

I put that code in Workflow1.Designer.cs class file inside InitializeComponent().

Edit: actually you can bind that PropertyValues from designer by pressing database icon next to PropertyValues, this will allow you to select variable you want to bind

Ariwibawa

Wednesday 5 December 2012

Make add/edit/view custom form and custom SaveButton

How to get ProjectUID inside Project server workflow

Monday 1 October 2012

How to make ReadProjectProperty works

Friday 21 September 2012

How to debug project server 2010 workflow

Tuesday 29 May 2012

Configure Project Server 2010 to work with Exchange Server 2010