You are on page 1of 7

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

&nbsp. (Don't do it yet though -. then click on the APPLY icon in the upper right-hand corner of the screen.or backend).) &nbsp. 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. click on your List View name. In our example. simply click on the . we've chosen the SAMPLE QuickMode Contact Form. To do so. Include/Exclude Search All fields are searchable by default. Your list view should now show all of the fields that are included in the form you selected. You will see that the left-hand side of the screen now has an additional 'Form' section/field. Once you click on it. choose the form that you want to display data from. From the dropdown list. To exclude a field once included. Connect a Form to Your List View Before any data can be displayed. &nbsp.&nbsp.listed. put a checkmark in the checkbox to the right of the ID column.there are still further steps to be taken to prepare the list view. Include / Exclude Fields To include a field in the list view. &nbsp. Once you have checked all of the fields you want included in your view. you will need to publish the view. 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. &nbsp. you will see green checkmarks in the fields you selected in the Include in list column. click on the INCLUDE IN LIST icon in the upper mid-section of the screen.&nbsp. &nbsp. If you wish to exclude a field from search. you have to select the form you are going to pull the data from. 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.

To do so. to a field.green checkmark(s) for the fields you wish to exclude in the Include in search column. Item wrap code The Item wrap code column can be used to add your own HTML.Click to Visit&lt. . etc. 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. Link to an image &lt. then the data in a field.{value}&lt. If you do not want a field to be linkable. use the variable {value} as the 'container' for the data in the field in question. Then see the Item wrap code section below for instructions on how to add a link using HTML. you may want to include line breaks for better readability. to display the actual URL in the display view: &lt. img src="{value}"&gt. If so. or use the checkbox in the column to the right of the ID column. or. styles./a&gt. &nbsp. If you have a field that contains a URL and you want to link to it rather than to the form record. For example: Link to a URL &lt. then in the Wordwrap column. when clicked. then the text in a field will be shown in a single line without a line break. Wordwrap If the number in this field is set to 0. In cases where a text field might contain a large amount of data.a href="{value}" target="_blank"&gt./a&gt.a href="{value}" target="_blank"&gt. then turn it off in the same manner shown above. first unlink the field in this column. would redirect you to a view of the complete form record for that specific entry. &nbsp. specify the number of characters you want displayed per line for that field. &nbsp.

then you can do so by renumbering the Order by column: &nbsp. You will then see the fields rearranged in the sort order you specified. the fields are currently set to be displayed in 'Name.{value}&lt./a&gt. &nbsp. Message.or add specific variables to it if they remain constant for all images: &lt. (You can also use the tiny green arrows to the left of the text boxes to move the fields up and down as desired. order in which to display your fields by changing the numbers in this column.Email&lt.a href="{value}"&gt. the possibilities are endless!&nbsp. remember to click the tiny disc image to the right of the column header to save the order.a href="{value}"&gt.font color="#FF0000"&gt. Once you change the numbers in the column.' order as demonstrated&nbsp. Link to an Email Address (not recommend for front-end forms because of spammers) &lt. Within the boundaries of HTML and inline styles. below by the numbers in the Order by column. In our example. Email. or to display the actual Email address: &lt. &nbsp. Change the font color &lt. img src="{value}" width="200" alt="My Picture" border="0"&gt. ./font&gt. Order by Choose the&nbsp./a&gt.{value}&lt. If you want to change the order so that the Email address comes before the name.) &nbsp.

for multiple fields. .Published The Published column determines whether a field should be included in the list view or not. 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. Start by clicking on the List Intro Text tab to the right of the View tab on the screen: &nbsp. Details Let's set up the layout for the form fields now. For example: Save Your Work! Once you have made whatever changes are necessary on this screen. &nbsp. If you want to exclude a field from the list view. &nbsp. Click on the Details tab to the right of the List Intro Text tab. Page Layout &nbsp. List Intro Text Now it's time to start creating the layout for the page that will contain your form views. click on the APPLY icon in the upper right-hand corner of the screen to save your changes so far. then it will be included. You'll be taken to a WYSIWYG editor where you can add whatever introductory text you want to include on your page. &nbsp. Save Your Work! Once you have made whatever changes are necessary on this screen. then unpublish the column by checking the checkmark or. click on the APPLY icon in the upper right-hand corner of the screen to save your changes so far. If there is a green checkmark.

&nbsp. with the data below: So. as you can see. &nbsp. we're going to place the labels in column headers. &nbsp. instead of the data being in side-by-side format. In this case. or.&nbsp. You'll see that you now have a table which contains columns to hold your form field labels (left column) and data (right column). That blank screen might look a little intimidating but there's an easy way to get all your fields on the screen at once. click on the APPLY icon in the upper right-hand corner of the screen to save your changes so far.) &nbsp. ready for you to format. You can now manipulate that data in whatever way you like. in other words.The VALUE assigned to a field. Now click on the Details tab again. &nbsp.&nbsp. (Replace FIELDNAME with the name assigned to the field in your form. Click the Create Sample checkbox and then click the APPLY icon in the upper right-hand corner of the screen. the variables for each field consist of: {FIELDNAME:label} . . you'll be taken back to the View tab. You'll be taken to a new screen with another WYSIWYG editor for you to layout the form fields.) {FIELDNAME:value} .The LABEL assigned to a field. &nbsp. (Replace FIELDNAME with the name assigned to the field in your form. what a user entered when completing the form. After doing so. Save Your Work! Once you have made whatever changes are necessary on this screen.

IMPORTANT: Save the List View Once you are finished with your layout. &nbsp. we can publish the view. you will be ready to connect it to your web site. Once the list view has been published. click on the icon in the Publish column on the far right-hand side of the screen. To do so. Publish Now that your list view is ready. &nbsp. . 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. &nbsp. &nbsp.