InfoPath is native to XML – Building an XML Editor


Hello again, it’s been a busy time closing the year (I mean the fiscal for Microsoft).  I have been off for a while, but I promise not to do that again – seems like another fake promise Sad smile

When we say that InfoPath is native to XML, we really mean it.  One of the areas that some ignore about InfoPath is its ability to be an authoring tool for XML files.  What do I mean by that?  read on…

We’re establishing a solution for Sheraton Riyadh, where hotel guests can experience the new multi-touch experience of Windows 7 in an e-Concierge solution.  The e-Concierge is basically a solution for guest relations to show hotel guests Points of Interests in Riyadh and surrounding area, with categories and mapping (using Bing Maps) functionality.  The solution simply takes in an XML file with categories Points-of-Interest (POIs), like the below:

   1: <?xml version="1.0" encoding="utf-8"?><Categories xml:lang="en-us">

   2:   <Category id="1" title="Culture" color="#91c1bc" iconUrl="/Resources/cat-icon-culture.png">

   3:     <PointOfInterests>

   4:       <PointOfInterest>

   5:         <Title>Culture item 1</Title>

   6:         <ImageUrl>http://mw2.google.com/mw-panoramio/photos/medium/1674416.jpg</ImageUrl>

   7:         <Latitude>0.43102538</Latitude>

   8:         <Longitude>0.81709864</Longitude>

   9:         <WebSiteUrl>http://www.google.com</WebSiteUrl>

  10:         <Description>Lorem ipsum dolor sit amet sed diam nonummy nibh eui....</Description>

  11:       </PointOfInterest>

  12:       <PointOfInterest>

  13:         <Title>Culture item 2</Title>

  14:         <ImageUrl>http://mw2.google.com/mw-panoramio/photos/medium/1674416.jpg</ImageUrl>

  15:         <Latitude>0.43402538</Latitude>

  16:         <Longitude>0.81409864</Longitude>

  17:         <WebSiteUrl>http://www.google.com</WebSiteUrl>

  18:         <Description>endrerit in vulputate velit esse molestie consequat....</Description>

  19:       </PointOfInterest>

  20:     </PointOfInterests>

  21:   </Category>

  22:   <Category id="2" title="Restaurants" color="#9e7a78" iconUrl="/Resources/cat-icon-restaurant.png">

  23:     <PointOfInterests>

  24:       <PointOfInterest>

  25:         <Title>Restaurant item 1</Title>

  26:         <ImageUrl>http://mw2.google.com/mw-panoramio/photos/medium/1674416.jpg</ImageUrl>

  27:         <Latitude>0.43102538</Latitude>

  28:         <Longitude>0.81709864</Longitude>

  29:         <WebSiteUrl>http://www.google.com</WebSiteUrl>

  30:         <Description>...</Description>

  31:       </PointOfInterest>

  32:     </PointOfInterests>

  33:   </Category>

  34:   <Category id="3" title="Transport" color="#a3b041" iconUrl="/Resources/cat-icon-transport.png">

  35:     <PointOfInterests>

  36:     </PointOfInterests>

  37:   </Category>

  38:   <Category id="4" title="Government" color="#e69553" iconUrl="/Resources/cat-icon-gov.png">

  39:     <PointOfInterests>

  40:     </PointOfInterests>

  41:   </Category>

  42: </Categories>

 

The challenge now is that, Hotel IT need to author this file for the solution to pick up and plot on the map.  Well, that’s not an easy task.  We could do an authoring tool using the solution itself (which basically is based on WPF), but thought we can use a simpler version – InfoPath.

