Panel Types Cheat Sheet¶

Introduction¶

This document provides a high-level overview of the different Panel Types available in Vinyl, what they are, and why you use them. Panel Types are containers residing on a Page that, in turn, allow you to add data, images and information to display on the application UI Layer.

Panel Types¶

Icon	Name	Description
	Form	Form panels are designed to display a singular line of data from the selected data source. This panel type is especially useful as a pop-up window or detail page in an application. When Form panels are assigned multiple Controls, each Control gets displayed individually.
	Grid	Grid is the basic panel type for displaying multiple rows of data at one time. This panel type displays specific columns from the selected data source table or object. Clicking on a Column Title allows rows to be sorted in either Ascending or Descending order. The total number of rows on a Grid panel is displayed in the upper right-hand corner, above the Column Titles. The number of rows loaded at one time (depending on total records) for display purposes may be a lesser set. To view more rows, click on the LoadMore Rows button at the bottom of the panel.
	Lane	Lane panels display grouped information and is like Tile panels in that they display data grouped into Form panel format yet can be configured vertically or horizontally (unique to Lane).
	Tile	Tile panels are essentially a combination of Grid panels and Form panels. Like Grids, Tile panels will display multiple sets of information at once. However, information from data source tables or objects is presented in blocks arranged from left to right instead of in columns. As with Form panels, Controls are grouped with other Controls in the same position in the data table.
	Pivot	Pivot panels display a pivot table with information from a data source. The following Control Types are required for Pivot: Column: Populates the column headings Row: Populates the row headings Value: Displays the relevant data from the source
	Network Graph	Network Graph panels display interconnections between a set of entities. Each entity is represented by a Node. Connections between Nodes are represented through links. The following Control Types are required for Network Graph: From: From Node for this link Node: Network Graph Node Node Label: Network Graph Node label JSON Options Object: JSON Object which overrides chart options Link Color: Network Graph link color Color: Color value for an Event or Task
	Map	Map panels display a Map where Controls can be visualized via geographic location. Names of map regions in your underlying business object must match identifiers from the Highmaps source maps; this can require extra attention to ensure your business object key can be recognized by the source map. For example, if you have a business object with US County names, county names may not be unique; in this case you must have a column that matches the key from Highmaps. Different maps provided through the Highmaps API can be chosen based on the data you wish to display. The following Control Types are required for Map: Category: Country, State, etc... Value: Value associated with Category JSON Options Object: JSON Object which overrides chart options Color: Color value for an Event or Task For additional information on Map panels, see Map Panel. Please reference https://api.highcharts.com/highmaps for documentation regarding source maps provided in the map panel.
	Gantt	Gantt panels support displaying a Gantt chart. Gantt charts are useful for planning and scheduling projects. They help assess how long a project should take, determine the resources needed, and plan the order in which you will complete tasks. Gantt Charts are also a helpful tool for managing the dependencies between tasks. To leverage a Gantt Chart on a Gantt Panel, you will need a Business Object that contains information for the Controls the Gantt chart requires. Gantt Charts can also be used to represent and display Task Dependencies and Task Groups, assuming information about these additional values is configured in the Business Object. The following Control Types are required for Gantt: Task: Required Control, represents an individual project Task being tracked Start Date: Required Control, represents Task begin date The following Control Types are optional for Gantt: End Date: Represents Task end date Color: Color value for Task on chart Dependency: Determines relationship from the Task to the other Tasks it is dependent on Parent Task: For hierarchical arrangement of Tasks, is a reference to another Task from the Business Object Sort: Allows you to apply sorting to selected value Task Group: Used for grouping or placing multiple Tasks on the same row
	Chart	Chart panels are used in Vinyl to display data on a Chart graphical representation. Vinyl supports many different Chart Types like Bar, Column, Line, Area, etc. Charts can be linked to the underlying data so a User can click through and view supporting data. The following Control Types are required for Chart: Category: Required Control, represents x-axis (horizontal) on Chart Value: Required Control, represents y-axis (vertical) on Chart The following Control Types are optional for Chart: Color: Color value used by chart Sort: Allows you to apply sorting to selected value Flag: Used to mark an event or point of interest JSON Options Object: JSON Object which overrides chart options
	Calendar	Calendar panels populate a Calendar with information from the selected data source. Like Chart panels, Calendar panels can be linked to another panel to display greater detail regarding an Event on the Calendar. The following Control Types are required for Calendar: Description: Designates what will appear on the calendar, and is typically an Event Name Event Start: Designates which day the Event will appear starting on and may include timestamps, which will be displayed alongside the event description Event End: Designate which day the event will appear ending on and may include timestamps, which will be displayed alongside the event description The following Control Types are optional for Calendar: Color: Color value used by Calendar to indicate Event(s) Sort: Allows you to apply sorting to selected value
	Frame	Frame panels allow a Page to reserve a space on the screen that all clicked page links will load into. The Frame Panel type does not have content of its own. When a Frame exists on a screen, any Page navigation will be directed into the Frame instead of replacing the entire screen. This Panel Type is most often used to keep a persistent side menu visible and the Frame container renders the page inside of it.
	File Browser	File Browser panels are linked to a Local or Network File System and look very similar to a file directory. The File Browser Panel allows a user to upload files to a server and/or download them to a device. Navigation is also possible within these panels, with subdirectories indicated by a folder icon.
	Custom HTML	Custom HTML panels make use of HTML/CSS templates to display data and images. Custom HTML panels are highly customizable in terms of the control over the display they can generate, and closely resemble a web page.