Custom Save and Submit Buttons for InfoPath Browser Forms

Posted by MarkHaverty on May 30, 2011 in InfoPath, SharePoint | 26 comments

Introduction
This article describes how to add custom Save and Submit buttons to your InfoPath 2010 browser enabled forms without code. I’ve split this article into two parts; Part one provides a basic overview of why you might want (or need) to do this so if you’re just interested in the “how to…” then skip straight to Part two.

Part One – Background Information
InfoPath 2010 and Forms Services allow browser based forms to be deployed to SharePoint 2010 with form commands and options displayed in the now familiar Ribbon. This is great for usability but in some scenarios displaying the Ribbon may not be appropriate for your form. For example; you may want your form to be automatically given a file name when it’s saved to a Forms Library rather than have a name manually provided by the end-user when they click the Save or Save As button in the Ribbon. Perhaps you only want a Save or Submit form option to be available to the end-user when certain fields have been completed based on business rules defined within the form template. These are basic examples of scenarios that will require you to think about how end-users will save and/or submit a form to ensure your business requirements are maintained.

The screenshot below shows an example of the Ribbon in an InfoPath browser enabled form and the Save As dialog:

Basic Control of the Ribbon
When designing your browser enabled form template you can select the options you want displayed in the Ribbon or simply disable it altogether. To control the display of the Ribbon, open your form template in InfoPath 2010 Designer, click File > Form Options and select the Web Browser category as shown below:

I’ve worked on a number of InfoPath projects for clients where, for one reason or another, having the Ribbon displayed above a browser enabled form simply wasn’t appropriate. In most cases it’s for one, or all of the following reasons:

• The need to automatically name completed or partially completed forms when they’re saved to a Forms Library
• Only allow forms to be saved and/or submitted when business rules defined within the form template have been met. This normally goes hand-in-hand with a request to hide save and submit options until the defined business rules have been met
• Make the form look like an integral part of the SharePoint based intranet by displaying it through the ‘InfoPath Form Web Part’. A number of clients have said that they find the additional InfoPath Ribbon “distracting and potentially confusing”

If we work on the basis that we’re disabling the Ribbon within our form template, we need to provide an alternative way for end-users to save and submit forms. There are a number of ways we can do this and depending on the complexity of the requirement, the use of code may be unavoidable. In this article however, I’m going to outline how we can add a Save button and a Submit button to a form template without code.

Single Submit Action… A Common Stumbling Block!
While we can create two ‘Submit data’ data connections within our form template (e.g. one named ‘Save Form’ and the other named ‘Submit Form’) that both submit the form to our designated forms library, InfoPath form templates will only support a single submit action. This means that if we drop two buttons onto our form and configure:

• one button to save the form using the ‘Submit data’ connection named ‘Save Form’ and,
• the other button to submit the form using the ‘Submit data’ data connection named ‘Submit Form’

what we’ll actually find is that both buttons use the same submit data connection (whichever one was configured last).

Part Two – Creating the Custom Save and Submit Buttons
To get around the issue outlined above, we need to create two ‘Submit data’ data connections, one to save the form and one to submit it. We then need to add two buttons to our form template, one for saving the form and the other for submitting it. Once that’s been done we can then associate our two ‘Submit data’ data connections to our two new buttons however, instead of associating the data connections as ‘Submit’ actions, we’ll use ‘Rules and Custom Code’ actions instead.

Step 1 – Create the Data Connections
Follow the steps below to create the ‘Submit data’ data connection to SAVE the form. Items in blue text should be clicked, items in red text should be typed:

1. Open your form template Microsoft InfoPath Designer 2010
2. Click the Data tab in the ribbon then click Data Connections in the ‘Get External Data’ section
3. Click the Add button in the Data Connections window
4. Select the Submit data radio button and click Next
5. Select the To a document library on a SharePoint site radio button and click Next
6. In the Document Library field, enter the URL to your forms library where you want your forms to be saved
7. In the File Name field, enter a static name for the form (not really suitable for this example) or, click the Function button (fx) to select field containing a name for the form or function such as a concat to create a file name. I typically use a concat function or have another field within the form template that contains the has the file name based on a concat function
8. Check the Allow overwrite if file exists checkbox then click Next
9. In the Enter a name for this data connection field, enter Save Form to Library
10. Un-check the Set as the default submit connection checkbox and click Finish