I asked the developer of the solution to give me a sample XML file, and the schema.   I simply started InfoPath and started to design a new form by choosing (XML or Schema:

image

InfoPath will ask you a couple of questions to choose the XML and schema document, I did give it two files in the following order:

  1. XML Sample file – PointOfInterests.xml
  2. XML Schema file – PointOfInterests.xsd

It will also ask you if you want to load the sample data as part of the design, say yes to make it easy for changing the UI with real data. 

image

Once done, you’ll be presented with any empty design and the following Fields (data source):

image

Before I proceed, let’s change the style of the form, by choosing layout template:

image

All you need to do is to drag the top element, and drop it on the design surface. 

image

 

As you can see, InfoPath consulted the schema file, and inserted the data accordingly.  What’s left is just styling the controls so they can look better and usable.  I have inserted a couple of tables, and moved the controls and labels around.  The final design is below:

image

If you fit F5 (or preview), you’ll see the following:

image

And that’s it.  Once the author is done, filling up the fields and adding/deleting the points, he only needs to save, and an XML file will be the result.

I’m including all the files for your own testing, so feel free to download and improve: POIEditor.zip

Enjoy InfoPath, and remember that the fact that it’s XML-native.

Tracking InfoPath forms using SharePoint Lists


Yeah, I’m back to SharePoint and InfoPath after a period of disconnection.  What caused it is that I’m currently working with the internal administration team to help them build and internal portal for self-services.  You bet I’m telling them to use SharePoint for that, and one of the services is to automate the increasing number of administrative forms they have.  Of course, those forms are best fit for InfoPath, but we have a number of challenges:

  1. Our IT policy delivers SharePoint out of the box, and don’t allow us to build code-based solutions –> we need to use whatever we have in SharePoint, and use design-only methods for custom solutions.
  2. Most of the administrative forms contain private information that we can’t just post to SharePoint.  We either need to secure forms one-by-one, or we need to just avoid publishing forms to SharePoint at all.  We have chosen the latter in our case.

With the above constraints, we needed to design forms (only design, no code pieces), and we need to find a way to publish tracking information only to a SharePoint list.  Since we’re going to use this tracking mechanism in different forms – tens of them – I have chosen to go with an InfoPath template part for reusability.  This blog post is all about that.  I’m using SharePoint 2010 and InfoPath 2010, but the same can apply on InfoPath and SharePoint 2007.

Step 1: Create a SharePoint Custom List for Tracking Requests

I have installed SharePoint Foundation 2010 on my Windows 7.  Thanks to the new support built in SharePoint 2010 for Windows client machines to make it easy for developers and designers to test out their work without the need for Windows Server installations or virtual machines.  I have followed the MSDN article titled: Setting Up the Development Environment for SharePoint Server.  In case you face issues, you can consult the following great blog: Common Microsoft SharePoint Server 2010 Installation Issues and Resolutions.

The custom list I have created contains simple columns to track different requests and allow comments as well:

image

Step 2: Design an InfoPath Template Part for Tracking Information

Starting InfoPath Designer 2010, you’ll be presented with different options.  Click on Blank (InfoPath Filler) under Template Parts.  I have chosen InfoPath Filler since I’m going to use this in client-only scenarios.

image

You’ll be presented with a blank design surface.  Save this form template part and give it a name (preferably without spaces such as RequestTrackingTemplatePart.).  It’s time that we build some data connections.  I’m using the technique posted in this blog post: Submitting to a SharePoint List from the InfoPath team blog.

1. Define the fields that will be used as an interface for this template part:

In Fields task pane, rename the root to spListTracking instead of myFields, and add the following fields in the given order:

image

2. Define a data source to be used as a schema for submitting to a web service later on:

We’re going to use a Web Service to submit our tracking data to SharePoint.  The Web Service is coming from /_vti_bin/Lists.asmx">/_vti_bin/Lists.asmx">http://<your server here>/_vti_bin/Lists.asmx, and the method we’re going to use is called UpdateListItems.  The requirement for this method (as described in Lists.UpdateListItems Method (Lists)) is an XML document with a Batch node which instructs SharePoint to add a new item with the given properties.  We’ll create this XML file.  Open Notepad, or your favorite text editor, and type the following:

   1: <?xml version="1.0" encoding="UTF-8"?>

   2: <Batch OnError="Continue">

   3:     <Method ID="1" Cmd="New">

   4:         <Field Name="Title" DisplayName="Title"></Field>

   5:         <Field Name="RequestType" DisplayName="Request Type"></Field>

   6:         <Field Name="RequestStatus" DisplayName="Request Status"></Field>

   7:         <Field Name="RequestComments" DisplayName="Request Comments"></Field>

   8:     </Method>

   9: </Batch>


The DisplayName is not required in our case, so you can freely remove it.  Save the file and give it a name such as: Tracking – Add List Item Template.xml.

Go to InfoPath, and under choose Data –> From Other Sources –> From XML File.

image

Browse for your XML file, and continue with the wizard to include that as a resource in your template part.  Allow automatically retrieving data from this data source.  You’ll notice how that gets added as a secondary data source in your form as the following shows:

image

and by choosing it, you’ll see the XML schema reflected as fields inside the data source in InfoPath.

image  
Now is the time to sync up our data source (XML) and the local fields (represented as the main data source of the form).  You may wondering why would I need that, and the reason is that the above doesn’t allow you to talk to the specific fields (Title, Request Type, Request Status, and Request Comments) at design time.   The schema shows only that there is a field and its content, and nothing else.  We need to present a way for the user of out Template Part to see all fields at design time, in order for him to be able to assign some values.

3. Sync the Main fields with the XML fields of the Batch node:

Go to the Main data source, and choose the first field spItemRequestTitle.  Right-click and choose “Rules …” to see the following task pane:

image

Click on New –> Action.  Give your rule a meaningful name “Sync with title in XML”.  There will be no condition in our case, and we need to choose from the action list “Set a field’s value”.

image 
You’ll be presented with a dialog to set a field to a value:

image

Click to choose the field, and select Field from the ‘Tracking – Add List Item Template (Secondary)” and click OK.

imageChoose the spItemRequestTitle for the value.  You’ll end up with a dot in this field, since you’re already in the title field context.

Do the same steps for the other fields: spItemRequestType, spItemRequestStatus, and spItemRequestComments.  All will set the Field value from the XML template to their own!

We’re not finished yet, cause the above will sync the field “Field” to the values from the form fields.  The dominant will be the last one… simply because we’re not choosing the right field index from the array of fields we’re expecting to have in in the XML template.  Unfortunately, this cannot be done in design, and we need to tap into some of the source files of our InfoPath template part (as explained by the post above from the InfoPath team blog).

4. Modify the InfoPath rules to have indexed field assignment for the sync operation above

Let’s save the template part as source files in order to tap into the XML behind the scenes.  Don’t worry it’s very simple to do.  Go to File –> Publish –> Export Source Files:

image

Save that to a location you can refer to later.  Open the manifest.xsf from the export location but in Notepad.  Scroll down in the file in order to point out your rules that set the field values as follows:

   1: <xsf:ruleSets>

   2:     <xsf:ruleSet name="ruleSet_2">

   3:         <xsf:rule caption="Sync Batch Field - Request Title" isEnabled="yes">

   4:             <xsf:assignmentAction targetField="xdXDocument:GetDOM(&quot;Tracking - Add List Item Template&quot;)/Batch/Method/Field" expression="."></xsf:assignmentAction>

   5:         </xsf:rule>

   6:     </xsf:ruleSet>

   7:     <xsf:ruleSet name="ruleSet_3">

   8:         <xsf:rule caption="Sync Batch Field - Request Type" isEnabled="yes">

   9:             <xsf:assignmentAction targetField="xdXDocument:GetDOM(&quot;Tracking - Add List Item Template&quot;)/Batch/Method/Field" expression="."></xsf:assignmentAction>

  10:         </xsf:rule>

  11:     </xsf:ruleSet>

  12:     <xsf:ruleSet name="ruleSet_4">

  13:         <xsf:rule caption="Sync Batch Field - Request Status" isEnabled="yes">

  14:             <xsf:assignmentAction targetField="xdXDocument:GetDOM(&quot;Tracking - Add List Item Template&quot;)/Batch/Method/Field" expression="."></xsf:assignmentAction>

  15:         </xsf:rule>

  16:     </xsf:ruleSet>

  17:     <xsf:ruleSet name="ruleSet_5">

  18:         <xsf:rule caption="Sync Batch Field - Request Comments" isEnabled="yes">

  19:             <xsf:assignmentAction targetField="xdXDocument:GetDOM(&quot;Tracking - Add List Item Template&quot;)/Batch/Method/Field" expression="."></xsf:assignmentAction>

  20:         </xsf:rule>

  21:     </xsf:ruleSet>

  22: </xsf:ruleSets>

 

We’ll change the target fields in lines 4, 9, 14, and 19 to be indexed in the order of fields in our XML files:

Field[1] –> Title

Field[2] –> RequestType

Field[3] –> RequestStatus

Field[4] –> RequestComments

So line 4 will look like the following:

<xsf:assignmentAction targetField="xdXDocument:GetDOM(&quot;Tracking – Add List Item Template&quot;)/Batch/Method/Field[1]" expression="."></xsf:assignmentAction>

You can then apply the same to other fields, incrementing the index each time.

After the modifications, save the file and then open it in InfoPath by right-clicking and choosing design:

image

The form template part will open normally in design mode in InfoPath, and it’s time to save it back to one file (with the extension .xtp2).  Open the saved file in design mode in InfoPath, and you’ll see your rules reflected by going to the Rules Inspector (under Data tab):

image

We’re now good to go for using this template part in our original form.  I have just added some visual to the form template part to be able to see what’s happening.  The final design of my template part is the following:

image

Step 3: Build an InfoPath Form and use the Template Part

It’s now time to use our template part inside our form, which happens this time to be a Business Card Request.  I have launched InfoPath and designed a new form as it shows below:

image

We need to import our template part as a control, and this is very simple:

1. Click to expand the Controls on the Home tab

image

2. Select “Add or Remove Custom Controls”.  Click Add on the dialog, and choose “Template Part”, and browse for your template part named “RequestTrackingTemplatePart.xtp2).  And finish the wizard.  The list of controls will have your template part at the bottom:

