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:
|
| 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. 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:
|
| 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. |
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.
