This blog will cover many of the useful tips I’ve found with InfoPath that I still think has some value. Anything I can’t produce in InfoPath is likely to be an AngularJS app, however there is not need to over egg the pudding if an InfoPath form will suffice. Many of my clients are making use of SharePoint 365 and typically that gives them the InfoPath forms app (web part for the old school).

Topic...

Publish InfoPath Form as a Content Type
Date and Time dropdown Picker

Introduction

For a long time, I’ve preferred to publish my InfoPath forms as Content Types for the simple reason I can expose many of the fields as columns that can be used to create views to sort or filter the content of the library.

I’m no longer surprised by how many clients I talk to are unaware of InfoPath, even though it’s been part of the Office suite for some time.  

InfoPath Content Type Demo

To start with I thought I’d share a simple set of instructions that anyone should be able to follow and if the instructions beat you I’ve even done a video that follows the same set of sets.

Preparation

The first thing we need to is to make sure we have a library to store the InfoPath form template that the Content Type will use. I’ve been lazy and used a Forms Template library in my site but if you want you can create a new library.

  1. Check the library to store the InfoPath template has versioning enabled. Simply, if we make a mistake and need to revert it will be easier.
  2. Create a new Library to store the forms created. I called mine InfoPath Content Type Demo
  3. Once the library is created we need to grab the URL as we’ll need that later. It will be something like http://LegerisForSharePoint/Library%20Name

InfoPath Form

Open up InfoPath Designer and from the Templates select the blank template and click Design Form

  1. Add a table to our form from the Insert tab.
  2. Add a Title to the form
  3. If required, change the theme of the table.
  4. Now the important bit, add a button so we can submit the form
    1. Change the button Properties make sure we choose submit.
    2. Click the Submit Option button and a new dialog will open
    3. Click Allow users to submit this from
    4. From the ‘Send data…’ dropdown choose SharePoint Document Library
    5. Now click the Add button. This will open the Data Connection Dialog so we can tell the form where to save the data.
    6. That URL you copied in step 3 of the Preparation steps needs to be pasted into the Document Library field
    7. So that we don’t keep overwriting the existing form we’re going to ensure that each form is saved with a unique name. click the fx button.
    8. Press the Insert Function button and select Concat.
    9. We only need to store two values so remove two of the ‘Double click to insert field’ so were left with concat(‘Double click to insert field’, )
    10. With the cursor positioned after the comma, click Insert Field and choose Now(). You should have concat(‘Double click to insert field’, now())
    11. Now double click the text ‘Double click to insert field’ and type ‘InfoPath Content Type Demo’
    12. Click Next then click Finish
    13. Click OK to close all the open dialogs

Publishing the InfoPath Form

You’ll notice from the File menu there is a 'publish button', however I want to show you that if you select the Publish Option from the file Menu you’ll see two buttons, Quick Publish and SharePoint Server. This is important, if you add columns to the form and you want those columns to be used on the Library as part of the view you need to use the SharePoint Server button!

  1. Click the SharePoint server button
  2. The first we need to do is Save our Form. Don’t save this to the Forms library, which you’ll notice in the video that is the default location. For now save it somewhere local, it will make sense in a bit.
  3. We now need to provide the URL to our SharePoint site. Mine happens to be Http://LegerisForSharePoint and click Next
  4. Now select ‘Site Content Type’ and click Next
  5. Create new Content Type will be selected so click Next.
  6. Provide a name for the Content Type. I used InfoPath Content Type Demo and click Next
  7. We now need to specify the location the InfoPath template will be stored, click the Browse button
  8. Select the Form Templates library and click Open
  9. Now provide the Template file name and click Save. We’ll now be back to the publishing dialog and the URL and file name will be filled in for us. Click Next
  10. We can add the columns from our form to the Content Type, however as we have created any yet we leave this blank, click Next
  11. Click the Publish button
  12. Once it’s published we can Close the dialog. 

Adding the Content Type to the InfoPath Content Type Demo Library

Back in the browser we need to navigate to the SharePoint library we created earlier, I called mine InfoPath Content Type Demo.

  1. Go to the Library Settings
  2. Click Advanced settings
  3. Check the option Yes to Allow management of content types Click Ok to save the change.
  4. Now we need to add the Content Type, click Add from existing content types.
  5. From the filter dropdown click Microsoft InfoPath
  6. You’ll see the content type we published, select it and click add and click OK
  7. Now we want to hide the Document Content type so users don’t select it in error. Click Change new button order and default content type
  8. Uncheck the Visible option for the Document Content Type.

Testing

Navigate back to our library and test it all works. If you click the New button from the ribbon it will open the InfoPath form. Click Submit and it will save a copy of the form. Notice how the form name is using the text value plus the date and time the form was created. If you repeat creating another new form you’ll see it doesn’t overwrite the previous as the date and time is different.

 

 

InfoPath Date Time Picker with Custom Dropdown

One issue I have with InfoPath is the awful looking date time picker and the fact that the time (hh:mm:ss) is just a text field.

This image shows how I've replaced the text box with more user friendly dropdown's.

