Customizing external list form

Question

I need to create external list and i need customize display and edit forms. I want add something like tabs, i.e. i want to input some fields in one tabs, and some in another. I must use ClientObject model or Sharepoint Designer. I didn't found any similar example.

Is that possible?

Answer 1

External list forms are rendered with XsltListFormWebPart in SharePoint. Rendering in OOTB SharePoint webparts is mostly XSLT-based, as in this case. Original XSLT transformation for this webpart is stored in file 14\TEMPLATE\LAYOUTS\XSL\formxml.xsl.

You will need at least basic XSLT (XSLT 1.0) and jQuery UI skills to accomplish your task.

Below are steps you need to perform:

1. Open the list edit form in SharePoint designer
2. Find XlstListFormWebPart tag (Code tab)
3. Add Xsl element and define XSL stylesheet with include tag, which will point to your custom XSL transformation. This transformation should render appropriate HTML markup.
4. Save the page
5. Perform the same actions for new and display forms

The XSL stylesheet which will include your script will look something like this:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:import href="/Style Library/XSL Stylesheets/tabbedForm.xsl"/>
</xsl:stylesheet>

The tabbedForm.xsl file should be uploaded to some document library on your site (in the example above it is the "Style Library").

This file should contain XSL transformation

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet
  xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"
  xmlns:ddw1="http://schemas.microsoft.com/sharepoint/soap/"
  xmlns:p1="deskwork" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:system="clr-namespace:System;assembly=mscorlib"  xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
  xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxsl="urn:schemas-microsoft-com:xslt"
  xmlns:SharePoint="Microsoft.SharePoint.WebControls"
  xmlns:ddwrt2="urn:frontpage:internal"
  xmlns:rs="urn:schemas-microsoft-com:rowset"
  xmlns:z="#RowsetSchema">

  <xsl:import href="/_layouts/xsl/formxml.xsl"/>

  <!-- redefine templates from formxml.xsl here -->

  <!-- use for debug: -->
  <!--
  <xsl:template match="/">
    <textarea cols="60" rows="10">
      <xsl:copy-of select="." />
    </textarea>
  </xsl:template>
  -->

</xsl:stylesheet>

Resulting HTML should look something like this:

<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div id="tab1">
    <!-- tab1 fields here -->
  </div>
  <div id="tab2">
    <!-- tab2 fields here -->
  </div>
  <div id="tab3">
    <!-- tab3 fields here -->
  </div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript">
    $(function() {
      $( "#tabs" ).tabs();
    });
</script>

It would be better if from this point you proceed with the template yourself, so that you will be able to create the transformation you want and maintain it. In my opinion, gaining XSLT skills is a good investment of time if you work a lot with SharePoint 2010 and SharePoint Designer.