InfoPath basic application tutorial-1 design a simple form template

At work, I often encounter questions related to InfoPath from customers and colleagues. blog readers often send emails, indicating that there are too few tutorials related to InfoPath. To be honest, I have never read the learning materials of InfoPath, And I have accumulated my understanding and experience. Recently, I have summarized some of my experiences and shared them with you. I hope to inspire others and make common progress.

InfoPath is a member of Microsoft Office products. Compared with Word and Excel, InfoPath is still unfamiliar to many users. InfoPath is a form tool dedicated to data collection in the Office family. InfoPath allows you to quickly create a form template and standardize data to obtain and summarize valid information more quickly.

Since InfoPath 2003, InfoPath has also gone through three versions. The latest official version is InfoPath 2010. In this series of articles, InfoPath 2010 is used as an example. InfoPath2007 has similar functions and 2010 concepts.

InfoPath has two modes: Design and fill. In 2010, it simply becomes two clients: InfoPath Designer and InfoPath Filler. The design mode is used by form designers to design form templates. The fill mode is used by common users to fill in data based on form templates.

The simple scenario for applying the InfoPath client is that form templates are designed and saved. the xsn file is shared to common users by email or other means. Common Users fill in the file based on the designed form template and save it. xml is then submitted to the statistics summary personnel. However, in practice, we will find that such use will confuse common users. It is very unacceptable for users to learn how to use a new client. Fortunately, we have SharePoint. We can release the designed form template to SharePoint and render the InfoPath form directly in the browser using Forms Services. Users no longer need to install the client, you can enter the form directly in the browser, greatly improving the user experience.

Combining InfoPath with SharePoint can meet most forms-related requirements. I will explain several typical scenarios later. Today, let's start with the most basic-how to design a simple InfoPath form template, which can be summarized into the following four steps:

Select form template]

Open the InfoPath Designer 2010 client. The first interface is to select a form template. InfoPath has several built-in form templates, infoPath can automatically create a data source structure based on our database tables, Web services, XML files, and SharePoint data sources. Without these requirements, we can select "blank form ":

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image001 "border =" 0 "alt =" clip_image001 "height =" 344 "src =" http://www.bkjia.com/uploads/allimg/131228/1PKaa4-0.png "/>

After selecting a form template, check the form compatibility and click File -- & gt; Information -- & gt; form option 2007 click tool -- & gt; form option ):

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image002 "border =" 0 "alt =" clip_image002 "height =" 311 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK94117-1.png "/>

In "compatibility", check whether the current form is a Web-compatible Web browser form ):

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image003 "border =" 0 "alt =" clip_image003 "height =" 330 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK94X3-2.png "/>

For the form to be published to SharePoint, we need to confirm that the form is in Web compatibility mode, otherwise it will not be filled in the browser after the release.

Create a data source]

By default, the primary data source is displayed in the right pane. The primary interface is a blank form:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image004 "border =" 0 "alt =" clip_image004 "height =" 357 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK96406-3.png "/>

The data in the form template must be stored in the primary data source. Therefore, we must first create the data structure of the data to be collected in the primary data source.

MyFields is the default group in the primary data source. All other domain groups we create must be in myFields. We can modify its name, but cannot delete it.

When adding a domain group, we can see the following types:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image005 "border =" 0 "alt =" clip_image005 "height =" 231 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK9E20-4.png "/>

• Field element): it can be understood as a field, which is the data field we will collect in the form. The Data Types of each domain are divided:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image006 "border =" 0 "alt =" clip_image006 "height =" 237 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK94527-5.png "/>

The data to be stored in the field is used to determine the type.

Note that the "DUPLICATE" option below indicates that the domain becomes a duplicate domain. The duplicate domain is used to store multiple values. For example, each person may have multiple contact numbers:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image007 "border =" 0 "alt =" clip_image007 "height =" 116 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK94G0-6.png "/>

The icon of the duplicate domain is different from that of other domains, and an arrow down is added.