image 3. Click on the template part to add to your form design.  You’ll notice how the visuals have been embedded, with the respective fields (spListTracking node and its children) and all rules.

image

I have chosen to add that to a different view, to separate the data entry from the submission and tracking data.  The shot below shows exactly that:

image

Let’s switch back to the default view, and do a couple of things to be able to use the above template part for submitting to SharePoint list (named Tracking in my case, and is under http://aqahtani1/Lists/Tracking).

Step 4: Create submit data connections

We’re going to use two data connections for submission:

  • Email Submit: which will submit the form to an email address
  • Web Service Submit: which will submit the tracking information to a SharePoint list

The email submit is very simple, and the below show the dialog with proper To and Subject lines:

image

To create the web service submit, follow these steps:

1. Choose Data –> Submit Form –> To Other Locations –> To Web Service

image 2. Type the web service URL as follows: http://<your sharepoint server>/_vti_bin/Lists.asmx

3. Choose UpdateListItems from the list of methods

4. On the next page, assign the parameter “listName” to spListName

5. Assign the parameter “updates” to “Batch” node coming from “Tracking – Add List Item Template_RequestTrackingTemplatePart (Secondary)” data source.  Make sure you choose to include “XML subtree, including selected element”

The dialog should like like the following:

image

You can now click Next, and give you new connection a name.  I have chosen “Tracking Submit”.

We now have two submit connections in place, which we’ll use in the next step.

Step 5: Create Submit Rules

Double-click on the “submit” button in your form to bring the Controls Tools properties tab/panel:

image

In the Action selection, choose Rules and Custom Code, and click on “Manage Rules” on the far right to set the submit rules for this button.

The rules are going to be a number of “Set a field’s value” and “Submit” actions, fired only when the spItemRequestTitle is blank to avoid resubmitting by mistake.  The following Rules Inspector screen shows a summary of that:

image

Notice how I’m building the request title from the form field values and concatenating that with the username and current date and time.  I’m also assigning the request type and status to predefined strings that represent the choices in the SharePoint list columns.  The comments field is more of a narrative.

These field submissions are followed by two submits: Email and Tracking, and then switching to the view for getting a summary on what has happened.

Notice the sync rules that are coming from our template part.

We’re done.  We just need to test that in action and see the results.

Step 6: Preview the form and test your work

Click on Preview (or press F5) to run the form.  Fill in the fields, and click submit to see your tracking view coming up with the assigned values. 

image

image

image

And SharePoint will have a new entry as assigned in the form.  See below:

image

The beauty is that I’m only holding tracking information in SharePoint, and the confidential information (if any) will only be submitted to the authoritive person in the administration team via email.

You can access the source files from this post here: http://algahtani.net/source/BusinessCardRequest.zip

Enjoy SharePoint and InfoPath!

Summary

In this post, we have learned how to track forms submitted by email using SharePoint Lists.  We have implemented the tracking in a reusable template part, which we have used in our original form.  We have learned how to deal with XML templates as resource files in InfoPath, and how to submit to Lists web service in SharePoint.  Hopefully in the future, we’ll see how to get updated information from SharePoint and how to enable the admin team and the user to comment on their requests and the status of execution.

InfoPath Usage Scenarios


Microsoft Office InfoPath 2007 can be used in different scenarios that can scale from simple, ad hoc forms, to highly managed centralized forms solutions.  The following gives a glimpse of the different scenarios with emphasis on value vs. shortcomings.

Forms in Email – quick ad hoc forms using InfoPath 2007 and Outlook 2007

  • Designers build InfoPath forms, and publish forms to email recipients
  • Recipients (users) fill in forms in InfoPath and submit to email of the form owner
  • Outlook organizes forms in folders, and generates Excel reports for further analysis

     

Value

Shortcomings

Simple and Quick

Form templates and submissions are scattered in mailboxes.  Defeating the centralized repositories concept.

No server components required

No web-based forms, only rich client available

Integrated with Outlook 2007 and easy reporting to Excel

No centralized management of form templates and submissions

 

No workflows

Forms Solutions using Windows SharePoint Services v3 – Team forms using InfoPath and WSS

  • Designers build InfoPath forms, and publish to Form Libraries in SharePoint (WSS)
  • Users create new forms and submit to SharePoint Form Libraries
  • Form Library stores form submissions, and enables reporting to Excel.
  • Workflows can be designed (using SharePoint Designer 2007) or developed (using Visual Studio 2005 with Extensions for Windows SharePoint Services)

Value

Shortcomings

One location to access and submit new forms

No web-based forms, only rich client available

Centralized form submissions on the server

No centralized management of form templates

The ability to assign workflows

No customized advance search capabilities

 

No ready-made workflows.  Designing/Developing workflows is required.

 

Forms Solutions using Microsoft Office SharePoint Server 2007 – Business Forms and Process Automation

  • Designers build InfoPath forms, and publish to Form Libraries in SharePoint (MOSS)
  • Users create new forms and submit to SharePoint Form Libraries using both InfoPath rich client, and Web-based forms generated by MOSS (InfoPath Forms Services)
  • Form Library stores form submissions, and enables reporting to Excel.
  • Out-of-the-box workflows are available (Approval, Collect feedback plus other .  Need custom workflows for medium to complex workflows.
  • Form templates can be managed centrally using MOSS (InfoPath Forms Services).  Management include central repository for templates, upgrade, and attachment to different sites.
  • Usually planned and deployed on an organization-wide scale.

     

Value

One location to access and submit new forms

Centralized form submissions on the server

The ability to assign workflows; ready-made workflows available

Web-based forms available.

Centralized management of form templates.

Customized advanced search capabilities

Capabilities of InfoPath are still available in all scenarios, such as:

  1. InfoPath can be connected to Web Services or Databases (Access and SQL Server) to provide automation of form field filling.
  2. Design Template Parts for reusing the design elements among a number of templates
  3. Declarative rules to automate filling and validation
  4. Form Views
  5. User Roles (only in Rich client)

InfoPath – Connecting two List Boxes to Reflect Parent-Child Relationship


If you’re designing an InfoPath form, and need to connect two list boxes so that one reflects on the value chosen in the other, then you need to utilize InfoPath filters. Filters allow you to include a subset of the values taken from a given data source, to simplify form filling, or to reflect a business logic, like selecting a product under a given category.

The following will establish the steps required to do so. I’m taking the example of two list boxes that enable the user to choose a category of products, and then choose a specific product in that category. I’ll be using declarative features of InfoPath, without the need to write any code.

Step 1: Create XML file to store your Category and Product Data:
Create a new XML file using notepad, or any XML editor, and type the following:

<ProductsCategories>
<categories>
    <category CatID=”X”>Category X</category>
    <category CatID=”Y”>Category Y</category>
    <category CatID=”Z”>Category Z</category>
</categories>
<products>
    <product CatID=”X” ProdID=”1″>Product X.1</product>
    <product CatID=”X” ProdID=”2″>Product X.2</product>
    <product CatID=”X” ProdID=”3″>Product X.3</product>
    <product CatID=”Y” ProdID=”1″>Product Y.1</product>
    <product CatID=”Y” ProdID=”2″>Product Y.2</product>
    <product CatID=”Z” ProdID=”1″>Product Z.1</product>
    <product CatID=”Z” ProdID=”2″>Product Z.2</product>
    <product CatID=”Z” ProdID=”3″>Product Z.3</product>
    <product CatID=”Z” ProdID=”4″>Product Z.4</product>
</products>
</ProductsCategories>

Save the file under the name: prodcats.xml. We will use this file to build a data connection later.

Step 2: Design a New Form Template:
Start InfoPath 2007, and design a form with two list box controls. We are not going to use manually entered data, as InfoPath filters does not support filtering on manual entries. We are going to link the two list boxes to an external XML data source.

Step 3: Create an XML Data Connection to get Category and Product Data:

  1. Go to Tools -> Data Connections…
  2. Click Add, and choose Create New Connection to:
    Retrieve Data.
  3. Click Next
  4. Select XML Document as the source of data. Click Next.
  5. Browse for the XML file you created in Step 1: prodcats.xml, and click Next.
  6. You can choose to Access the data from the specified location, to allow you to dynamically change the values directly in the XML file. If you’re going to use this option, then it’s required to have a publically accessible location like a web server or a file share.
  7. You can also check Store a copy of the data for offline use, to not to require online connections to the XML file.
  8. Click Next, and then type a name to identify this data connection, and then click Finish.

Step 4: Link list boxes to the external XML data source

  1. Double click the Category control, to show its properties.
  2. In the List box entries section, under Data tab. Choose Look up values from an external source.
  3. In Data Source drop-down, choose Categories and Products that you’ve created in the previous step.
  4. Select XPath for the Entries to choose a specific field in XML. This is the little icon beside the Entries field.
  5. In the Select a Field or Group Dialogue, drill down in the XML data, and choose category. Click OK.
  6. Select XPath for the Value field. This time choose CatID, under category. Click OK.
  7. Do the same for Product control, but this time, choose product for the Entries and ProdID for the Value.

With the above steps, we have set the two list boxes to retrieve their list items from XML. The Category control will show: Category X, Category Y, and Category Z.
The problem with Product control is that it’ll show all of the products regardless of the selected category.

The following step will show you how to filter data in Product control, according to the selected value in Category control.

Step 5: Filter Data for the Product List Box:

  1. Double click on Product control, to show its properties.
  2. In the List box entries section, click Select XPath icon beside Entries Field.
  3. In the Select a Field or Group dialogue, Click Filter Data.
  4. Click Add, to add a new filter.
  5. Choose CatID, the first drop-down. Choose “is equal to” in the second.
  6. In the third drop-down list, choose Select a field or group.
  7. Point to the Main data source, and pick the Category field. Click OK.
  8. Click OK, to close the Specify Filter Conditions.
  9. Click OK, to close the Filter Data.
  10. Click OK, to close your selection for Entries from the XML data.
  11. For the Value field, choose ProdID from the XML data source.
  12. OK to the list box properties.

Now, the Product control will show only items under the selected category.

Step 6: Apply a rule, to reset Product Control when Category control has no value selected:

  1. Go to Category control properties.
  2. Click on Rules, and click Add.
  3. Give a meaningful name for the rule. Example is: Reset Products if Category is Blank.
  4. Set Condition, and choose of Category
    is blank.
  5. Add Action, choose Set a field’s value. Pick the Product field, and leave the value empty.
  6. Click OK, three times.

Preview the form, to see that whenever you choose a category, only those products that belong to the category will show in the Product drop-down list.

Note:
One list cosmetic action will be writing a piece of code and attach it to the Changed event of Category control. This will enable you to avoid strange values in Product when the user changes the category.

Blog at WordPress.com.
Theme: Esquire by Matthew Buchanan.

Follow

Get every new post delivered to your Inbox.