Follow the steps below to create the ‘Submit data’ connection to SUBMIT the form:

1. Click the Add button in the Data Connections window
2. Select the Submit data radio button and click Next
3. Select the To a document library on a SharePoint site radio button and click Next
4. In the Document Library field, enter the URL to your forms library where you want your forms to be saved
5. In the File Name field, enter a static name for the form (not really suitable for this example) or, click the Function button (fx) to select field containing a name for the form or a function such as a concat to create a file name. I typically use a concat function or have another field within the form template that contains the has the file name based on a concat function
6. If the submit operation will only ever be run once on the form, un-check the Allow overwrite if file exists checkbox. If the form has some workflow associated to it that means the form could be passed back and re-submitted you may want to leave this checked. Click Next
7. In the Enter a name for this data connection field, enter Submit Form to Library
8. Un-check the Set as the default submit connection checkbox and click Finish
9. Close the Data Connections dialog window

Step 2 – Add the Custom Save and Submit Buttons
Follow the steps below to add the custom save and submit buttons then associate the relevant ‘Submit data’ data connections to each button as ‘Rules and Custom Code’ actions:

1. Place your cursor where you want the SAVE button to display in the form then add a button under the Objects section in the Control Pane (accessed via the Home tab on the ribbon)
2. Select the button then click the Properties tab in the ribbon and click the Control Properties button (the Button Properties dialog will display)
3. Ensure the Action is set as Rules and Custom Code
4. In the Label field, enter the word SAVE then click OK to close the Button Properties dialog
5. With the button still selected, click the down arrow on the Add Rule button, expand When This Button is Clicked then select the Submit Data option (the Rule Details dialog will display)
6. Select the Save Form to Library data connection from the drop-down menu then click OK to close the Rule Details dialog
7. Place your cursor where you want the SUBMIT button to display in the form then add a button under the Objects section in the Control Pane (accessed via the Home tab on the ribbon)
8. Select the button then click the Properties tab in the ribbon and click the Control Properties button (the Button Properties dialog will display)
9. Ensure the Action is set as Rules and Custom Code
10. In the Label field, enter the word SUBMIT then click OK to close the Button Properties dialog
11. With the button still selected, click the down arrow on the Add Rule button, expand When This Button is Clicked then select the Submit Data option (the Rule Details dialog will display)
12. Select the Submit Form to Library data connection from the drop-down menu then click OK to close the Rule Details dialog

Once you’ve added the custom save and submit buttons as outlined above, publish the form template to SharePoint and test.

Summary
There are some additional things that I’ll typically do if I’m adding custom save and submit buttons in this way which I haven’t detailed in this article as they’re slightly off topic, however I’ve outlined them below. Please note that I’m not suggesting that any of the following is necessarily best practice as that’s so often dictated by the business requirement:

• Include a hidden field in the form template to hold the automatically generated filename (typically based on a concatenation of data in other fields) then reference the field for the file name in the data connections. If it’s appropriate, I’ll do this so that I can concatenate the hidden field with some additional data to difference the filenames based on the saved and submitted versions of the forms
• Given that we need to enable file overwrites for at least the save data connection, I’ll always ensure that versioning is enabled on the underlying forms library
• Apply additional rules to ensure the SUBMIT button only displays when required fields contain valid data. This is a fairly basic thing but it really helps if the end-user only sees the SAVE button until such time that they’ve completed all the elements of the form that are required to submit it
• I normally go for an “all or nothing” approach with the ribbon so if I’m adding custom save and submit buttons, I’ll typically turn the ribbon off altogether