This is the second of four free labs Qdabra is offering to help people learn how to build InfoPath forms. We’re working with a form template for an event (think Evite), and I hope you’re already thinking about what electronic form you can create for your company or organization.
In Lab 1, you built the event form template. In this lab, we will:
-
Add a background image to the form template
-
Add a picture control with default image
-
Convert the picture control to save as link and upload image to SharePoint using rules
-
Configure email notifications in the SharePoint library
ADD A BACKGROUND IMAGE
1. Open the Event Planning form you created in Lab 1 in InfoPath Design mode (right click and select Design).
If you do not have a saved form, you can start with an XSN we provide:
a. Copy the Lab 2 folder and save it someplace you’ll be able to find it again.
b. Right click on the Event_Planning_(After_Lab_2) XSN and select Design:
c. This will open the template in Design mode in InfoPath. You’ll need to re-save the template, since it was downloaded from another location. On the File tab of the Ribbon, select Save As:
And save the template as Event Planning.
2. In the Page Design tab, make sure that the Details (default) view is selected.
3. Click on the Properties button. In the View Properties dialog, you can customize the background by changing the color and/or using a background image. For the purposes of this lab, we will do the latter. Check the box ‘Use a background picture’ and browse to an BackgroundImage.gif image in your Lab 2 folder.
4. Locate “Background Image.gif” and click Insert.
5. Check the boxes ‘Tile horizontally’ and ‘Tile vertically’ and click OK.
Your form should look similar to the below one:
ADD A PICTURE CONTROL WITH DEFAULT IMAGE
1. In the Main Data Source, you will see an image field. Click on the down arrow > Properties and a dialog box opens where you can see the Data Type is set to ‘Picture or File Attachment (base64).’ Click OK. Drag this field onto your canvas, right inside the empty space, and choose Picture.
2. Right click on the picture control > Picture Properties. select Specify default picture and click Browse.
3. Locate “YouAreInvitedImage.gif” in your lab folder and click Insert.
4. Go to the Size tab, leave the Height set to auto, and for the Width, enter 100%.
5. Click OK. You should now see a default image in the picture control (users will still be able to change this image as desired).
CONVERT THE PICTURE CONTROL TO SAVE AS LINK IN SHAREPOINT
The SaveToSharePoint command allows you to save a file, a set of files, an image, or a set of images to a SharePoint document library. This will save a link in the form instead of the actual image and reduce the size of the XML.
1. In InfoPath, from the Page Design tab, select the Designer view. In this view, you will see a pre-configured layout table and controls that you can use in your form design.
2. Click inside the Image Layout layout table:
3. In the Layout tab > Select > Table:
Your entire table should now be highlighted in blue. Copy the table to your clipboard by clicking Ctrl + C on your keyboard.
4. In the Page Design tab, select Details to switch back to the details view.
5. Remove the picture control that you have added in the previous section of this lab by highlighting and deleting it.
6. Place your cursor in the empty section, right click, Paste Options > Merge Formatting.
You should be able to see the image below:
Extra credit: Let’s take a quick look on how rules work.
a. Return to the designer canvas (Page Design > View > Designer). From the Home tab > Manage Rules. Click the Upload Image button in the table. There are two rules associated with this button; select the SaveToSharePoint rule. The first action in this rule calls the qRules SaveToSharePoint command.
b. To view the command syntax being used, click on that action, and then click on the fx button. This command saves the content of the image field (specified in the /xpath parameter) to the SharePoint library URL (specified in the /url parameter). Click OK two times to close all the dialogs.
7. To set the library URL where our images will be saved to, go to the Main Data Source and double-click on the libraryURL field.
8. In the Default Value section of the Data tab, enter your SharePoint library URL, that is: http://<YourSharePointSite>/my/personal/<username>/<YourDocLibrary> replacing <YourSharePointSite> <username> and <YourDocLibrary> with your actual SharePoint site url, actual user name and the document library name on your My Site where you would like to save your images. Click OK when done.
9. Save your InfoPath form template (File > Save).
PUBLISH TO SHAREPOINT LIBRARY
1. Select File > Publish. If you’ve previously published this form to your SharePoint library, you can use the Quick Publish button (make sure the URL displayed by the Quick Publish button is for your form library). If it is not you will need to choose SharePoint Server:
a. The Publishing Wizard opens. Enter the URL to your SharePoint My Site and click Next.
b. Keep the default “Form Library.” Click Next.
c. If you created a form library in Lab 1, you can publish to that. Otherwise, keep the default “Create a new form library.” Click Next.
Name your form library Events:
d. Next > Next > check Open this form library > Publish.
To test your image control, click Add document when your SharePoint document library opens. Pick new image > Click here to insert a picture and upload any image from your local machine. On successful upload, you should be able to see a new image submitted into your SharePoint library.
CONFIGURE EMAIL NOTIFICATIONS IN THE SHAREPOINT LIBRARY
SharePoint 2010 allows us to configure notifications to a single user and/or group either through email or text message (SMS). For the purposes of this lab, we will set up email alerts.
1. Go to your SharePoint library and switch to the Library tab of the Library Tools menu, then click on the Alert Me button:
2. In the Alert Me options, select Set Alert on this library.
3. Complete the New Alert wizard:
a. Enter the title for the alert. The title will be included in the subject of the notification sent for the alert so we’d want something descriptive; something like ‘New items’.
b. In the Users field, enter the user name or e-mail address of the person(s) and/or group(s) whom you wish to send alerts to. Separate multiple entries with semicolons.
c. Leave the default delivery method to send alerts via email using your email address.
d. For the ‘Change Type’, you can specify the type of changes that you want to be alerted to. For this lab, we’d only want to receive notifications when new items are added, so select that option.
e. You may also specify whether to filter alerts based on specific criteria, or restrict your alerts to only include items that show in a particular view. Leave the default filter to send alert when anything changes.
f. Leave the default frequency to send notification immediately.
Your new alert settings should be similar to this:
4. Click OK.
5. You should receive an email for the new alert that you have successfully created.
You are now finished with Lab 2. We’ll release Lab 3 on Friday, July 16. If you have any questions, feel free to post them to the Newbie Questions forum. Once you’ve complete these labs, you’ll be ready to become an InfoPath master. Learn about our in-person and online options.
Requirements for the free training labs: