How to display images in a repeating table in an InfoPath browser form using a Rich Text Box control

While the Picture control is not available in InfoPath browser forms, you can write code to programmatically add a link to an image to a Rich Text Box control to display images in browser forms.

ADVERTISEMENTS

Problem

You have images stored in a SharePoint Picture Library and would like to display these images in a repeating table in an InfoPath browser form that is served through InfoPath Forms Services in SharePoint.

Solution

While the Picture control is not available in InfoPath browser forms, you can write code that adds a link to an image to a Rich Text Box control to display images in browser forms that are served through InfoPath Forms Services in SharePoint.

Discussion

You can accomplish this functionality as follows:

  1. Design an InfoPath browser-compatible form template as shown in figure 1.
    The InfoPath form template in design mode
    Figure 1. The InfoPath form template in design mode.

    with a Main data source that resembles the following figure:

    The Main data source of the form template
    Figure 2. The Main data source of the form template.
  2. In SharePoint, create a new Picture Library or use an existing one. The following figure shows an image that is stored a Picture Library named MyPictures in SharePoint. The Title field contains part of the file name of the image (excluding its file extension). This image can be retrieved through a browser using an URL such as http://<server_name>/MyPictures/CAABLK4GYC.jpg.

    Sample picture in 'MyPictures' Picture Library in SharePoint
    Figure 3. Sample picture in 'MyPictures' Picture Library in SharePoint.

    Add a Receive data connection to a Picture Library (such as the MyPictures Picture Library above), select the Title field from the list of fields for the Library, and name the data connection MyPictures.
  3. Add a Loading Event to the InfoPath form template and put the following C# code in the FormEvents_Loading method:

    // Retrieve the pictures in the Picture Library
    XPathNavigator secDSMainNav = DataSources["MyPictures"].CreateNavigator();
    XPathNodeIterator iter = secDSMainNav.Select(
      "/dfs:myFields/dfs:dataFields/dfs:MyPictures", NamespaceManager);

    // Loop through all the pictures in the Picture Library
    while (iter.MoveNext())
    {
      XPathNavigator pic = iter.Current;
      string title = pic.SelectSingleNode("@Title", NamespaceManager).Value;
      string url = "http://<server_name>/MyPictures/" + title + ".jpg";
      addImageToTable(title, url);
    }

    // Remove the first empty row from the repeating table
    XPathNavigator mainDSNav = MainDataSource.CreateNavigator();
    if (String.IsNullOrEmpty(mainDSNav.SelectSingleNode(
      "/my:myFields/my:pictures/my:picture[1]/my:title", NamespaceManager).Value)
      && String.IsNullOrEmpty(mainDSNav.SelectSingleNode(
      "/my:myFields/my:pictures/my:picture[1]/my:image", NamespaceManager).Value))
    {
      XPathNavigator nav = mainDSNav.SelectSingleNode(
        "/my:myFields/my:pictures/my:picture[1]", NamespaceManager);
      nav.DeleteSelf();
    }
  4. Add the following C# code for the addImageToTable function to the form's code file:

    public void addImageToTable(string title, string url)
    {
      // Create a row for the picture
      XmlDocument doc = new XmlDocument();
      XmlNode group = doc.CreateElement("picture", NamespaceManager.LookupNamespace("my"));
      XmlNode field = doc.CreateElement("title", NamespaceManager.LookupNamespace("my"));
      XmlNode node = group.AppendChild(field);
      node.InnerText = title;
      field = doc.CreateElement("image", NamespaceManager.LookupNamespace("my"));
      node = group.AppendChild(field);
      node.InnerXml = "<img xmlns=\"http://www.w3.org/1999/xhtml\" src=\"" + url + "\"/>";
      doc.AppendChild(group);

      // Add the picture to the repeating table
      XPathNavigator mainDSNav = MainDataSource.CreateNavigator();
      mainDSNav.SelectSingleNode("/my:myFields/my:pictures",
        NamespaceManager).AppendChild(doc.DocumentElement.CreateNavigator());
    }
  5. Save and build the project.
  6. Publish the form template to a SharePoint Server running Forms Services. Since the form template contains managed code, you will have to perform an administrator-approved form template deployment.

Each image from the SharePoint Picture Library should now appear in the Rich Text Box field of a row in the repeating table after the form has loaded and is displayed on a page running through InfoPath Forms Services in SharePoint.

 
 Subscribe for updates via RSS or Email

Copyright: This article may not be used on web sites (whether personal or otherwise), copied, disseminated, altered, printed, published, broadcasted, or reproduced in any way without an expressed written consent of S.Y.M. Wong-A-Ton. The techniques demonstrated in this article may be used within any Microsoft InfoPath project. This article is provided without any warranties. Copyright for this article is non-transferrable and remains with the author, S.Y.M. Wong-A-Ton.

InfoPath 2013 Cookbook: 121 Codeless Recipes for Beginners
InfoPath 2013 Cookbook 2: 121 Codeless Recipes for SharePoint 2013
InfoPath 2010 Cookbook: 101 Codeless Recipes for Beginners
InfoPath 2010 Cookbook 2: 101 Codeless Recipes for SharePoint 2010
InfoPath 2010 Cookbook 3: 101 Code Recipes for C# Developers
InfoPath 2010 Cookbook 5: Integrating InfoPath with Excel and Excel Services


Related InfoPath Articles:

ADVERTISEMENTS

InfoPath 2013 Cookbook: 121 Codeless Recipes for Beginners

InfoPath 2013 Cookbook 2: 121 Codeless Recipes for SharePoint 2013

InfoPath 2010 Cookbook: 101 Codeless Recipes for Beginners

InfoPath 2010 Cookbook 2: 101 Codeless Recipes for SharePoint 2010

InfoPath 2010 Cookbook 3: 101 Code Recipes for C# Developers

InfoPath 2010 Cookbook 4: 101 Code Recipes for VB Developers

InfoPath 2010 Cookbook 5: Integrating InfoPath with Excel and Excel Services