• Group: a collection of domains used to organize domains. Groups can be nested, that is, groups can contain groups. The Group can also be repeated:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image008 "border =" 0 "alt =" clip_image008 "height =" 123 "src =" http://www.bkjia.com/uploads/allimg/131228/1PKa111-7.png "/>

• Domain attribute): attribute, cannot be empty. Can be added to the lower level of the domain element. Repeatable.

• Group options): Special Groups, including fields or groups, can be replaced as options. For example, you can use the group option by entering the contact information, mobile phone number or home phone number, as shown in the following figure:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image009 "border =" 0 "alt =" clip_image009 "height =" 69 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK920U-8.png "/>

The result is as follows:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image010 "border =" 0 "alt =" clip_image010 "height =" 93 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK951O-9.png "/>

The home phone number is displayed by default. Click the icon on the left to switch to the mobile phone number:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image011 "border =" 0 "alt =" clip_image011 "height =" 95 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK91J8-10.png "/>

Design form styles]

After creating the data source as needed, you can design the form.

Forms are composed of views. Each view can contain multiple controls, and each control must be bound to the corresponding data source.

You can add controls to a view page in either of the following ways:

• Select the required widget from the control pane.

On the design main interface, move the cursor to the position where you want to add the control. In the control pane, click the required control. Remove the "automatically create data source" option below ):

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image012 "border =" 0 "alt =" clip_image012 "height =" 328 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK91953-11.png "/>

On the displayed page, select the data source to bind:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image013 "border =" 0 "alt =" clip_image013 "height =" 254 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK91545-12.png "/>

• Select the required control in the data source pane.

Right-click the domain group to be added to the View:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image014 "border =" 0 "alt =" clip_image014 "height =" 246 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK951E-13.png "/>

Click the desired control in the menu. If the required control is not in the menu, click "Others ").

You can also right-click the control that has been added to the view and select "Modify control" to modify the control type:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image015 "border =" 0 "alt =" clip_image015 "height =" 273 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK95Q0-14.png "/>

Right-click the control that has been added to the design main interface:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image016 "border =" 0 "alt =" clip_image016 "height =" 257 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK95306-15.png "/>

You can modify the properties of a widget on the property editing page:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image017 "border =" 0 "alt =" clip_image017 "height =" 338 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK93B8-16.png "/>

Attributes that can be customized in different controls are also different. You need to familiarize yourself with them through practice.

Adjust the position and layout of each control in the view as needed:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image018 "border =" 0 "alt =" clip_image018 "height =" 220 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK9D01-17.png "/>

Click Preview in the upper left corner or press F5 to preview the effect:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image019 "border =" 0 "alt =" clip_image019 "height =" 117 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK954c-18.png "/>

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image020 "border =" 0 "alt =" clip_image020 "height =" 243 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK9B52-19.png "/>

Save/release form template]

• For the scenario where the client fills in the form, save and click File -- & gt; Publish -- & gt; email/network location:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image021 "border =" 0 "alt =" clip_image021 "height =" 239 "src =" http://www.bkjia.com/uploads/allimg/131228/1PKa006-20.png "/>

• For the form that needs to be filled in the browser, save it and click the file -- & gt; Publish -- & gt; SharePoint Server:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image022 "border =" 0 "alt =" clip_image022 "height =" 283 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK960Y-21.png "/>

Enter the address of the SharePoint Server and click Next:

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1PK94317-22.png "/>

Click "Next", select "Create form library", click "Next", enter the name of the form library to be created, and continue the next step until the release:

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image024 "border =" 0 "alt =" clip_image024 "height =" 110 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK922T-23.png "/>

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image025 "border =" 0 "alt =" clip_image025 "height =" 289 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK92O0-24.png "/>

Click "open this form in the browser ":

650) this. width = 650; "style =" background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px "title =" clip_image026 "border =" 0 "alt =" clip_image026 "height =" 335 "src =" http://www.bkjia.com/uploads/allimg/131228/1PK924C-25.png "/>

Summary:

After the above four steps, a simple InfoPath form template has been completed. The subsequent articles will continue to explain how to improve the form on this basis.

This article is from the "sunny technology blog" and is not reposted!