Karine Bosch’s Blog

On SharePoint

InputFormSection.ascx and InputFormControl.ascx Controls


When developing application pages you can use this control to build SharePoint-like pages. It offers a basic layout for the different parts of the control and offers a skeleton in which you can place your own controls. Each section starts with a thin section line to visualize the separation between the different sections. You can place more than one InputFormSection control on a page, in order to separate different functionality from each other. 

inputformsection1

To include a InputFormSection control on an aplication page you have to use the following syntax:

<wssuc:InputFormSection ID="InputFormSection1" runat="server"
       Title="InputFormSection 1"
       Description="Shows the possibilities of the different SharePoint user controls" >
     <template_inputformcontrols>
          <wssuc:InputFormControl runat="server" LabelText="">
              <Template_Control>                   
                  <div class="ms-authoringcontrols">
                      Other controls will be placed here...                           
                  </div>
              </Template_Control>
          </wssuc:InputFormControl>
     </template_inputformcontrols>
</wssuc:InputFormSection>

You can specify the section title and a description as attributes of the InputFormSection control.

When creating custom application pages you have to place this control within a <td> tag of an HTML table.  If you want control over the width of the two columns, you have to define the HTML table as follows, adding a <colgroup> element where you explicitly define the width of each column:

<table border="0" cellspacing="0" cellpadding="0" class="ms-propertysheet" width="100%">
   <colgroup>
      <col style="width: 40%"></col>
      <col style="width: 60%"></col>
   </colgroup>
   <tr>
      <td>
          <!-- Demonstrate SharePoint user controls -->
          <wssuc:InputFormSection ID="InputFormSection1" runat="server"
               Title="InputFormSection 1"
               Description="Shows the possibilities of the different SharePoint user controls" >
            <template_inputformcontrols>
               <wssuc:InputFormControl runat="server" LabelText="" >
                  <Template_Control>                   
                     <div class="ms-authoringcontrols">
                         Other controls will be placed here...                           
                     </div>
                  </Template_Control>
               </wssuc:InputFormControl>
            </template_inputformcontrols>
          </wssuc:InputFormSection>
      </td>
   </tr>
</table>

If you want your title and/or description something more than a string you can use the tag <Template_Title> and/or <Template_Description>  tag in which you can specify your own controls.

inputformcontrol-extra-description

<wssuc:InputFormSection ID="InputFormSection1" runat="server">
     <template_title>
            <SharePoint:EncodedLiteral ID="EncodedLiteral1" runat="server"
                 text="InputFormSection 2" EncodeMethod='HtmlEncode'/>
     </template_title>
     <template_description>
            <asp:HyperLink ID="HelpHyperLink" runat="server" NavigateUrl="help/helppage.htm"
                  Text="read more here..." Target="_blank" />
     </template_description>
     <template_inputformcontrols>
            <div class="ms-authoringcontrols">
                 Other controls will be placed here...                           
            </div>
         </wssuc:InputFormControl>
     </template_inputformcontrols>
</wssuc:InputFormSection>

Within the <template_inputformcontrols> element you can place a InputFormControl user control. Within the <Template_Control> element of this control place the controls you need to define your user interface.

Also add the required directives at the top of the page:

<%@ Register TagPrefix="wssuc" TagName="InputFormSection" Src="/_controltemplates/InputFormSection.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="InputFormControl" Src="/_controltemplates/InputFormControl.ascx" %>

If you use server controls from the Microsoft.SharePoint.dll, you also have to add the following directive:

<%@ Register TagPrefix="spuc" Namespace="Microsoft.SharePoint.WebControls"
    Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

There are a number of attributes you can set on the InputFormSection control:

  • Title: title for the section.
  • Description: description for the section.
  • Collapsible: set this attribute to true if you want an expandable section. The control will be displayed with a clickable + and – sign. The default is false.
  • Collapsed: if you want the section to be collapsed when the page is loaded, you can set this property to true. The defaulst value is false.
  • Padding: set this attribute to false if you want no empty space at the end of the section. The default value is true.

There are also a number of attributes you can set on the InputFormControl control:

  • LabelText: this text will be placed at the top of the controls in the right column.
  • ExampleText: this text will be placed at the bottom of the controls in the right column. This attribute can be useful if you place f.e. a text box within the <Template_Control> tag and you want to indicate a sample value.  
  • LabelAssociatedControlId: you can add more than one InputFormControl within the <template_inputformcontrols> element in order to group your own controls. In that case the LabelAssociatedControlId can come in handy. The LabelText value and ExampleText value will be displayed above and under the control.

