mattbriggs

Generating Form XML

Blog Post created by mattbriggs Employee on Jun 13, 2016

You can create a Nintex Forms XML with an application and upload the file to a SharePoint list. The Nintex Forms On Premises 2013 SDK contains a code sample of an application that will take a stripped down XML description of a form and create a Nintex Form. In this post, I'll walk through my steps in creating, uploading, and then binding my the form input fields to a SharePoint 2013 list using the Simple Form Builder (GenerateFormXML).

Table of Contents

Sketch the form elements

First, I sketch out the parts of my form. In this case it is a contact form that lists a club for each contact:

Form title: Contact Information Form
First Name
Last Name
City
State
Zip
Club
Football Club
Fencing Club
Chess Club
Sewing Club

From working with Nintex Forms, I know the desktop layout is 700 pixels wide. I also know that the each input field such as a text area will also have a corresponding label control. My controls are going to be 50 pixels wide. The layout routine of the application follows a similar logic to the form filler. It starts at the upper left hand corner and places a control, and then continues to place controls until the row runs out of room and the moves to the next row. In addition, as I look at my list of elements, I will add an image as a form banner, and include the submit button. Knowing this, I then define each form element.

 

Define the form elements

My updated description sketch looks like this:

1 image [100 x 700]
2 label: Contact Information Form [50 x 700]
3 label: First Name: [150] 4 Textbox [200]
5 label: Last Name: [150] 6 Text Box [200]
7 label: City: [150] 8 Texbox [550]]
9 label: State: [150] 10 Textbox [550]
11 label: Zip: [150]: 12 Textbox [550]
13 ListBox Club: listbox [150]]
option: Football Club
option: Fencing Club
option: Chess Club
option: Sewing Club
14 Submit: [150] button

In writing the description, I mapped each element to the form width and kept the controls with a uniform height of 50 pixels. My banner was 100 x 700. For the name controls, I created their dimensions so that the layout routine would place the four controls (Label, TextBox, Label, TextBox) next to each other. That is the first label was 150 pixels. When the routine grabbed the next control, it placed it next to the first one for a total of 350, and then it grabbed the next Label (150) and next TextBox (200) for a total of 700. When it grabbed the next control, the City label it placed it on the next line.

 

Create the bare-bones XML file

Each control using the XML expected by the application uses the following schema:

 <control>
    <number>Integer</number>
    <type>Type [ListBox, Image, Label, Button, TextBox, YesNo] </type>
    <text>String</text>
    <height>Integer</height>
    <width>Integer</width>
  </control>

The application is limited in this iteration to the following control types: ListBox, Image, Label, Button, TextBox, YesNo. Marking up my description, I end up with the following XML code:

<form>
  <control>
    <number>1</number>
    <type>Image</type>
    <text>Banner</text>
    <height>100</height>
    <width>700</width>
    <url>http://that-or-this.com/sdk/banner_update.png</url>
  </control>
  <control>
    <number>2</number>
    <type>Label</type>
    <text>Contact Information Form</text>
    <height>50</height>
    <width>700</width>
  </control>
  <control>
    <number>3</number>
    <type>Label</type>
    <text>First Name:</text>
    <height>50</height>
    <width>150</width>
  </control>
  <control>
    <number>4</number>
    <type>TextBox</type>
    <text>Enter first name</text>
    <height>50</height>
    <width>200</width>
  </control>
  <control>
    <number>5</number>
    <type>Label</type>
    <text>Last Name:</text>
    <height>50</height>
    <width>150</width>
  </control>
  <control>
    <number>6</number>
    <type>TextBox</type>
    <text>Enter last name</text>
    <height>50</height>
    <width>200</width>
  </control>
  <control>
    <number>7</number>
    <type>Label</type>
    <text>City</text>
    <height>50</height>
    <width>150</width>
  </control>
  <control>
    <number>8</number>
    <type>TextBox</type>
    <text>Enter city</text>
    <height>50</height>
    <width>550</width>
  </control>
  <control>
    <number>9</number>
    <type>Label</type>
    <text>State:</text>
    <height>50</height>
    <width>150</width>
  </control>
  <control>
    <number>10</number>
    <type>TextBox</type>
    <text>Enter state</text>
    <height>50</height>
    <width>550</width>
  </control>
  <control>
    <number>11</number>
    <type>Label</type>
    <text>Zip:</text>
    <height>50</height>
    <width>150</width>
  </control>
  <control>
    <number>12</number>
    <type>TextBox</type>
    <text>Enter Zip</text>
    <height>50</height>
    <width>550</width>
  </control>
  <control>
    <number>13</number>
    <type>ListBox</type>
    <text>Club</text>
    <height>50</height>
    <width>150</width>
    <choices>
      <choice>Football Club</choice>
      <choice>Fencing Club</choice>
      <choice>Chess Club</choice>
      <choice>Sewing Club</choice>
    </choices>
  </control>
  <control>
    <number>14</number>
    <type>Label</type>
    <text>&#160;</text>
    <height>50</height>
    <width>700</width>
  </control>
  <control>
    <number>15</number>
    <type>Button</type>
    <text>Submit</text>
    <height>50</height>
    <width>150</width>
  </control>
</form>

The current application lacks a validation step, and so I checked my tool with XML Notepad. In creating my XML I made a couple of errors. The application is case sensitive for the form type names, and I had typed "textbox" instead of "TextBox." and I also added a blank label control (number 14) and this causes an error, so I used a space entity (&#160;).

 

Run the application

running.png

When I set up the application, I found two folders in the sample. I added 2013_ONPREM_NF_GenerateFormXML to Visual Studio. And then I placed XmlParts in a directory on my C:/ Drive (C:\inputfiles\XmlParts). I opened the solution file in Visual Studio and updated the file inputs for reach TODO item with the local path name.

            // TODO: update path to: <filepathpath>Form_blank.xml
            formxml.Load(@"C:\inputfiles\XmlParts\Form_blank.xml"

I also pointed the application to my bare-bones form XML file, and the output to the same directory. I ran the file and the generated XML appeared in the console, and the output file appeared in the target directory.

 

Load the Form XML

forma.png

The description loaded. You might compare this to listed elements above. The form is mechanically produced using the text description. The input fields are not bound on the initial load.

 

Create and Bind Fields

formb.png

I opened the list, clicked Edit and then I created the following column types:

  • First Name: Text SharePoint list column type.
  • LastName: Text SharePoint list column type.
  • City: Text SharePoint list column type.
  • Club (Listbox): Text SharePoint list column type.

And then I bound each imported control in the Forms designer. To test the form, I open the list, click new item, and then type values into the fields and submit the form. SharePoint returns me to the list view, and I can see the new record in the list with the values I just typed.

Outcomes