Display Data on Frontend

The Data Profile feature allows you to collect the data from the data source and display it on the front end tabularly. You can easily filter out the data to extract useful information. 

The form entries are searched and displayed if they meet the specified conditions. You need to render the shortcode to display the profile data on the front end.

1. In the WordPress Admin dashboard, Go to Form Vibes >> Data Profile.
2. Click on Add New to create a new profile.
3. Under the Data Profile, you can display the form submissions using the table format, or you can use a Counter to display just the number of entries that meet the filter criteria.
4. Under the Data Profile feature, there are four sections.
   • Data Source
   • Fields
   • Table
   • Search

   Data Source

   

   • Form: Select the Form for which you want to create a data profile
   • Date Range: Set the range for the data, select from a preset range, or select a custom date.
   • Search: Enable the search toggle to use the search functionality on frontend
   • Filters: Set the filter parameters to select data based on some criteria. Choose the submission status and then select the field on which you would like the logic to depend on. All the field names are displayed to choose from. Next, set the filter conditions according to which you want to sort the form data.
   • Relation: Set relations like And, Or between multiple filter conditions.

   Fields

   

   • All table headers are displayed here.
   • Enable the Show Data on Row Expand option to display the row data in an expanded format.
   • You can also toggle the visibility of columns on row expansion.

   Table Settings

   

   • Default Rows: Limit the number of rows to be displayed at a time
   • Pagination: Enable it to give pagination
   • Limit: It allows you to customize the number of rows displayed on the Entries page.
   • Show Serial Number Column: Enable it to display the records serially.
   • Serial Number Column Title: Give the title to the serial number column header.

   Search

   • Search Columns: Specify the field from where you want to fetch the search result.
   • Search Operators: Set on which you want to run the query to narrow the search result.
   • Display filter on Frontend: Enable it to filter data from the Selected fields.
   • Alignment: Set alignment like left, right, and centre, search & filter fields will be aligned accordingly.

   
   Note: Select at least one value from the search options to avail search functionality at Frontend



5. Then Publish the profile. A Shortcode is generated, copy the code, and then render the shortcode using the shortcode widgets.