inputformcontrols1

      <wssuc:InputFormSection ID="InputFormSection2" runat="server"
             Title="InputFormSection 2"
             Collapsible="true" >
          <template_description>
             <asp:HyperLink ID="HelpHyperLink" runat="server" NavigateUrl="help/helppage.htm"
                  Text="read more here..." Target="_blank" />
          </template_description>
          <template_inputformcontrols>
             <wssuc:InputFormControl runat="server" LabelText="Label text 1" ExampleText="Example text 1"
                    LabelAssociatedControlId="InputFormTextBox1">
                <Template_Control>                   
                    <spuc:InputFormTextBox runat="server" ID="InputFormTextBox1" Width="60%" />
                </Template_Control>
             </wssuc:InputFormControl>
             <wssuc:InputFormControl runat="server" LabelText="Label text 2" ExampleText="Example text 2"
                    LabelAssociatedControlId="InputFormTextBox2">
                <Template_Control>                   
                    <spuc:InputFormTextBox runat="server" ID="InputFormTextBox2" Width="60%" />
                </Template_Control>
             </wssuc:InputFormControl>
          </template_inputformcontrols>
      </wssuc:InputFormSection>

As with the Title and the Description of the InputFormSection control, if you want LabelText and/or ExampleText to be more than a simple string, you can encapsulate you own controls within <Template_LabelText> and <Template_ExampleText> elements. 

inputformcontrol-extra

     <wssuc:InputFormSection ID="InputFormSection2" runat="server" Title="InputFormSection2" Collapsible="true" >
         <template_description>
            <asp:HyperLink ID="HelpHyperLink" runat="server" NavigateUrl="help/helppage.htm"
                 Text="read more here..." Target="_blank" />
         </template_description>
         <template_inputformcontrols>
             <wssuc:InputFormControl runat="server" >
                 <Template_LabelText>
                    <asp:Label ID="LabelTextLabel" runat="server" backcolor="yellow" text="label text 1" />
                 </Template_LabelText>
                 <Template_ExampleText>
                    <asp:Label ID="ExampleTextLabel" runat="server" forecolor="red" text="example text 1" />
                 </Template_ExampleText>
                 <Template_Control>                   
                    <spuc:InputFormTextBox runat="server" ID="InputFormTextBox1" Width="60%" />
                 </Template_Control>
             </wssuc:InputFormControl>
         </template_inputformcontrols>
     </wssuc:InputFormSection>
Advertisements

