Detailview

Appearance

Overview

A Detailview can display any number of info boxes. Below the info boxes there can be zero or more tabs. A tab is an area with a Softadmin® component in it.

Tab views

The tabs are situated below the info boxes. When the detail view is loaded, you can choose which tab is open initially. Please note that the tabs and the info boxes might compete for the vertical space if they both contain a lot of content.

Fullscreen

If there is not enough space for a tab, you can collapse one or more info boxes (se above), or you can switch the tab to fullscreen mode.

Info boxes

You can display any number of info boxes. They are positioned right-to-left as far as the width of the browser window allows. The width of an info box can be set to span multiple normal info boxes. If so the widened info box will always be displayed on its own row. In the example below the first two boxes are set to span two and three columns respectively, followed by three boxes with normal width. Notice how the layout changes when the browser window is resized.

Fields name/values

An info box can contain a list of field names and values. The "Car details" info box shown above has four field names: Model, Year model, Price (SEK) and Fuel.

Free text

An info box can also display free flowing text, as seen at the bottom of the "Car details" info box.

Style

The appearance of the fields can be modified by setting their color and css-styles. You can also display an icon before the field text.

Collapse info box

The up-arrow in an info box's header can be clicked, to collapse the box. It can be either collapsed or expanded by default.

Text box

An info box can be a pure text block. In this case html can be used.

Links

The title of the info box as well as it's fields can be made into clickable links. The "E-mail" link in this case is a so called "content link", which opens the users preferred e-mail client instead of an internet browser.

QR Code

You can convert a string of characters to a QR Code. The size of the QR code will vary depending on the length of the string. It can hold a maximum of 2 kB.

Chart

You can display a chart in an info box. See below for details. (For backwards compatibility, the now deprecated Chart component can also be used in an info box, but new applications should use the JSON-based Chart).

Meter

You can display one or more meters in an info box.

External embed

An info box can contain a frame with an external webpage. Make sure the webpage doesn't use cookies.

Warnings

To grab the user's attention, you can display an error, warning, or an informational message as a special banner. In this example, one of each is shown, but you can display any number of error, warning, or info messages.

Chart

Pie chart

Overview (Pie chart)

Charts are generated using JSON. Below you can see an example Chart with its corresponding JSON.

{
	"Type": "Pie",
	"ShowLegend": true,
	"Heading": "Employees",
	"Unit": "employees",
	"LinkAlias": "ChartLink",
	"PieValues": [
		{
			"Value": 25,
			"Label": "HR",
			"PassingFields": { "DepartmentId": 1 }
		},
		{
			"Value": 18,
			"Label": "Economy",
			"PassingFields": { "DepartmentId": 2 }
		},
		{
			"Value": 10,
			"Label": "IT",
			"PassingFields": { "DepartmentId": 3 }
		}
	]
}

Multiple charts can be shown side by side by putting them inside an array.

[{
	// Chart properties
},
{
	// Chart properties
}]

Supported properties (Pie chart)

Type: The type of the chart, must be "Pie" for pie charts. (mandatory)

Heading: Heading displayed above the chart. (optional)

LinkAlias: Link to use for the pie slices. (optional)

ShowLegend: Whether or not to show the legend. Defaults to true. (optional)

LegendPosition: Where to show the legend. Defaults to "right". (optional)

NumberOfDecimals: The number of decimals shown for the value. Defaults to 0. (optional)

Unit: Unit to display after the value. (optional)

Prefix: Prefix to display before the value. (optional)

MaxWidth: The maximum width for the chart in pixels, use if the chart should be smaller than the infobox. Default fit to info box. (optional)

MaxHeight: The maximum height for the chart in pixels, use if the chart should be smaller than the info box. Default keep aspect ratio. (optional)

PieValues: Values to be shown in the chart. (mandatory)

GroupTinyValues: Small values that are grouped into a "Other slice". (optional)

PieValues

Recommended to order by value for esthetic reasons unless there is a logical order.

Value: The decimal value. (mandatory)

Label: The label for the value. (mandatory)

Color: Color of the pie value, if not specified the default color scheme will be used (recommended). See Colors. (optional)

Tooltip: Custom tooltip to append to or override the default tooltip when the section is hovered. Shows the value and unit by default. (optional)

OverrideTooltip: Controls whether the custom tooltip overrides or is appended to the default tooltip. (optional)

PassingFields: Object containing the passing fields for the chart link as properties. (optional)

GroupTinyValues

Label: Label of the group. (mandatory)

Threshold: All values smaller than this value are placed in the tiny value group. (optional)

ThresholdPercent: All values smaller than this percentage of the total are placed in the tiny value group. (optional)

Example SQL (Pie chart)

The following query will produce the JSON used above.

SELECT
(
	SELECT
		'Pie' AS [Type],
		1 AS ShowLegend,
		'Employees' AS Heading,
		'employees' AS Unit,
		'ChartLink' AS LinkAlias,
		(
			SELECT * FROM (SELECT
				10 AS Value,
				'IT' AS Label,
				3 AS DepartmentId
			UNION ALL
			SELECT
				18,
				'Economy',
				2 AS DepartmentId
			UNION ALL
			SELECT
				25,
				'HR',
				1 AS DepartmentId
			) X(Value, Label, [PassingFields.DepartmentId])
			ORDER BY
				X.Value DESC
			FOR JSON PATH
		) AS PieValues
	FOR JSON PATH
) AS Chart

Line/Bar chart

Overview

Charts are generated using JSON. Below you can see an example combined bar and line chart with its corresponding JSON.

[
	{
		"Type": "xy",
		"Heading": "Sales",
		"XAxis": {
			"Scale": "Ordinal",
			"Values": [
				{
					"Value": "2019"
				},
				{
					"Value": "2020"
				},
				{
					"Value": "2021"
				},
				{
					"Value": "2022"
				},
				{
					"Value": "2023"
				}
			]
		},
		"YAxis": {
			"Unit": "TSEK",
			"Values": [
				{
					"Value": 0
				},
				{
					"Value": 10000
				},
				{
					"Value": 20000
				}
			]
		},
		"Lines": {
			"Series": [
				{
					"Label": "Goal",
					"LineShape": "smooth",
					"Values": [
						{
							"xValue": "2019",
							"yValue": 8001
						},
						{
							"xValue": "2020",
							"yValue": 8931
						},
						{
							"xValue": "2021",
							"yValue": 11203
						},
						{
							"xValue": "2022",
							"yValue": 10912
						},
						{
							"xValue": "2023",
							"yValue": 14412
						}
					]
				}
			]
		},
		"Bars": {
			"Series": [
				{
					"Label": "Sales",
					"LinkAlias": "ChartLink",
					"PassingFields": { "SalesId": 1 },
					"Values": [
						{
							"xValue": "2019",
							"yValue": 9001
						},
						{
							"xValue": "2020",
							"yValue": 11931
						},
						{
							"xValue": "2021",
							"yValue": 13203
						},
						{
							"xValue": "2022",
							"yValue": 8912
						},
						{
							"xValue": "2023",
							"yValue": 15412
						}
					]
				}
			]
		}
	}
]

Multiple charts can be shown side by side by putting them inside an array.

[{
	// Chart properties
},
{
	// Chart properties
}]

Supported properties

Type: The value displayed. Must be a valid decimal type. (mandatory)

Heading: Heading displayed above the chart. (optional)

ShowLegend: Whether or not to show the legend. Defaults to true. (optional)

LegendPosition: Where to show the legend. Defaults to "bottom". (optional)

ShowValuesInLegendTooltip: Whether or not to show all the series values in the legend tooltip in addition to the label. Default only visible if there are 2 or fewer X-values for all series. (optional)

NumberOfDecimals: The number of decimals shown for the value. Defaults to 0. (optional)

ShowXGridLines: Whether or not to show X grid lines behind the chart. Defaults to false. (optional)

ShowYGridLines: Whether or not to show Y grid lines behind the chart. Defaults to true. (optional)

MaxWidth: The maximum width for the chart in pixels, use if the chart should be smaller than the infobox. Default fit to infobox. (optional)

