| Table of Contents | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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, Date and Time, 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
First Line/Second Line/Third Line | Configures the lines of the table as headers or as other types. | |
Collapsible Line | Allows to collapse the line or not. | |
Button Position | Sets where to put a button in the line (if applicable) | |
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:
...
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
...
Sort button and then clicking the Ascending or Descending arrows on the particular sort field.
...
Charts
Column Chart
A column chart will display the values as columns.
...
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 |
|---|
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:
|
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:
|
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.
Heading levels cannot be renamed for their labels!
Alerts
Badges
Badges are typically colorful informational Alert widgets are generally used to show a message in the widget when the values of an entry meet or do not meet certain criteria.
...
Use the Template tab to adjust the label of the alert, the color, and the text to be displayed.
Use the Visibility tab to configure the conditions for the alert to be shown. Once the fields/values have been selected, you will be able to select the operator to use: Equal (=) or Not equal (!=). In the example above, the alert will only be shown when the Rank is not equal to Associate and Contract Lawyer.
Use the Tooltip tab to configure the tooltip message that will accompany the alert.
Badges
Badges are typically colorful informational Widgets that are used to display on a dashboard.
...
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:
|
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 a 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.
...
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 set.
The Zoom icon is changed to the Allow full-screen feature and has a tooltip.