28 Comments »

  1. Hi, I am a SharePoint beginner and I need to implement a DateTime picker control on my custom Association and Initiation forms. What directives do I need to include at the top of my page and what template controle? I find your post very helpful, and I would appriciate if you sent me link to a more detailed (for beginners) literature regarding this subject.

    Thanks in advance

    Zarko

    Comment by Zarko | May 27, 2009 | Reply

  2. Zarko,
    I added a page to my blog with more detailed information about the SharePoint DateTimeControl. See https://karinebosch.wordpress.com/sharepoint-controls/datetimecontrol-control/
    Have fun with it!
    Karine

    Comment by Karine Bosch | May 28, 2009 | Reply

  3. Hi,
    I’m getting an error when I use the tag wssuc:InputFormSection. “Generation of designer file failed: Type ‘System.Web.UI.UserControl’ does not have a public property named ‘template_inputformcontrols’.”

    I registered the tag properly. Do I need to copy the ascx file from 12\TEMPLATE\CONTROLTEMPLATES to my local project?

    Thanks in advance,
    Matthijs

    Comment by Matthijs | July 21, 2009 | Reply

  4. […] neat SharePoint formatted pages are a whiz to make! Instead of me reinventing the wheel, check out https://karinebosch.wordpress.com/sharepoint-controls/inputformsectionascx-control/ for a more details. Well worth it! 1c8fdcde-eb7f-402a-984b-4f3f3a785c30|0|.0 Tags: […]

    Pingback by Creating custom ASPX pages which look like SharePoint application pages | August 24, 2009 | Reply

  5. Hello Karine,

    I have a question concerning validation controls (CompareValidator) in combination with InputFormSection. When I want to do client-side validation of two controls, living both in a seperate InputFormSection, the CompareValidator is not able to locate the ControlToCompare.
    As I understood this has to do with the fact that the ControlToValidate and ControlToCompare have to be in the same NamingContainer. So my question is do the do controls, in seperate InputFormSections, have a common NamingContainer? I thought that the live on the same page, so the are having a common NamingContainer… Thanks in advance.

    Gijs

    Comment by Gijs | October 2, 2009 | Reply

  6. Great comprehensive explanations. Thanks.

    Just one question: Is there anyway to get these user controls to display correctly in the Visual Studio designer?
    Would be so much nicer to handle visualy without the “Error Creating Control – x ‘System.Web.UI.UserControl’ does not have a public property named ‘template_inputformcontrols’.” Messages.

    Thanks anyway for the great help until now.
    Dany

    Comment by dany | October 6, 2009 | Reply

  7. […] InputFormSection.ascx and InputFormControl.ascx Controls over at Karine Bosch’s Blog. Posted by René Hézser | 0  Comments | Trackback Url  | 0  Links to this post | Bookmark this post with:         Tags: Development, SharePoint, Web ControlsTechnorati Tags: Development, SharePoint, Web Controls Links to this post Comments Name *: URL: Email: Kommentar: CAPTCHA Image Validation […]

    Pingback by SharePoint Blog - René Hézser - Using SharePoint Controls | February 17, 2010 | Reply

  8. When used inside an Edit or Insert Template in a FormView control, the InputFormSection control does not seem to be able to do two way databinding. Is this correct? I am able to evaluate data during read operations, but as soon as I attempt to Insert or Update, the object data source that my form view is bound to throws an exception for a Dictionary with no values. Currently I handle this by grabbing the individual control values in my FormViewInserting and Updating events, but I am hoping that maybe I am missing something and that it may be possible to get two way binding to work.

    Thanks for all of the great information!

    E

    Comment by Everett | April 20, 2010 | Reply

  9. Everett,
    In my opinion the InputFormSection is not meant to be used in the Edit or Insert Template of a FormView control.
    Can you perhaps explain me where you use the FormView and what you want to achieve. Perhaps there is a better solution to your problem.
    Karine

    Comment by Karine Bosch | April 21, 2010 | Reply

  10. This has been very helpfull!!
    Thank U.
    Higo

    Comment by Higo | September 15, 2010 | Reply

  11. […]      </template_inputformcontrols> </wssuc:InputFormSection>more-https://karinebosch.wordpress.com/sharepoint-controls/inputformsectionascx-control/ Posted by  Morozov Serge  on  31.10.20100  Comments  |  Trackback Url  | 0  Links to this […]

    Pingback by Q-A Ковров - You can place more than one InputFormSection control on a page, in order to separate different functionality from each other. | October 31, 2010 | Reply

  12. Hi, you’ve already helped me with this, but I am dealing with SP 2010 now. My forms that contain InputFormSections do not get displayed like the in WSS 3.0. The whole left side where titles and descriptions are defined is truncated. What am I missing, I can see the InputFormSection control in _controltemplates virtual directory?

    Thanks in advance

    Comment by Zarko | February 8, 2011 | Reply

  13. Hi Zarko,

    Thanks for the helpful article, the control works swiftly on WSS3.0, I reproduced the same on SP2010. But on SP2010 this control does not load when requested, it throws “An unexpected error”.

    Any suggestions in this regard would be helpful.

    Cheers,
    Karthik

    Comment by Karthik | February 23, 2011 | Reply

  14. Sorry my previous comment is addressed to ” Karine Bosch ”

    Cheers,
    Karthik

    Comment by Karthik | February 23, 2011 | Reply

  15. […] https://karinebosch.wordpress.com/sharepoint-controls/inputformsectionascx-control/ 此条目发表在 未分类 分类目录。将固定链接加入收藏夹。 ← 在SharePoint 2010中创建CustomFieldType的流程(引用) […]

    Pingback by SharePoint中InputFormSection.ascx和InputFormControl.ascx控件(引用) | 笨笨的回收站 | July 27, 2011 | Reply

  16. Thanks a lot, that helped me 😉

    Comment by Sougnez Sébastien | July 30, 2011 | Reply

  17. […] are many articles about these controls and I found this one very useful. With the controls registered we can now place them under the […]

    Pingback by Create a settings application page | Bram's SharePoint Adventure | August 17, 2011 | Reply

  18. […] You can read more about how to use these controls here. […]

    Pingback by Media Processing Component for Sharepoint - Soledad Pano's Blog | January 12, 2012 | Reply

  19. Hi, Karine,

    It is very nice to read your post here, right now, I have one problem, I need to populate the text area of inputFormTextBox, is it possible for me to get some advice from you.

    Thanks a lot.

    Tao

    Comment by kmtaotao | April 27, 2012 | Reply

  20. Hi kmtaotao, can you please read my post on InputFormTextBox first, and than ask a more detailed question?

    Comment by Karine Bosch | May 1, 2012 | Reply

  21. hi
    i’m Hanady
    i want to reduce the height of the row, i dn’t want a margin for the control
    how can i do?
    thanks

    Comment by Hanady | May 4, 2012 | Reply

  22. Hi. I am Artak.
    I have 2 collapsible sections in my page(inputformsection1, inputformsection2). inputformsection2 is collapsed. Now, when i open(extend) inputformsection2 i want inputformsection1 to get collapsed. How can i do that?
    Thank You…

    Comment by Artak | June 8, 2012 | Reply

    • Hi Artak,
      You will have to add additional javascript to manage this.

      Comment by Karine Bosch | June 8, 2012 | Reply

  23. Hello again…
    Could You please post some javascript code samples how to do it…?
    I am not very good at javascript…
    Thank You….

    Comment by Artak | June 8, 2012 | Reply

  24. Hi. I’m Narek
    I have inputformsection with title [SectionTitle] which i read from resx file. I want my title to be displayed in red color… how can I do that?
    Thank you…

    Comment by Narek | December 24, 2012 | Reply

  25. Hi
    i want use the dropdownlist control in share point, can please help me.i am finding difficulty at adding items to the ddl

    Comment by shiva | April 5, 2013 | Reply

  26. If you can’t use a SharePoint control, you can just add the standard ASP.NET control: http://msdn.microsoft.com/en-us/library/0dzka5sf%28v=vs.71%29.aspx

    Comment by Karine Bosch | April 5, 2013 | Reply

  27. I need to fill the one custom column value also while creating new page. So Label & text box I am able to do with your method. But how I can save this value to the library.

    Comment by Jeswin | October 23, 2017 | Reply


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

%d bloggers like this: