Select Language

   MaestroThe UI design product.  |   Form Builder |   22.04 This feature was updated in 22.04.

Maestro provides the Select Language component (widget), which allows form users to select a language that they want to use on a form. You must add and configure a language or multiple languages for a form before a user can select them.

Maestro Select language component
Note

This component inherits properties and shared styles from the Dropdown component.

Usage

  1. Open the Palette pane in the Maestro editor.
  2. Locate the Select Language component within the User Information folder.
  3. Drag the component into the View pane or the Wireframe.
  4. Configure the component's properties via the Properties pane.
  5. Configure the component's styles via the Styles pane.

Properties

The following properties are available to the Select Language component:

Select Language

Populate using Form translations
Boolean useFormLanguages
Select the checkbox to populate the dropdown list with the translations configured in the form. This will overwrite the options specified at runtime. The Select Language component does not have to show all of the available languages in the list based on your business requirements.
Sort Options
Boolean sortOptions
Check to automatically sort options by label.
Hide on single language
Boolean hideSingleLanguage
Hide this widget when the form has only one language defined.
Options
List options
Defines a list of languages in the dropdown. By default, the Options property contains the following values:
LabelValue
Language name 1Locale code 1
Language name 2Locale code 2
Maestro Select language configuration
Update the language details or select the Default checkbox to make a selected language a default one and click Save.
Click Add to add a new line to the list where you need to add a language name and a locale code.
Select a language and click Move Up or Move Down to re-order its position in the list of languages.
Click Edit as Text to see the language configuration as a text file. You can change the separators used in the text.
Maestro select language component
Sort Options
Boolean sortOptions
Check to automatically sort options by label
Icon
Icon icon
Select the dropdown icon
Add Blank Value
Boolean addBlankValue
Check to add a blank value to the dropdown

Styles

The following styles are available to this component:

Avalon Language Selector
form[name='form'] {
  .avalon-language-selector {
    width: auto;
    margin-right: 20px;
    .wdg-label {
      display: none;
    }
    .av-select-overlay {
      display: inline-block;
      float: right;
      width: 150px;
      background-color: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      min-height: 30px;
      outline: none;
      box-shadow: none;
      cursor: pointer;
    }
    .wdg-input {
      .av-select-value {
        right: 25px;
        padding: 0;
        font-family: @ux-default-font-family;
        font-size: @ux-default-font-size;
        color: @ux-default-font-color;
        
      }
      .wdg-select-icon {
        padding: 0;
      }
      &:hover, &:focus {
        .av-select-value {
          text-decoration: underline;
        }
      }
    }
  }
}

After you've configured the component, you can preview the form to switch between the available languages to verify it works as expected.

Next, learn about the Attachment Field component.