Widget Types

Widget Type Ids

TypeId	Type
1	Table/Grid
2	Chart
3	KPI
4	Pie
5	Bar
6	Filter
7	Lookup
8	MonthPicker
9	DatePicker
10	Tree
11	Progress
12	List
13	Alert
14	Image
15	Header

Widget Types

Tables/Grids

Tables allow multiple columns of data to be organized into a table. A sample of one is:

This type of widget can be:

Tabular
Pivot
Grouped
Tree

In the Visualization section of Widget Creation, select Type Table.

Upon selecting the report, the data columns will be added to the Columns tab. A preview on the right will display which selections you make immediately.

Click the Column highlighted in blue to edit settings for that one column.
Click New Row Line to add an extra row (second row) for the header.
Click Add Column to add any additional columns that have not been selected already.
The Plus Widget menu allows adding another widget within this widget. Select the proper widget type from here.
Pagination can be controlled by the pagination size. The default is 100 records but can be modified.
Click the Delete Button next to the Column to remove a particular column.

Column settings

Upon clicking into a column in a table, this set of options displays.

Tab	Field	Description
Column tab	-	Sets column specific settings.
	Header Text	Sets the header column name. If the column is to be Person, it should be labeled like Person or Employee
	Column Align	Allows the column to be left justified, center aligned, or right justified. As learnt from the majority of our clients, and our product team, typically text columns like Matter/Client/Person etc will be left justified.
	Sortable	If yes is selected this column can be sorted. If not, the column will be static. Use the Sort field next.
	Sort Field	If Sortable is set to Yes, you can use the dropdown to pick the column sort field.
	Formatting	Sets the column formatting. Samples are Text, Date, Number, Decimal, Currency.
	Footer Value Aggregator	Sets how to calculate that total. Count, Average or a percentage are available options.
	Footer Text	If set to yes, it allows a textual description of the column total to be added on the bottom. An example would be the Count of Audit Entries.
	Text Template	Allows to set the template of how the total text appears. Like Total{0} pulls the Total of kpi 0 next to Total.
Hyperlink tab	-	Sets hyperlinking of the column to a specific place.
	Link To	Sets the type of link to be an external URL, or a dashboard.
	Dashboard	If dashboard is selected, select the dashboard. It would be treated as a drill through type.
	URL Parameters	For both types of links, this allows the system to generate URL parameters based on data pulled. For example if the table was for a client, you can select the field ClientId and have it pull the clientid dynamically.
	URL	If External URL is selected, enter the URL here.

Trees

The tree widget allows a set of data to be grouped and expanded like a ‘tree’ in a table. Here’s an example:

If the Tree node is selected, the following options are available upon clicking into a data field:

Parent Value Field: The data field column
Node field: This does the ‘tree branch’ where it groups by the parent and then lists out the children. For example, if you want clients grouped then matters to show, set this as MatterId.
Root value: If a numerical field, you can set a root value to display, on the node.
Leaf field: Adds the final grouping field. For example, if grouped by client, then matter, then the person set the leaf as ResponsiblePerson or PersonId.
Leaf value: Sets the numerical leaf grouping value.

Column settings

Selecting the Columns tab, then clicking back into the Column allows these fields to be present:

Tab	Field	Description
Column tab	-	Sets column specific settings.
	Header Text	Sets the header column name. If the column is to be Person, it should be labeled like Person or Employee
	Column Align	Allows the column to be left justified, center aligned, or right justified. As learnt from the majority of our clients, and our product team, typically text columns like Matter/Client/Person etc will be left justified.
	Sortable	If yes is selected this column can be sorted. If not, the column will be static. Use the Sort field next.
	Sort Field	If Sortable is set to Yes, you can use the dropdown to pick the column sort field.
	Formatting	Sets the column formatting. Samples are Text, Date, Number, Decimal, Currency.
	Column Total	Allows a total row on the bottom of the table for one or more columns. For example, Person you might not want a total, but for WorkedAmount you’d want a total.
Hyperlink tab	-	Sets hyperlinking of the column to a specific place.
	Link To	Sets the type of link to be an external URL, or a dashboard.
	Dashboard	If dashboard is selected, select the dashboard. It would be treated as a drill through type.
	URL Parameters	For both types of links, this allows the system to generate URL parameters based on data pulled. For example if the table was for a client, you can select the field ClientId and have it pull the clientid dynamically.
	URL	If External URL is selected, enter the URL here.

Lists

The List Widget allows the creation of a list of data on the dashboard. For example, this is a list of personal metadata:

Column settings

Clicking the Records tab allows setting which columns are in the list.

Set the name of the column as you choose (the parent will not have a name).
Click Add Field to add additional columns from the report.
Clicking the Add Widget dropdown allows adding another widget within the list directly (sub-widget).
Pagination of the list widget can be performed as well.

