Visforms 4
Users and Vehicles

Users and Vehicles

Introduction

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

The example consists of 2 forms:

  • Form 1: User
    This form is used to collect user data first:
    (Text fields “First Name”, “Last Name” and “Company”).
  • Form 2: Vehicles
    This form is then used to
    • select an existing user
      (SQL list box field “Select User”),
    • the associated user data is automatically copied into the corresponding read-only form fields
      (SQL list box fields “First Name”, “Last Name” and “Company”),
    • to collect additional vehicle data
      (Text fields “Car Name” and “Car Model”),
    • store all 6 fields in the form’s data table.

View Form 1: User

The empty form

With this form, pure user data is initially collected.

View Form 2: Vehicles

The empty form

This form is used to select existing user data and collect additional vehicle data.

Selection of a user

In the form, an existing user is selected from the data stock of form 1 “User” with the SQL list box field “Select User”.
The selected user data is then automatically entered in the corresponding write-protected form fields of Form 2 “Vehicles”.

Vehicle details

In the form, the user can enter additional information about his vehicle.

Configuration Form 1: User

Layout

The configuration settings (if different from the default setting):

  • Tab “Advanced”, Group “Layout”, “UI Framework” = “Boostrap 5”
  • Tab “Advanced”, Group “Layout”, “Sublayout” = “Horizontal”

The fields

The Field IDs of Form 1 “User” are important.
They are required in the SQL statements of the SQL list box fields of Form 2 “Vehicles”.

Configuration Form 2: Vehicles

Layout

The configuration settings (if different from the default setting):

  • Tab “Advanced”, “UI Framework” = “Boostrap 5”
  • Tab “Advanced”, “Sublayout” = “Horizontal”

The fields

Custom CSS

There are SQL fields for the 3 select types “Checkbox Group”, “Listbox” or “Radio Button”.
To make the “First Name”, “Last Name” and “Company” SQL listbox fields from Form 2 “Vehicles” look read-only and similar to a text input field, some additional custom CSS is required.
The direct input as well as the effective loading of the additional custom CSS is best done with the “Frontend Webassets” in the form configuration. \

Note: The custom CSS required for this may depend on the chosen UI framework and template.

The frontend webassets

The CSS code for the form view

The following CSS code:

  • prevents all mouse actions,
  • makes the listbox read-only and
  • makes the list box just look like simple text fields.
select.readonly {
     pointer-events: none;
     background-position: unset;
     -moz-appearance:none; /* firefox */
     -webkit-appearance:none; /* Safari and Chrome */
     appearance:none;
}

Field configuration form 2: Vehicles

The fields

Select User field

The configuration settings (if different from the default setting):

  • Tab “Basic Options”, “Type” = “Listbox Sql”
  • Tab “Basic Options”, “SQL-Select-Statement” = “select CONCAT(F395, ' ‘, F396) as label, id as value from #__visforms_39;”
select CONCAT(F395, ' ', F396) as label, id as value from #__visforms_39;

Note: The F395 part refers to the field "First Name" with field ID 396.

Note: The part _39 refers to the data table of the form "User" with the form ID 39.

Note: In the "Select User" list box, a combination of the "First Name" and "Last Name" fields is displayed as option text for selection (as label). The value stored in the data table for the "Select User" field is the ID of the selected record (as value). The ID of the selected data set is of no further importance.

Note: The table name of a table in a Joomla database always has a so-called table name prefix, which is placed in front of all Joomla table names within a Joomla instance. You don't have to know the table name prefix or write it explicitly. Instead, use Joomla's own placeholder for the table name prefix: #__.

First Name field

The configuration settings (if different from the default setting):

  • Tab “Basic Options”, “Type” = “Listbox Sql”
  • Tab “Basic Options”, “Make reloadable” = “Yes”
  • Tab “Basic Options”, “Preselect solitary option” = “Yes”
  • Tab “Basic Options”, “Reload on change of” = “Select User”
  • Tab “Basic Options”, “SQL-Select-Statement” = “select F395 as label, F395 as value from #__visforms_39 where id = ${input:select-user};”
  • Tab “Advanced”, Group “Layout”, “CSS class of the field” = “readonly”
select F395 as label, F395 as value from #__visforms_39 where id = ${input:select-user};

Note: For this field, the CSS class readonly must be specified on the "Advanced" tab so that the additional user-defined CSS from the "Frontend Webassets" with the selector select.readonly is applied to this field.

Note: The placeholder ${input:select-user} refers to the current value of the "Select User" field. The field has the title "Select User" and the alias "select-user".

Note: The ${input:} part of the placeholder refers to the input object in the PHP backend. All current field values are available in this object.

Last Name field

The configuration of this field is essentially the same as that of the First Name field.
The only difference is the different field ID within the SQL statement.

The configuration settings (if different from the default setting):

  • Tab “Basic Options”, “Type” = “Listbox Sql”
  • Tab “Basic Options”, “Make reloadable” = “Yes”
  • Tab “Basic Options”, “Preselect solitary option” = “Yes”
  • Tab “Basic Options”, “Reload on change of” = “Select User”
  • Tab “Basic Options”, “SQL-Select-Statement” = “select F396 as label, F396 as value from #__visforms_39 where id = ${input:select-user};”
  • Tab “Advanced”, Group “Layout”, “CSS class of the field” = “readonly”
select F396 as label, F396 as value from #__visforms_39 where id = ${input:select-user};

Company field

The configuration of this field is essentially the same as that of the First Name field.
The only difference is the different field ID within the SQL statement.

The configuration settings (if different from the default setting):

  • Tab “Basic Options”, “Type” = “Listbox Sql”
  • Tab “Basic Options”, “Make reloadable” = “Yes”
  • Tab “Basic Options”, “Preselect solitary option” = “Yes”
  • Tab “Basic Options”, “Reload on change of” = “Select User”
  • Tab “Basic Options”, “SQL-Select-Statement” = “select F397 as label, F397 as value from #__visforms_39 where id = ${input:select-user};”
  • Tab “Advanced”, Group “Layout”, “CSS class of the field” = “readonly”
select F397 as label, F397 as value from #__visforms_39 where id = ${input:select-user};
What's on this Page