Skip to Content

Control types

Controls are defined sets of data that get displayed in a Panel in Vinyl, and Control Type determines how the data will be displayed and more specifically what it will look like. While most Control Types require selecting a data object, some do not. The different options for a Control Type are as follows:

Name Description
Autocomplete When editing a field, a drop down list with other entries into the column will appear. If a specific data object is to be used for the list, it can be specified by selecting it from the Group By drop down menu, otherwise the control will default to items in the column. There are three filter options for the list:
  • Any: All entries containing the typed character will appear.
  • Exact: Only entries exactly matching the text entered into the field will appear.
  • Starts With: Only entries starting with the text entered into the field will appear.
Button Buttons can be used to trigger an event, to link to a new page within the application, or to link to an external URL.
Button Group A tabbed graphical control element that allows the user to choose only one of a predefined set of options. Similar to Radio Control Type. This Control type requires a source to pull the Key and Title values from. See below for more information on the Button Group Control Type.
Checkbox Displays a checkbox field. The checkbox is tied to a Boolean/Bit data source column. The checkbox will show filled if the value is 1/true and empty if 0/false. Since Vinyl 3.3.34892, if the Invert option is enabled, the checkbox is empty if the value is 1/true and filled if 0/false. Boolean columns are typically set to not allow nulls and default to 0.
ColorPicker Displays a box with the appropriate color of a given hex color code. For example, a table column with the hex code #000000 will display a black box. When a color picker row is edited, a color wheel will open up.
Date When creating a Date control, users can choose whether the control displays the date, the time, or both. The default option is Detect, which will determine the control subtype based on the data column's logical data type. When a Date control is edited in an application, a calendar will appear and allow users to select a date. For Date controls with time and date enabled, clicking on the Time icon will bring up a clock.
Dynamic Control A Dynamic Control can change its type based on the data that it receives. This is especially useful for forms that use multiple input types. Compatible Control Types with Dynamic Control:
  • List
  • Text
  • Text Area
  • Numeric
  • Checkbox
  • Buttons - requires setting the Dynamic Control Sub Type value
  • Date - requires setting the Dynamic Control Sub Type value
  • ColorPicker
  • HTML
  • Password
  • Radio
Embed Embeds a file from a URL that is in a table column (could be a binary object/Single-row Panel).
File Allows a file to be uploaded. The Data Object Column that a File control type is built upon needs to be binary in order for this control type to work properly.
For reference see the Generic File Container Tutorial.
Group Selecting Group allows the user to create a group for the panel, where selected Controls can be placed in logical groupings.
HTML The HTML control type has a number of templates that can be used to complete various tasks. For example, the Centered Panel template will create a page which allows the user to insert an image and write a brief description. Full Panel Image inserts an image from the table using HTML coding. The Google Maps template takes an address in the data table and displays it one either by map view or by street view. Map values can also be used to display a Google street view. LinkedIn allows linking to a LinkedIn profile.
Icon Selects an image to be displayed alongside other controls in the panel.
Image Displays an image from the Vinyl database. Can be formatted to 'icon' or 'photo' in Image Purpose, depending on desired output.
Line Displays a thin, horizontal line when added to a panel. The Line Control Type is primarily designed for use in a Single Row Panel in Vinyl. The Width value for the Line Control Type defines how wide, horizontally, on the screen the line displays. If you leave Width null, or blank (but not 0), the line will take up 100% of its allotted space. If you provide a numeric Width value, such as 25, it will take up 25 "Zudy's" of the allotted space.
List Allows a user to select from a list of valid values. The Source Data Object is the table or business object that contains the values needed for the drop-down list, as well as both the Key and Title needed for the Control.
Numeric Displays numbers.
Password Encrypts the text by changing the text to dots.
Progress Bar Inserts a progress bar, which can be used to visually illustrate progress on a task or process. Visibility of a system or process status is important to users in good UI/UX design, as it provides them with feedback on what is happening. See below for more information on the Progress Bar Control Type.
Radio A graphical control element that allows the user to choose only one of a predefined set of options. This Control type requires a source to pull the Key and Title values from, and is available for Board Panels, Lane Panels and standard Panel types.
Space Inserts visual white space, without needing to do so in HTML. This feature is primarily designed for use in a Single Row Panel in Vinyl.
Text Displays text. This text can also be used to trigger an event: deleting or saving, linking to a new page within the application, or linking to an external URL.
Text Area Displays text in a larger size container and allows for line breaks.
Template Control Type that has a number of different Templates that can be used to accomplish various tasks, including HTML and JSON.

Since Vinyl 3.3.34892, the Edge Case > Sort Column setting lets a user sort the data in any control on a column other than its source column.

Progress bar

A Progress Bar Control Type can be used to visually cue a Vinyl user how far along in a process they are, or progress or completeness on a particular task. For example, you may want to display a Progress Bar to indicate how complete the information you're trying to capture currently is. The percentage filled in on a given Progress Bar depends on needing a value from the database that is between 0 and 1, where 1 = 100% (0.4 would display as 40%).

Progress Bar supports the following Sub types:

  • Stacked = displays the label and percent value under the bar
  • Normal bar = displays the percent inside of the bar

You can format the way the text appears on the Progress Bar using Format String (available in Edge Case), and you can further customize the control using Styles.


Button group

The Button Group Control Type gets data like Radio Controls do today, but produce buttons that are clickable to set that corresponding value. They'll support Excel Mode and appear as buttons if they do (similar to how checkboxes autosave the value when clicked if you use Excel Mode). Some styles are controlled by Themes you can apply to the field.