Sharepoint List Form Customization Options

ByThe SharePoint FAQs Team

Why Customize List Forms?

SharePoint list forms provide the interface for users to view, add, and edit items in a list. Out-of-the-box SharePoint list forms have limited capabilities and configurations. Customizing SharePoint list forms can provide the following benefits:

  • Improve usability: Customized forms can improve usability by modifying the layout, adjusting required fields, setting useful default values, and adapting the interface for specific user roles.
  • Tailor to specific business needs: Forms can be customized to capture all required data points, configure business logic, and streamline workflows for business processes.
  • Enhance user experience: Customizations like conditional formatting, information density, and aesthetically pleasing designs greatly impact user experience and satisfaction.

Form Customization Options

There are several capable options available for customizing SharePoint list forms to fit an organization’s specific needs. Each option provides varying degrees of flexibility, features, and complexity.

SharePoint Designer

SharePoint Designer is a free tool provided by Microsoft that enables power users and site owners to customize SharePoint sites without needing developer skills. Capabilities applicable to list form customization include:

  • Editing default list form pages using a drag and drop interface
  • Adding and removing fields from existing list forms
  • Changing the layout and styling of list forms
  • Configuring basic rules and logic for list forms

InfoPath

Microsoft InfoPath is a tool for creating rich template-driven forms with advanced features and controls. InfoPath offers the following list form customization capabilities:

  • Design graphically complex form layouts binding to data
  • Add rules, conditional formatting, validation logic, and calculations
  • Support for various control types and data inputs
  • Code customizations using InfoPath programming model

Visual Studio

For full control and extensibility over list forms, Visual Studio can be utilized to customize forms using SharePoint APIs and bindings. This allows creating customized forms programmatically with capabilities such as:

  • Develop customized forms using SharePoint object model
  • Package and deploy forms as SharePoint solutions
  • Integration with other SharePoint components like workflows
  • Robust coding capabilities for advanced forms logic

Power Apps

Power Apps is a service for building no-code business apps and forms that can connect to SharePoint and other data sources. Power Apps empowers non-developers to build and customize list forms with features like:

  • Intuitive drag and drop form designer interface
  • Connecting to SharePoint and other data sources
  • Configuring rules and logic without coding
  • Easily updating forms without affecting existing data

Customizing with SharePoint Designer

SharePoint Designer provides a simple way for non-developers to make moderate changes to SharePoint list forms. Common customizations enabled by SharePoint Designer include:

  • Edit default form pages: SharePoint Designer allows editing the default Display, Edit, and New form pages for a list. Fields can be added, removed, reordered on these pages through a drag and drop visual interface.
  • Add or remove fields: Additional fields not present in the default list schema can be added to forms for capturing more information. Unused fields can also be removed to simplify forms.
  • Modify layout and styling: The visual editor can be used to tweak layout styles like fonts, colors, and positioning to improve forms aesthetics and usability.
  • Limited rules and logic: Basic conditional formatting and visibility rules based on field values can be configured for personalized forms.

SharePoint Designer Example Code



<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
 <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="CustomField" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@CustomField')}"/>
 <SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="CustomField" ControlMode="New"/> 
</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
 <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="CustomField" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@CustomField')}"/>
    <tr>
        <td width="190px" valign="top" class="ms-formlabel">
            <H3 class="ms-standardheader">
                <nobr>Custom Field</nobr>
            </H3>
        </td>
        <td width="400px" valign="top" class="ms-formbody">
            <SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="CustomField" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@CustomField')}"/>
            <SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="CustomField" ControlMode="New"/>
        </td>
    </tr>
</asp:Content>

Customizing with InfoPath

