How To: Customize the External Data Item Web Part

Learn how to customize the appearance of number and date fields in the External Data Item Web Part by editing the underlying XSLT transformation (XSLT).

Applies to: Duet Enterprise for Microsoft SharePoint and SAP Server 2.0 | Office 2010 | SharePoint Server 2010

The External Data Item Web Part displays the details of an External Item from a business application. For example, you can use an External Data Item Web Part to display the details of a particular customer or order. You can customize the appearance of this Web Part by using the XSL editor provided by the Microsoft SharePoint Server user interface. The procedures in this topic demonstrate how to customize the appearance of date and number fields displayed by the External Data Item Web Part by editing the underlying XSL transform.

Extensible Stylesheet Language (XSL) is a programming language that transforms XML into another format or structure, such as HTML. For more information about XSLTs, see the following resources:

To customize the date field in an External Data Item Web Part

  1. View the External Data Item Web Part in your browser to see its current appearance, as shown in Figure 1.

    Figure 1. External Data Item Web Part with date field in browser before customization

    Business Data Item Web Part before customization

  2. On the Site Actions menu, click Edit Page.

  3. Select the instance of the External Data Item Web Part that you want to customize. In this example, the Web Part is named Customer Inquiry.

  4. In the Web Part you want to customize, click the edit arrow to display the Web Part menu, and then click Edit Web Part. This opens the Web Part tool pane, as shows in Figure 2.

    Figure 2. Edit Web Part

    Editing Business Data Item Web Part

  5. In the Data View Properties section, click the XSL Editor button. This opens the Text Entry window for the Web Part's XSL property, as shown in Figure 3.

    Figure3. Text Entry window for the Web Part XSL property

    Business Data Item Web Part edit view

    You can modify the XSLT directly in this window; however, you may find it easier to copy the code to a file. You can then edit that file by using an application such as Microsoft Visual Studio 2010. After editing the file, you can copy the modified code back into the Text Entry window and save your changes to the Web Part.

  6. In the XSLT, search for the FormatDate method.

  7. To display the date without the time, change the FormatFlag value to 1. The following example shows how the original line in the XSLT will appear.

    ddwrt:FormatDate(string(@Datetermsvaliditystartdate), number($CurrentLCID), 5)
    

    The next example shows how the XSL transform will appear after you change the FormatFlag value.

    ddwrt:FormatDate(string(@Datetermsvaliditystartdate), number($CurrentLCID), 1)
    

    After you make this change, the date field is displayed without the time, as shown in Figure 4.

    Figure 4. Date field displayed with date only

    Business Data Item Web Part showing date only

  8. Figure 5 shows a table that lists additional FormatFlag values and examples of the resulting display.

    Figure 5. FormatFlag values and resulting display

    Business Data Item Web Part date format options

To customize the number field in the External Data Item Web Part

  1. View the External Data Item Web Part in your browser to see its current appearance, as shown in Figure 6.

    Figure 6. External Data Item Web Part with number field in browser before customization

    Business Data Item Web Part number format before

  2. On the Site Actions menu, click Edit Page.

  3. Select the instance of the External Data Item Web Part that you want to customize. In this example, the Web Part is named Customer Inquiry.

  4. In the Web Part you want to customize, click the edit arrow to display the Web Part menu, and then click Edit Web Part. This opens the Web Part tool pane, as shown in Figure 7.

    Figure 7. Edit Web Part

    Editing Business Data Item Web Part

  5. In the Data View Properties section, click the XSL Editor button. This opens the Text Entry window for the Web Part's XSL property, as shown in Figure 8.

    Figure 8. Text Entry window for Web Part's XSL property

    Business Data Item Web Part edit view

    You can modify the XSLT directly in this window. However, you may find it easier to copy the code to a file. You can then edit that file by using an application such as Microsoft Visual Studio 2010. After editing the file, you can copy the modified code back into the Text Entry window and save your changes to the Web Part.

  6. In the XSLT, search for the FormatNumber method, which will be inside an xsl-value-of element. The following example shows how this line will appear.

    <xsl:value-of select="@TotalvaluetotalAmount" />
    
  7. In the XSLT, you can change the number format so that it will always display with one format, as in the following example.

    <xsl:value-of select='format-number(@TotalvaluetotalAmount, "#,###,###.##")' />
    

    You can also change the number format so that it displays in different ways for different locales. The following example shows how to vary the display by checking the LCID property of the current locale.

    <xsl:choose>
         <xsl:when test=="$CurrentLCID = 1033">
              <xsl:value-of select='format-number(@TotalvaluetotalAmount, "#,###,###.##")' />
         </xsl:when>
         <xsl:otherwise>
              <xsl:value-of select="@TotalvaluetotalAmountCurr"/> <xsl:value-of select='format-number(@TotalvaluetotalAmount, "#,#,##,###.##")' />
         </xsl:otherwise>
    </xsl:choose>
    
  8. After you make this change, the number is displayed with the new format, as shown in Figure 9.

    Figure 9. Number field displayed with new format

    Business Data Item Web Part after customization

See Also

Other Resources

Business Connectivity Services in SharePoint Server 2010 (https://msdn.microsoft.com/en-us/library/ee557936(office.14).aspx)

XSLT Elements (https://msdn.microsoft.com/en-us/library/ms256058.aspx)

XSLT Patterns (https://msdn.microsoft.com/en-us/library/ms256113.aspx)

Expressions (https://msdn.microsoft.com/en-us/library/ms256066.aspx)

XSLT Starter Kit [MSXML] (https://msdn.microsoft.com/en-us/library/ms767600.aspx)