Visforms 5
Example Parameter Replacement

Example Parameter Replacement

Example with parameter replacement in the plugin string parameter “fieldselect”

Note: These features are part of the Visforms Subscription and are not included in the free Visforms version.

For a better understanding, we recommend reading the documentation completely and using the Section Introduction to start.
Relationships explained in earlier sections of the documentation are not repeated here.

By using placeholder replacement in the plugin string parameter 'fieldselect', it is possible, for example, in an additional module, to display only the data filtered to information from the current detail record in the data detail view.

Activate the plugin in the Plugin Manager

Note: Please make sure you have installed your Visforms Subscription.

You must activate the plugin in the Plugin Manager before you can use its features.

To do this, go to the “System” menu entry in the administration of your Joomla installation and then to the “Plugins” entry on the “Manage” tile.
Find the plugin entry with the name Content Plugin - Visforms Data.

Note: To do this, use the search filter above the plugin list.

The plugin is activated when you see a green check mark in the status column.
It is deactivated when there is a gray circle with a white X in this place.
In this case, click once on the gray circle to activate the plugin.

Note: If the plugin is not activated, the string you use to insert the data into the article will not be deleted from the article.

Example with Standard Table Layout

How it works

The example is based on two forms, Users and Vehicles, and a menu entry for displaying the list view and detail view for the Users form.
Three additional modules of the type Custom Module are assigned to the menu entry for the data view for the Users form.
The three additional modules of the type Custom Module each contain a slightly different plugin string for the Content Plugin - Visforms Data for displaying the data from the Vehicles form.

  • Form Users with form ID 39:
    • Various user information is requested.
  • Form Vehicles with form ID 40:
    • Various vehicle information is requested.
    • The required form field Select User with field ID 407 is of field type Listbox SQL:
      • It retrieves a list of all users from the data table of the form Users.
      • The option text is the user’s first name and last name.
      • The option value is the ID of the user’s record in the data table of the form Users.
      • Field Configuration » Tab: Basic Settings

        Group: Dynamic Settings » Parameter: SQL Select Statement =

        select CONCAT(F395, ' ', F396) as label, id as value from #__visforms_39;
  • Data Views
    • List view and detail view are displayed via a menu item of type Form Data.
      • Three additional modules of type Custom Module are assigned to the menu item:
        • Module User’s Registered Vehicles
        • Module User’s Registered Classic Cars
        • Module User’s Registered Classic Cars (sorted by year of manufacture)
    • List View:
      • A data list with selected fields is displayed in the frontend via a menu item.
      • The list view suppresses the display of the three additional modules by:
        • a small piece of custom CSS,
        • a CSS class name set in the module configuration in the Module Class parameter.
    • Detail View:
      • The detail view is opened on the left side of the data list by clicking on the configurable detail view icon.
      • The 3 additional modules of type Custom Module each contain their own plugin string for the activated Content Plugin - Visforms Data.
The detail view is opened on the left side of the data list by clicking on the configurable detail view icon.

Basic Configuration

List view and detail view are displayed via a menu entry with the following configuration:

  • Menu Configuration » Tab: Form Data Display

    Group: Form Data Display » Parameter: Records per page = 5
    Group: Form Data Display » Parameter: Show column headers = “show”
    Group: Form Data Display » Parameter: Show table borders = “show”
    Group: Form Data Display » Parameter: Show search bar = “No”

The form fields First Name, Last Name, and City are displayed with the following configuration:

  • Field Configuration » Tab: Data Usage in the Frontend

    Group: Frontend Data Display Settings » Parameter: Data Display in the Frontend = “List and Details”

The form field Company is displayed with the following configuration:

  • Field Configuration » Tab: Data Usage in the Frontend

    Group: Frontend Data Display Settings » Parameter: Data Display in the Frontend = “List Only”

All other form fields are displayed with the following configuration:

  • Field Configuration » Tab: Data Usage in the Frontend

    Group: Frontend Data Display Settings » Parameter: Data Display in the Frontend = “Do Not Display”

