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.
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:
- Design an InfoPath browser-compatible form template as shown in figure 1.
Figure 1. The InfoPath form template in design mode.
with a Main data source that resembles the following figure:
Figure 2. The Main data source of the form template. - 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.
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. 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();
}
-
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());
} - Save and build the project.
- 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.
Related InfoPath Articles:
