Create a List View How to Create a List View for Form Display  

Click on Components > xForms Display Records > List Views to open the extension.

In the main screen that opens, you will need to create a new List View for your form display. To do so, click on the NEW icon in the upper right-hand corner of the screen.   You will then see a screen that looks like this:   Screen Variables

Name -Give your list view a name. For example: My First List. Type - Select a form type from the dropdown list. In our example, the form type is com_breezingforms. Display in - Choose whether to display the form data in the Frontend, the Backend, or both.

Show XLS export - If this box is checked, the form list display will include an 'XLS Export' link. This will allow the admin (backend and front-end forms) or user (front-end forms) to export the data in XLS format. Show print button - If this box is checked, the form list display will include a 'Print' button. Show metadata - If this box is checked, the form list display will include metadata. Show ID column - If this box is checked, the form list display will include the record ID column. Use view name as title - If this box is checked, the title of the form list display will be the same as the name you entered in the first 'Name' field at the top of this screen. Only show published records (if applicable) -  If this box is checked, it will only show records that have been published (if the form integration provides it). For BreezingForms, you would have to export the applicable records in the Manage Records screen, which would then be the ones used as 'published records' for the form display.

Once you have filled in the forms above as needed, click on the SAVE icon in the upper right-hand corner of the screen to save your settings. You will then be taken back to the List Views screen where the view you created above will now be

listed. You will see in the far right-hand column that the view has not yet been published. Before the data records can be displayed (either in the front- or backend), you will need to publish the view. (Don't do it yet though -- there are still further steps to be taken to prepare the list view.)   Connect a Form to Your List View

Before any data can be displayed, you have to select the form you are going to pull the data from. To do so, click on your List View name.  You will see that the left-hand side of the screen now has an additional 'Form' section/field. From the dropdown list, choose the form that you want to display data from. In our example, we've chosen the SAMPLE QuickMode Contact Form.

then click on the APPLY icon in the upper right-hand corner of the screen.   Your list view should now show all of the fields that are included in the form you selected.   Customize List View Settings Now it's time to specify what should or shouldn't be included in the list view that you are creating. Include / Exclude Fields To include a field in the list view, put a checkmark in the checkbox to the right of the ID column. Once you have checked all of the fields you want included in your view,  click on the INCLUDE IN LIST icon in the upper mid-section of the screen.

  Once you click on it, you will see green checkmarks in the fields you selected in the Include in list column.   To exclude a field once included, you can either click on an individual checkmark or use the checkbox and then click on the DO NOT INCLUDE IN LIST icon in the upper mid-section of the screen.   Include/Exclude Search All fields are searchable by default. If you wish to exclude a field from search, simply click on the

green checkmark(s) for the fields you wish to exclude in the Include in search column, or use the checkbox in the column to the right of the ID column, and then click on the DO NOT INCLUDE IN SEARCH icon in the upper mid-section of the screen.

  Linkable Fields If you choose a field to be Linkable, then the data in a field, when clicked, would redirect you to a view of the complete form record for that specific entry. If you do not want a field to be linkable, then turn it off in the same manner shown above. If you have a field that contains a URL and you want to link to it rather than to the form record, first unlink the field in this column. Then see the Item wrap code section below for instructions on how to add a link using HTML.

  Wordwrap If the number in this field is set to 0, then the text in a field will be shown in a single line without a line break. In cases where a text field might contain a large amount of data, you may want to include line breaks for better readability. If so, then in the Wordwrap column, specify the number of characters you want displayed per line for that field.   Item wrap code The Item wrap code column can be used to add your own HTML, styles, etc. to a field. To do so, use the variable {value} as the 'container' for the data in the field in question. For example: Link to a URL

<a href="{value}" target="_blank">Click to Visit</a>

or, to display the actual URL in the display view:

<a href="{value}" target="_blank">{value}</a>

Link to an image

< img src="{value}">

or add specific variables to it if they remain constant for all images:

< img src="{value}" width="200" alt="My Picture" border="0">

Change the font color

<font color="#FF0000">{value}</font>

Link to an Email Address (not recommend for front-end forms because of spammers)

<a href="{value}">Email</a>

or to display the actual Email address:

<a href="{value}">{value}</a>

Within the boundaries of HTML and inline styles, the possibilities are endless!  Order by Choose the  order in which to display your fields by changing the numbers in this column. In our example, the fields are currently set to be displayed in 'Name, Email, Message,' order as demonstrated  below by the numbers in the Order by column.   If you want to change the order so that the Email address comes before the name, then you can do so by renumbering the Order by column:   Once you change the numbers in the column, remember to click the tiny disc image to the right of the column header to save the order.

  You will then see the fields rearranged in the sort order you specified. (You can also use the tiny green arrows to the left of the text boxes to move the fields up and down as desired.)

 

Published The Published column determines whether a field should be included in the list view or not. If there is a green checkmark, then it will be included. If you want to exclude a field from the list view, then unpublish the column by checking the checkmark or, for multiple fields, by checking the boxes to the right of the ID column and then clicking on the UNPUBLISH icon in the upper right-hand corner of the screen.   Save Your Work!

Once you have made whatever changes are necessary on this screen, click on the APPLY icon in the upper right-hand corner of the screen to save your changes so far.

Page Layout

  List Intro Text Now it's time to start creating the layout for the page that will contain your form views. Start by clicking on the List Intro Text tab to the right of the View tab on the screen:     You'll be taken to a WYSIWYG editor where you can add whatever introductory text you want to include on your page. For example:

Save Your Work!

Once you have made whatever changes are necessary on this screen, click on the APPLY icon in the upper right-hand corner of the screen to save your changes so far.

  Details Let's set up the layout for the form fields now. Click on the Details tab to the right of the List Intro Text tab.

    You'll be taken to a new screen with another WYSIWYG editor for you to layout the form fields.    That blank screen might look a little intimidating but there's an easy way to get all your fields on the screen at once, ready for you to format. Click the Create Sample checkbox and then click the APPLY icon in the upper right-hand corner of the screen.  

  After doing so, you'll be taken back to the View tab. Now click on the Details tab again. You'll see that you now have a table which contains columns to hold your form field labels (left column) and data (right column).   You can now manipulate that data in whatever way you like. In this case, instead of the data being in side-by-side format, we're going to place the labels in column headers, with the data below:

So, as you can see, the variables for each field consist of: {FIELDNAME:label} - The LABEL assigned to a field. (Replace FIELDNAME with the name assigned to the field in your form.)

{FIELDNAME:value} - The VALUE assigned to a field; or, in other words, what a user entered when completing the form. (Replace FIELDNAME with the name assigned to the field in your form.)   Save Your Work!

Once you have made whatever changes are necessary on this screen, click on the APPLY icon in the upper right-hand corner of the screen to save your changes so far.

IMPORTANT: Save the List View

Once you are finished with your layout, click on the SAVE icon in the upper right-hand corner of the screen to save all of the changes you have made to your list view.

  Publish

Now that your list view is ready, we can publish the view. To do so, click on the icon in the Publish column on the far right-hand side of the screen.

    Once the list view has been published, you will be ready to connect it to your web site.