MaxHeight: The maximum height for the chart in pixels, use if the chart should be smaller than the infobox. Default keep aspect ratio. (optional)

AspectRatio: The width to height aspect ratio specified as a decimal number. A value bigger than 1 indicates a chart wider than the height. (optional)

XAxis: Definition of a custom X-axis. See XAxis. (optional)

YAxis: Definition of a custom Y-axis. See YAxis. (optional)

Lines: Line chart lines. See Lines. (optional)

Bars: Bar chart bar. See Bars. (optional)

XAxis

Scale: The scale to use. (mandatory)

Label: The label on the whole X-axis. (optional)

Prefix: Prefix to display before label or value. (optional)

Unit: Unit to display after values. (optional)

LogBase: The base when using Scale="Log". (optional)

Values: An array of custom axis values. Default derive from data. See Values (Axis values). (optional)

YAxis

Scale: The scale to use. Default "Linear". (optional)

Label: The label on the whole Y-axis. (optional)

Prefix: Prefix to display before label or value. (optional)

Unit: Unit to display after values. (optional)

LogBase: The base when using Scale="Log". (optional)

AdaptAxisToValues: Whether the Y-axis should adapts its Y-values if the values are out of range or if the value should go off the chart. Default false if values are explicitly set, true if there are no explicit values. (optional)

Values: An array of custom axis values. Default derive from data. See Values (Axis values). (optional)

Values (Axis values)

Value: A custom axis value. (mandatory)

Label: Label to display instead of the value. (optional)

HideLabel: Hides the label on the axis, the label will still be displayed in the tooltip. (optional)

Lines

Series: An array of line series, each series will correspond to a line. See Series. (mandatory)

Bars

Series: An array of line series, each series will correspond to a set of bars of the same color, or for stacked bars a part in each stack. See Series. (mandatory)

Direction: The direction of the bars. Default "Vertical". (optional)

Stacked: Whether or not the bars are stacked. Default false. (optional)

ShowValuesAsLabel: Whether or not to show the values as labels in the chart rather than just with tooltip. Default false. (optional)

Series (Line)

Label: The series label. (mandatory)

Tooltip: The series tooltip. (optional)

Values: An array of values. See Values (Series values). (optional)

Color: The series color. See Colors. (optional)

Type: The series line type. Only applicable to line series. Default "Line". (optional)

LineShape: The line shape. Only applicable to line series. Default "Normal". (optional)

Markers: The line markers. Only applicable to line series. Default "None". (optional)

Series (Bars)

Label: The series label. (Mandatory)

LinkAlias: Alias of the link to use for the series. (optional)

PassingFields: Object containing the link's passing fields as properties. To use specific passing fields for each value, use the passing fields property on the values instead. (optional)

Tooltip: The series tooltip. (optional)

Values: An array of values. See Values (Series values). (optional)

Color: The series color. See Colors. (optional)

Values (Series values)

XValue: The X value. (mandatory)

YValue: The Y value, number. (mandatory)

Y2Value: The Y2 value, number. Used by line series type range. (optional)

Tooltip: A custom tooltip to append to or override the default. Default a tooltip indicating the X and Y value and the series. (optional)

OverrideTooltip: Controls whether the custom tooltip overrides or is appended to the default tooltip. (optional)

PassingFields: Object containing the link's passing fields as properties. (optional)

Example SQL

The following query will produce the JSON used above.

SELECT
(
	SELECT
		'xy' AS [Type],
		'Sales' AS Heading,
		'Ordinal' AS [XAxis.Scale],
		(
			SELECT
				V.Year AS Value
			FROM
				(VALUES ('2019'), ('2020'), ('2021'), ('2022'), ('2023')) V(Year)
			FOR JSON PATH
		) AS [XAxis.Values],
		'TSEK' AS [YAxis.Unit],
		(
			SELECT
				V.Value AS Value
			FROM
				(VALUES (0), (10000), (20000)) V(Value)
			FOR JSON PATH
		) AS [YAxis.Values],
		(
			SELECT
				V.SeriesName AS Label,
				'smooth' AS LineShape,
				(
					SELECT
						V.xValue,
						V.yValue
					FROM 
						(VALUES ('2019', 8001), ('2020', 8931), ('2021', 11203), ('2022', 10912), ('2023', 14412)) V(xValue, yValue)
					FOR JSON PATH
				) AS [Values]
			FROM 
				(VALUES ('Goal')) V(SeriesName)
			ORDER BY V.SeriesName DESC
			FOR JSON PATH
		) AS [Lines.Series],
		(
			SELECT
				V.SeriesName AS Label,
				V.LinkAlias,
				V.SalesId AS [PassingFields.SalesId],
				(
					SELECT
						V.xValue,
						V.yValue
					FROM 
						(VALUES ('2019', 9001), ('2020', 11931), ('2021', 13203), ('2022', 8912), ('2023', 15412)) V(xValue, yValue)
					FOR JSON PATH
				) AS [Values]
			FROM 
				(VALUES ('Sales', 'ChartLink', 1)) V(SeriesName, LinkAlias, SalesId)
			ORDER BY V.SeriesName DESC
			FOR JSON PATH
		) AS [Bars.Series]
	FOR JSON PATH
) AS Chart

KPI

Overview (KPI)

KPIs are generated using JSON. Below you can see an example KPI with its corresponding JSON.

{
	"Label": "Monthly earnings",
	"Value": 56000,
	"NumberOfDecimals": 0,
	"Prefix": "$",
	"Link": "KpiLinkAlias",
	"PassingField": {
		"KpiId": 5
	},
	"Trend": {
		"Value": 15,
		"Direction": "decreasing",
		"Type": "negative",
		"Unit": "%",
		"NumberOfDecimals": 0,
		"Period": "jan-feb"
	}
}

Multiple KPIs can be shown side by side by putting them inside an array.

[{
	// KPI properties
},
{
	// KPI properties
}]

Supported properties (KPI)

KPI

Value: The value displayed. Must be a valid decimal type. (mandatory)

Label: Label displayed above the KPI. (optional)

NumberOfDecimals: The number of decimals shown for the value. Defaults to 0. (optional)

Unit: Unit to display after the value. (optional)

Prefix: Prefix to display before the value. (optional)

Link: Alias of the link to follow when clicking the KPI. (optional)

PassingField: Object containing the link's passing fields as properties. (optional)

Trend: Trend object to signify changes since previous period. (optional)

Trend

Value: The value displayed. Must be a valid decimal type. (mandatory)

Prefix: Prefix to display before the value. (optional)

Unit: Unit to display after the value. (optional)

NumberOfDecimals: The number of decimals shown for the value. Defaults to 0. (optional)

Period: Text that indicates which time period the trend refers to. (optional)

Direction: The direction of the arrow preceding the value. Defaults to none. (optional)

Type: Indicates whether the change is positive or negative by the color of the trend. Defaults to neutral. (optional)

Example SQL (KPI)

The following query will produce the JSON used above.

SELECT
(
	SELECT 
		'Monthly earnings' AS [Label], 
		56000 AS [Value],
		'$' AS [Prefix],
		0 AS [NumberOfDecimals],
		-- 'KpiLinkAlias' AS [Link],
		5 AS [PassingField.KpiId],
		15 AS [Trend.Value],
		'decreasing' AS [Trend.Direction],
		'negative' AS [Trend.Type],
		0 AS [Trend.NumberOfDecimals],
		'%' AS [Trend.Unit],
		'jan-feb' AS [Trend.Period]
	FOR JSON PATH
) AS Kpi

Meters

Overview (Meter)

Meters are generated using JSON. Below you can see an example Meter with its corresponding JSON.

{
	"Value": 4200,
	"Heading": "Daily earnings",
	"Prefix": "$",
	"NumberOfDecimals": 0,
	"Link": "MeterCellLinkAlias",
	"PassingField": {
		MeterId: 1
	},
	"Intervals": [
		{
			"IntervalStart": 0,
			"IntervalEnd": 1000,
			"ColorName": "red",
			"Tooltip": "This is bad for business."
		},
		{
			"IntervalStart": 1000,
			"IntervalEnd": 2000,
			"ColorName": "yellow",
			"Tooltip": "This can be tolerated."
		},
		{
			"IntervalStart": 2000,
			"IntervalEnd": 5000,
			"ColorName": "green",
			"Tooltip": "The business is thriving."
		}
	]
}

Multiple meters can be shown side by side by putting them inside an array.

[{
	// Meter properties
},
{
	// Meter properties
}]

Supported properties (Meter)

Meter

Value: The value displayed. Must be a valid decimal type. (mandatory)

Heading: Heading displayed above the meter. (optional)

NumberOfDecimals: The number of decimals shown for the value. Defaults to 0. (optional)

Unit: Unit to display after the value. (optional)

Prefix: Prefix to display before the value. (optional)

Link: Alias of the link to follow when clicking the meter. (optional)

PassingField: Object containing the link's passing fields as properties. (optional)

Intervals: Intervals to be shown in the meter. (mandatory)

Intervals

IntervalStart: The start of the interval, must be exactly the end of the pervious interval if any. Must be a valid decimal type. (mandatory)

IntervalEnd: The end of the interval. Must be a valid decimal type. (mandatory)

ColorName: The name of the interval color, mandatory if more than one interval is specified. If not specified a neutral color will be used. (optional)

Tooltip: Tooltip for the interval. (optional)

Example SQL (Meter)

The following query will produce the JSON used above.

;WITH Intervals AS
(
	SELECT
		0 AS IntervalStart,
		1000 AS IntervalEnd,
		'red' AS ColorName,
		'This is bad for business.' AS Tooltip
	UNION ALL
	SELECT
		1000 AS IntervalStart,
		2000 AS IntervalEnd,
		'yellow' AS ColorName,
		'This can be tolerated.' AS Tooltip
	UNION ALL
	SELECT
		2000 AS IntervalStart,
		5000 AS IntervalEnd,
		'green' AS ColorName,
		'The business is thriving.' AS Tooltip
)
SELECT
(
	SELECT 
		'Daily earnings' AS [Heading], 
		4200 AS [Value],
		'$' AS [Prefix],
		0 AS [NumberOfDecimals],
		-- 'MeterCellLinkAlias' AS [Link],
		5 AS [PassingField.MeterId],
		(
			SELECT
				I.IntervalStart,
				I.IntervalEnd,
				I.ColorName,
				I.Tooltip
			FROM
				Intervals I
			FOR JSON PATH
		) AS Intervals
	FOR JSON PATH
) AS Meter

Component settings

SQL

InfoSQL

SELECT
    'thirdPartyApi.showMap(street, city, country)' AS JavaScript,
    StreetAddress AS street,
    CityName AS city,
    CountryName AS country
FROM
   ...

Custom access control and logging

Querystring parameters

Examples

Dynamic Number of Tabs

You can use dynamic tabs to create multiple copies of the same link with different titles and passing fields. In this example we create one tab for each active status.

SELECT
	1 AS LinkId,
	MaintenanceItemStatus AS TabTitle,
	-- Passingfields
	MaintenanceItemStatusId
FROM
	dbo.MaintenanceItemStatus
WHERE
	IsHandled = 0
ORDER BY
	SortOrder

Hit Counters on tabs

You can use both BadgeCount and BadgeCountUrgent on the same link. Urgent will take precedence if there are any invoices due, otherwise a normal hit count will be shown.

WITH InvoiceOpen AS (
	SELECT *
	FROM
		dbo.InvoiceHead
	WHERE
		ProjectId = @ProjectId AND
		IsHandled = 0
)
SELECT
	1 AS LinkId,
	(
		SELECT COUNT(*) FROM InvoiceOpen
	) AS BadgeCount,
	(
		SELECT COUNT(*) FROM InvoiceOpen
		WHERE DueDate <= GETDATE()
	) AS BadgeCountUrgent

Best practice

Name of stored procedure

The InfoSQL stored procedure should be named <Schema>.<Table>_GetDetails.
The SQL stored procedure should be named <Schema>.<Table>_GetDetails_DynamicTabs.