Approach to achieving the dropdown

There are a couple of ways of doing this and my rule of thumb would be that if I need to use the Date and Time picker in more than one form then use a SharePoint list to store the values.

The options that I’ll demonstrate are:

  1. Store the values within the form by adding the values to each dropdown.
  2. Store the values in a SharePoint list and using a data connection to retrieve the values and use filters to display the values we want

Storing the values in the manual dropdown

Other than adding the Date Time picker to our form we’ll need to add two dropdowns, one for Hours and the other for Minutes.

By editing the properties of the Hour dropdown we can enter the choices manually, as shown:

 

 

 

 

 

Repeat the step above for Minutes:

 

 

 

 

 

 

The next thing to do is add some rules so that when the dropdown values change they set the time value; I’ll come onto that later as the rules are the same for both the manual and SharePoint lookup dropdown's.

SharePoint lookup list for dropdown

First, we need to create a SharePoint list to store all the values. I’ve provided a list template you’re welcome to use to save some time. Link to List Template

The list is fairly simple, however we have to work-a-round some quirks of InfoPath and how it handles choice lookups. This image shows the list:

Having created a list, I add a new column called Time Category which is a choice field. The quirk of SharePoint in that for each value in a choice field ONLY the first value is available for the filter. For example, if I added 3 choices:

Hour

5min

15min

Then, whatever values I set against each item only the first value will be available. For example, item 15 has choice values 'Hour' '5min' and '15min' selected. When the values are pulled through in InfoPath only Hour (the first value selected) is available. The solution is to create each permutation for the choice fields like this:

Hour, 5min, 15min

Hour, 5min

Hour, 15min

Hour

5min

15min

5min, 15min

Why do this? I can filter the Hour dropdown to only display values where the column contains Hour. The minutes allows for a few options so I could do 15 minutes, 5 minute or 1 minute intervals. We don’t need a 1min value in the choice because we just return all 60 items in the list.

Creating a Data Connection from the Form to the list

There are a couple of ways you can do this but from the InfoPath Data Tab click Data Connections. From the dialog we can add a new Data Connection which will start the Wizard.

The first thing to do is Create a new connection to Receive Data.

Next, click SharePoint library or list.

Specify the URL for your SharePoint Site.

Next we can pick the Hours and Minutes Lookup list we created.

From the available columns we can select the columns we want to work with, we just need to add Title and Time Category

Choose whether you want to store the information in the template.

Finally, enter the name for the data connection, the default will be the list name. Click Finish.

Adding the connections to the Hour and Minute Dropdowns

By editing the properties of the of the Hours dropdown we can get the values from an external data source. Select the Hours and Minutes lookup.

While we’re working on the Hours dropdown we can setup the filter.

 

 

 

 

 

 

Click the filter button as show to the right of this image.

The image below shows each of the options for configuring the filter…(click to enlarge)

Taking each of the dialogs starting top left, the first dialog will default for you to the dataFields and the SharePoint List Item: 

  • Click Filter Data button.
  • In the filter Data dialog click Add.
  • In the Specify Conditions dialog click the first dropdown and chose Select Field.
  • In the Select field or Group dialog I expanded Time Category and selected Value and clicked OK.
  • Now we can complete the condition by setting the middle dropdown to Contains.
  • Lastly, the last dropdown we need to enter the text value of Hour. Click OK.
  • Click OK to save the Filter Data dialog ,and
  • finally click OK to close the select Field and Group.

Repeat the step above for the Minute dropdown. The only difference being is that we need to apply a different filter so we can alter the Minute increments in either 15 min, 5 min or 1 min (note: if you want 1 min then don’t apply the filter as we want all values).

Rules for when the values change in the dropdown

When a user interacts with the dropdown and sets the Hours or Minutes we need to make sure the new value is passed to Date Time field.

The Hours rule applies an Action when the item changes. The condition can be left as is. By clicking Add we can ‘Set field’ value. On the Rule Details dialog enter the Field to be the Date Time field. For the value field click the fx button and the Insert formula dialog appears. Here’s my formula:

concat(substring-before(../my:Event_Date_Time, "T"), "T", ., ":", ../my:EventTimeMinute, ":00")

In summary, I’m concatenating the values together. The first value is the Date portion of the Date Time field by using Substring-Before T on the field. I then start to rebuild the Date Time field so it will formatted like this YYYY-MM-YYTHH:MM:00. Notice that my code for HH has full stop . which represents the current field the rule is applied to, in other words the dropdown field for Hours. I set the MM portion of the date using the current value set for the Minutes Dropdown.

 

 

 

 

Repeat the rule setting for Minutes only difference being the formula which is slightly different.

concat(substring-before(../my:Event_Date_Time, "T"), "T", ../my:EventTimeHour, ":", ., ":00")

You’ll notices that the HH portion is no using the value of the Hours dropdown and the minutes is now set to . which is the current field the rule is applied to

 

 

 

 

 

Testing

For testing we can just do a preview of the form. I purpose leave the time field on so that I can see when the Hours and Minutes, even date for that matter, are changed that the date and time work as expected.

Comment

Google+