Grouping and sorting of the list can be performed.

Grouping

Edit the Widget.
Click the Visualization tab then select Grouping.
Enter the field(s) you want to group by using the Add Field button. It is in order of adding the grouping to the list. For example, this grouping below adds a grouping on Department first, then by the Last Accessed Time.
When we have multiple grouping keys, sorting is first done by the first key and then the second one. To be able to see that behavior we should have data set where the second key creates a "subgroup" from the first one. Grouping by ClientName or CleintName/ClientId is the same and there is nothing to sort after records are sorted by ClientName.

Sorting

Sorting can also be performed by editing the widget.
Click the Visualization tab then select Sorting.
Enter the field(s) you want to sort by using the Add Field button. It is in order of adding the sorting to the list. For example, this sorting below adds a sorting on Rank.

After completing the edit, the Sorting can be shown by clicking the Unsorted button and then clicking Ascending or Descending arrows on the particular sort field.

Charts

Column Chart

A column chart will display the values as columns.

A sample looks like this:

Line/Area

Line or Area charts allow the chart to be a line graph or area/scatter plot. Samples are:

Bar Chart

Allows the chart to have horizontal bars displayed.

Pie Chart

In this chart, data is organized into a pie, with each piece representing a different metric.

For example,

Combined Chart

A combined chart allows combining a line/area chart with a column chart. This is if you have two different categories of data to display. Like:

Note: When working with charts, the label visibility will adjust according to the available space. If enough space is available, the labels and values will show in full. If not enough space is available, the labels and values visibility may be reduced.

Chart Settings (Excluding Pie)

The chart settings modify how the chart will display.

Note that text fields cannot be used as Y axis value fields.

Chart tab

Option	Description
X axis value field	Sets what field is the X axis.
Records grouping	Determines how the values are displayed in the chart. Stack allow to stack the bars or lines or records. Union puts them side by side on the axis.
X axis field as label	Sets the X axis label
Y axis value fields	Sets the y axis fields to display. Can be one or many.
Add Field	Adds another Y axis field
Pagination page size	Sets the records per page.
Click into the Y axis Data Field:
Graph Type	For combined charts, sets if a line or a column chart.
Name	Name of the item. If a bar chart it says Bar Name, Column as Column Name and so on.
Graph Color	Set a specific color per data item. Colors currently are fixed in the Theme.
Stack Group	Allows to group stacks if desired by a value (client for example). Grouping options will change depending on the type of record: When there is a base field with a field where all records are unique, grouping options are not shown. For Line Chart, only Union Grouping will show. With a Combined Chart, if one of the series is a Line Chart, only the Union option will show.
Value Aggregator	Sets how to total the total column or values. Sums, averages, counts, percentages are all supported.
Area (Show Graph)	If yes allows to show the graph area as it’s own window.
Area opacity	Sets the graph area opacity.

Axis tab

Option	Description
Formatting	Sets the format of the data.
Axis offset	Sets the offset pixels to offset the axis from. (For X and Y axes)
Label rotation	Sets the degree of rotation of the label. (For X and Y axes)
Precision	Displays for numerical decimal formats.

Legend tab

Option	Description
Legend	Shows or hides the legend.
Type	Sets the legend to be a table format, or a flat list. (Autogenerated based on the columns)
Position	Position of the legend. Can be: Top, bottom, left, right.

Pie Chart Settings

Pie Charts have some unique settings different than other chart settings.

Chart tab

Option	Description
Base Field	Sets the main field for the chart display. For example if the pie shows worked hours by client, clientname is the base field.
Records Grouping	Determines how the values are displayed in the chart. Stack allow to stack the pie piece. Union puts them side by side on the pie.
Value field	The value field is the value displayed within the pie. Like sum of workedhours.
Pie Angle	Default is 360 full circle. If a partial circle is desired, lower the angle.
Donut Radius	The donut radius angle can be set to a particular percent size if needed.
Total	A total row can be added.
Pagination	Number of records to page by.

Labels tab

Option	Description
Show Percent	Shows a percentage in the label.
Label	The label to modify.
Formatting	Format of the label.

Legend tab

Option	Description
Show or Hide	Displays the Legend or not.
Type	Sets the legend of a table or a list.
Position	Sets the legend on the left, right, top or bottom.
Legend Fields	Add or remove Legend fields.

Tooltip tab

Option	Description
Name	Shows a tooltip on the Name fields of the data.
Value	Shows a tooltip on the Value fields of the data.
Formatting	Sets the format of those names or values.
Tooltip Details	Add Details for the tooltips. (The sentence(s) of the description)

Value KPI’s