For the menu entry for displaying the list view and detail view, three modules of the type Custom Module are displayed with the following configuration:

  • Module Configuration » Tab Options » Parameter Prepare Content = “Yes”
  • Module Configuration » Tab Advanced » Parameter Module Class = user-and-cars-module
  • Module User’s Registered Vehicles: Module Configuration » Tab Module 
    List of registered vehicles for the user:
{vfdataview}{
"formid":"40",
"fieldlist":"403,404,674,675,676",
"show_page_heading":"false",
"showlabel":"true",
"fieldselect":{"407":"${id}"},
"replace_parameter":"true"
}{/vfdataview}
  • Module User’s Registered Classic Cars: Module Configuration » Module Tab 
    List of registered classic cars for the user:
{vfdataview}{
"formid":"40",
"fieldlist":"403,404,674,675",
"show_page_heading":"false",
"showlabel":"true",
"fieldselect":{"407":"${id}","676":"1"},
"replace_parameter":"true"
}{/vfdataview}
  • Module User’s Registered Classic Cars (sorted by year of manufacture): Module Configuration » Module tab 
    List of registered classic cars for the user:
{vfdataview}{
"formid":"40",
"fieldlist":"403,404,674,675",
"show_page_heading":"false",
"showlabel":"true",
"sortorder":"674",
"fieldselect":{"407":"${id}","676":"1"},
"replace_parameter":"true"
}{/vfdataview}

Note: This is the data detail view of the Users form with form ID 39 and the additional display of data from the Vehicles form with form ID 40.
Hence the "formid":"40".

Note: The two data tables are connected via
the form field Select User with the field ID 407 of the field type Listbox SQL of the form Vehicles and
the overhead field id with the table field name id of the form Users.
Hence the "407":"${id}".

Parameter Substitution

The parameter substitution in the plugin string results in the display of the vehicles assigned to a user in the detailed view of a user within the three additional modules.

  • The assignment is made using the mandatory form field Select User of the Vehicles form with field ID 407 of the Listbox SQL field type.
  • Filtering within the three additional modules of the detail view to display the vehicles assigned to the selected user is done:
    • Using the placeholder ${id} for the value of the id column from the data table of the Users form for the selected user.
    • Using the plugin string parameter fieldselect and filtering to records in the data table of the Vehicles form that have the same value in the form field Select User with field ID 407. 
      "fieldselect":{"407":"${id}"}

List View

The list view suppresses the display of the three additional modules.
The list view is displayed without modules using the following configuration:

  • Form Configuration » Tab: Frontend Web Assets

    Group: Basic Settings » Subtab Data List. Parameter: CSS =

    /* do not show modules on data list view (only on data detail view) */
.layout-data .user-and-cars-modul {
display: none;
}
Data List View

Detail View

The detail view has the following four areas from top to bottom:

  • Area 1:
    Display of the form fields First Name, Last Name, and City of the selected detail record of the User form.
  • Area 2:
    Display of the filtered and configured data list of the Vehicle form
    via the User’s Registered Vehicles module using the plugin string of the Content Plugin - Visforms Data.
  • Area 3:
    Display of the filtered and configured data list of the Vehicle form
    via the User’s Registered Classic Cars module using the plugin string of the Content Plugin - Visforms Data.
  • Area 4:
    Display of the filtered and configured data list of the Vehicle form
    via the User’s Registered Classic Cars (sorted by year of manufacture) module using the plugin string of Content Plugin - Visforms Data.
Data Detail View

Suppressing the Modules

The suppression of the three additional modules in the list view is achieved with the following very short CSS (see above):

/* do not show moduls on data list view (only on data detail view) */
.layout-data .user-and-cars-modul {
display: none;
}

The above CSS suppresses the modules in the list view due to the following HTML structure and the CSS classes distributed within it.
HTML of the list view:

<body class="site com_visforms view-visformsdata layout-data itemid-264">
...
<div class="main-bottom card user-and-cars-modul">
... Module HTML ...
</div>

The above CSS shows the modules in the detail view due to the following HTML structure and the CSS classes distributed within it.
HTML of the detail view:

<body class="site com_visforms view-visformsdata layout-detail itemid-264">
...
<div class="main-bottom card user-and-cars-modul">
... Module HTML ...
</div>