InfoPath provides powerful form customization capabilities through a graphical designer interface. Some key ways InfoPath can help customize SharePoint list forms include:

  • Rich forms controls: InfoPath supports controls like radio buttons, combo boxes, repeating sections, rich text, and more for enhanced forms.
  • Rules and conditional logic: Form logic like calculations, data validation, conditional formatting can be configured visually without code.
  • Code customizations: Additional form logic can be added programmatically using InfoPath object model and VS tools.
  • Packaged solutions: Forms can be saved as template (.xsn) files and uploaded to SharePoint lists as browser-enabled solutions.

InfoPath Example Code

<!-- InfoPath rule for conditional formatting -->

<ruleSet>
  
  <conditionalFormatting>
      
    <conditionalFontFormatting>
       
      <font face="Arial" size="12" bold="yes" italic="no" underline="yes" strikeThrough="no" color="red" 
          highlightColor="yellow" baselineAlignment="baseline" disableCharacterSpacing="false" 
          embeddedFontCharactersStartingAt="none" embeddedFontName="font1" localeId="en-US" 
          smartTagType="digitalSignatureValid">
            
        <conditions>
                
          <condition>
                  
            <formula>
                
              field1 = "Important"
              
            </formula>
                
          </condition>
              
        </conditions>
          
      </font>
        
    </conditionalFontFormatting>
  
  </conditionalFormatting>
  
</ruleSet>

Customizing with Visual Studio

For advanced scenarios or where full control over the form code is required, Visual Studio provides extensive customization capabilities through coding against SharePoint APIs. Some key ways Visual Studio can customize forms includes:

  • Full control over code: Ability to develop highly customized forms using SharePoint APIs and object model.
  • Package and deploy solutions: Forms can be bundled as SharePoint Solutions (WSP) files and deployed to sites.
  • CODESNIP_1: Tight integration capabilities with SharePoint components like workflows, event handlers, and web parts.
  • CODESNIP_2: Production-grade developer tools for robust large scale form customizations and custom form coding logic.

Visual Studio Example Code

using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

namespace Contoso.Forms.Customization
{
    public class CustomForm : LayoutsPageBase
    {
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            
            // Access SharePoint context
            SPContext currentContext = SPContext.Current;
            
            // Get reference to host web
            SPWeb currentWeb = currentContext.Web;
            
            // Define form field control
            TextBox formField1 = new TextBox(); 
            
            formField1.ID = "CustomField1";
            formField1.Width = 250;
            
            PlaceHolderMain.Controls.Add(formField1);
            
        }
    }
}

Customizing with Power Apps

Power Apps is a quick, no-code approach to customize and extend SharePoint list forms. Its user-friendly canvas and built-in connectors allow non-developers to customize forms using drag & drop tools. Key capabilities include:

  • CODESNIP_1: Visually design forms layouts and add controls like dropdowns, calendars, rich text, and more without coding.
  • CODESNIP_2: Connect custom forms directly to SharePoint lists and libraries as well as 300+ other data sources.
  • CODESNIP_3: Build rules, formulas, and logic to customize form behavior without writing code.
  • CODESNIP_4: Rapid iteration – make changes and adjustments to forms instantly without affecting existing data.

Power Apps Example Code

// Formula for validating field value
// Turn background red if Category field is blank

If(IsBlank(Category.Value), 
    RGBA(255, 0, 0, 0.62), 
    RGBA(0, 0, 0, 0))

Key Takeaways

Customizing SharePoint list forms is an effective way to improve SharePoint’s usability and adapt it to specific business requirements. Several capable options are available to customize forms ranging from simple drag and drop interfaces to advanced coding capabilities:

  • CODESNIP_1: Platforms like SharePoint Designer, InfoPath, Visual Studio, and Power Apps all enable form customization at different levels.
  • CODESNIP_2: The choice depends on factors like the required customization complexity, available skills, and resources.
  • CODESNIP_3: Example code snippets have been provided for common customization techniques with each platform.

With the right platform selected, SharePoint forms can be tailored to provide users a more intuitive and pleasing interface optimized for business processes.

Leave a Reply

Your email address will not be published. Required fields are marked *