Best Practices For Overriding Default Sharepoint Field Rendering
SharePoint provides default rendering for standard fields like text, number, and date/time. However, you may want to override the default to improve usability, enhance visual design, or add custom functionality specific to your organization’s needs.
Why Override the Default Rendering?
Improve Usability
The out-of-the-box rendering may not provide the best experience for your users. Overriding allows you to tailor the rendering for your specific scenarios. For example, you can customize the way Person or Group fields display to only show relevant data like names rather than the full user profile card.
Enhance Visual Design
SharePoint’s default styling may not align with your branding. Custom rendering gives you full control over the styling, layout, and placement of fields. You can create overlays, animations and specialized templates to match your look and feel.
Add Custom Functionality
Sometimes business requirements call for unique functionalities not supported by default fields. Custom rendering allows you to build interactive features like nested dropdowns, cascading filters, and inline editing that can greatly improve efficiency.
Techniques for Overriding Field Rendering
SharePoint provides several approaches to override out-of-the-box field rendering. Each has its own strengths and use cases.
Use XSLT List View Web Parts
The XSLT List View web part allows you to customize rendering when showing multiple items. For example, you can group and filter fields to reduce information overload. XSLT overrides are configured through the web interface using an XML-like syntax declaration.
Leverage JSLink to Map Fields
JSLink overrides work by mapping internal field names to custom JavaScript rendering templates and functions. JSLink can be used to customize both list views and display forms. The mappings are defined in text files and attached using web part properties or XML declarations.
Develop Custom Field Controls
For advanced scenarios, custom field controls can be developed to tailor functionality and UI. These server-side controls are integrated by registering with SharePoint and then added to content types or site columns. Custom controls provide the deepest level of rendering flexibility.
When to Choose Each Override Option
Determining the right override technique depends on factors like complexity, performance, and development resources.
XSLT for Lightweight View Formatting
XSLT modifications are easy to implement and provide basic control over styling, content, and layout in list views. XSLT is a quick way to tweak the default presentation without code.
JSLink to Modify Rendering Logic
When you need to change field markup, DOM modifications, or run custom display logic, JSLink provides the best balance of flexibility and development effort. JSLink also supports rich client-side interactions.
Custom Controls for Complex Scenarios
For maximal render control and advanced functionality like connections to external data, custom controls are the best approach. However, custom controls require expertise in SharePoint development and more implementation effort.
Walkthrough: Override People Picker with JSLink
The out-of-the-box People Picker can be challenging for users to work with. Here is an example using JSLink to customize the renderer.
Map Schema XML to New Templates
First we need to map the internal field schema to custom HTML templates that will define the new renderer. This mapping goes in a .js file added to the site.
Register JSLink and Point to Rendering Logic
Then register JSLink on the field through a DisplayFormTemplate directive. This wires up our .js mapping file to the People Picker for rendering overrides.
Code Field Templates and Formatting
Finally, implement the field templates and JavaScript logic for display formatting, controlling which data displays, handling selection, and any other needed functionality.
Considerations for Custom Overrides
When modifying default rendering, keep these guidelines in mind for a successful implementation:
Performance Implications
Custom rendering can introduce performance overhead, especially complex client-side logic. Profile thoroughly and optimize where possible.
Support and Maintenance
Plan for ongoing support requirements. Rendering customizations increase technical debt over time and require maintenance as SharePoint evolves.
End-user Experience
Enhance, don’t hinder, the user experience. Allow enough time for UX design, review, and refinement before rolling out broadly.