Value KPI’s are for adding KPI’s into a bar or other widget type to display.

For example,

KPI tab

Option	Description
KPI Label	Name of the KPI to display on the bar.
KPI Icon	Choose an icon if the KPI relates to a button or icon. When clicked on, the lookup list will display a limited number of icon options. Users can expand the icon options by manually searching for them:
KPI Color Mod	Sets the color for the KPI. For example, if the amount is negative, you may set red. If positive, it usually is green. Like: It is possible to remove any of the selected colors by clicking the X. Doing so, will revert the Mod to the default color.
Formatting	Sets the KPI format.

Details tab

Option	Description
Delete	Deletes the field(s) in the KPI.
Add field	Allows to add one or more fields to the KPI.
Formatting	Sets the format of the invidiual KPI field. Accessible after clicking the field hyperlink inside this Details pane.

Visibility tab

Option	Description
Input	Allows to manually input a condition. E.g. WorkedAmount> $100,000
Field	Allows to select a field to set the condition.
Operator	Operators for conditions and group include: = equals == Not equals < less than > greater than <= less than or equal to >= greater than or equal to
Condition Group	A grouping of conditions (more than one). Highlighted in blue and can be added by the new group.
Add Condition	Adds a new condition (grey box)
Add Group	Adds a new condition group (blue box)

Progress Bars

Progress bars give Kpi bars depth with two KPI’s and a range of colors. It allows progress to be displayed. Here’s an example of multiple progress bars in color.

Values tab

Option	Description
Progress Field	Shows the value that needs to be tracked against the target as it progresses.
Target Value	Sets the target of what the progress field is tracked against. This can be a manual inputted number (From Input) or a field from the report (From field).
Custom Start Value	Sets a custom start value if a different value from 0 is desired. For example, a progress of hours may start at 100 hrs.
Value position	Sets the position of the value KPI. Can be on, below, or above the progress bar.
Formatting	Sets the formatting of the kpis measured in the bar. Typically these are the same format (hours, percent or currency for example)
Decimal Precision	Sets the decimal precision if a numerical or currency value.

Colors tab

Option	Description
Color	Selects a color in the predefined template.
Percent bar	If multiple colors exist, set the percent of each.
Delete	Delete the color.
Add Threshold Color	Adds another color to the list.

Image

Text

Users have the option to add a Rich Text Widget to their dashboards. When creating a new widget, under the visualization tab, click on Text under the General category.

Click on Rich Text
Users can apply various formatting options to the text of the widget, including heading levels, blockquotes, code blocks, and monospace text.
1. Heading levels cannot be renamed for their labels!

Alerts

Badges

Badges are typically colorful informational Widgets that are used to display on a dashboard.

A sample would be:

Select Widget Type of Badge.

This panel displays:

If you choose to add multiple badges, click Add Badge to add more than one.
Click the hyperlink of the Badge to drill into more settings.
Click the Delete icon to delete the badge.

Within the Badge Settings, there are two tabs, Template, and Visibility.

The template tab allows the configuration of the Badge.

Option	Description
Label	Sets the Badge label (What displays)
Color Mod	Sets the color of the badge. Pick from the list.
Text Template	The text to display on the badge. For example if the badge is for the client name, but you want to include more detail like Office or Chief, you could do this here.
KPI	Adds one or more KPI’s to the badge.
Add Template Field	Allows to add another KPI.

The visibility tab allows the badge to be visible, and if multiple badges appear, for they are sorted or grouped correctly.

Option	Description
Input	Allows to manually input a condition. E.g. WorkedAmount> $100,000
Field	Allows to select a field to set the condition.
Operator	Operators for conditions and group include: = equals == Not equals < less than > greater than <= less than or equal to >= greater than or equal to
Condition Group	A grouping of conditions (more than one). Highlighted in blue and can be added by the new group.
Add Condition	Adds a new condition (grey box)
Add Group	Adds a new condition group (blue box)

When we have multiple grouping keys, sorting is first done by the first key and then the second one. To be able to see that behavior we should have data set where the second key creates a "subgroup" from the first one. Grouping by ClientName or CleintName/ClientId is the same and there is nothing to sort after records are sorted by ClientName.

Circles

Circles allow for progress circles to be added.

A sample looks like this:

General Widget Notes

The ellipsis option allows showing the … after the number of characters specified.

Note at least 4 characters need to be specified to show one character than the …

Creating searches in widgets is possible, as long as the report you’ve created utilizes one of the Elastic search reports you’ve setup. See https://literadev.atlassian.net/wiki/spaces/CAM/pages/73793576/Schema+and+Data+Sources#Data-Sources-for-Reports .
The Zoom icon is changed to the Allow full screen feature, and has a tooltip.