Explanations of the CSS classes and the CSS selector used .layout-data .user-and-cars-modul {…}:

  • layout-data:
    This is specific to the Cassiopeia template for the list view and may need to be adapted to other front-end templates.
    This is to be expected as it concerns the display of modules in positions of the front-end template.
  • layout-detail:
    Is specific to the Cassiopeia template for the detail view and may need to be adapted to other frontend templates.
    Specific to the Cassiopeia template is to be expected, as it concerns the display of modules in positions of the frontend template.
  • user-and-cars-modul
    Is a CSS class name individually assigned in the configuration (see above):
    • Module configuration » Advanced tab » Parameter CSS class module = user-and-cars-modul
  • com_visforms and view-visformsdata:
    These CSS classes are taken from the URL parameters of the call URL by the Cassiopeia template and automatically written as dedicated CSS classes into the class attribute of the element.
    These CSS classes are specific to the Cassiopeia template and may need to be adapted to other frontend templates.

Example with Custom Table Layout

Note: This example, extended with a custom table layout, has all the settings as the above example with the standard table layout.
Only a few additional settings are listed below.
The settings from the above example with the standard table layout are not repeated here.

List view and detail view are displayed via a menu entry with the following additional configuration.
This configuration ensures that the custom CSS with its CSS path table-layout-round-striped is applied to the data table of this menu item:

  • Menu Configuration » Tab: Form Data Display

    Group: Form Data Display » Parameter: Data Table Class = table-layout-round-striped

List view and detail view are displayed with the following additional configuration.
This configuration ensures that the custom CSS for formatting the tables in list view and detail view is loaded and available.

  • Form configuration » Tab: Frontend Webassets

    Sub-tab Data List » Parameters: CSS =

    /* do not show modules on data list view (only on data detail view) */ 
.layout-data .user-and-cars-module { 
display: none; 
} 
  
/* ***** table-layout-round-striped ***** */ 
:root { 
--main-bg-color: #2157c1; 
--header-color: #ececec; 
} 
  
.table-layout-round-striped { 
background-color: var(--main-bg-color); 
border-collapse: collapse; 
border-radius: .8rem; 
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); 
} 
.table-layout-round-striped, .table-layout-round-striped th, .table-layout-round-striped td { 
border: 0; 
} 
.table-layout-round-striped thead tr { 
text-align: left; 
} 
.table-layout-round-striped th, 
.table-layout-round-striped th a { 
color: var(--header-color); 
font-variant: small-caps; 
} 
.table-layout-round-striped th, 
.table-layout-round-striped td { 
padding: 6px 4px; 
} 
.table-layout-round-striped tbody tr { 
border-bottom: 1px solid #dddddd; 
} 
.table-layout-round-striped tbody tr:nth-of-type(even) { 
background-color: #f3f3f3; 
} 
.table-layout-round-striped tbody tr:nth-of-type(odd) { 
background-color: #ffffff; 
} 
.table-layout-round-striped tbody tr:last-of-type { 
border-bottom: 6px solid var(--main-bg-color); 
}

List View

The list view suppresses the display of the three additional modules.

Data List View

Detail View

For the menu item for displaying the list view and detail view, three modules of the type Custom Module are displayed with the following additional configuration.
The following plugin string configuration ensures that the custom CSS from the Form Configuration » “Frontend Web Assets” tab with its CSS path table-layout-round-striped is applied to the respective data table within the 3 additional modules:

  • Module User’s Registered Vehicles: Module Configuration » Module tab 
    List of registered user vehicles:
{vfdataview}{
...,
...,
"viewclass":"table-layout-round-striped"
}{/vfdataview}
  • Module User’s Registered Classic Cars: Module Configuration » Module tab 
    List of registered user classic cars:
{vfdataview}{
...,
...,
"viewclass":"table-layout-round-striped"
}{/vfdataview}
  • Module User’s registered classic cars (sorted by year of manufacture): Module Configuration » Module tab 
    List of the user's registered classic cars:
{vfdataview}{
...,
...,
"viewclass":"table-layout-round-striped"
}{/vfdataview}
Data Detail View
What's on this Page