Link
🔗 Quickly navigate to relevant content with linked elements.
The Link widget represents an array of hyperlinks.
1. Configuration Process
The Link is directly incorporated into the designated field within the layout sections of the dashboard.
The structure of the layout sections is outlined as follows:
\[
{
"title": "",
"titleStyle": {...},
"widgetArray": [...],
"xs": [...],
"md": [...],
"lg": [...]
},
{...}
]The Link finds its place within the widget array within the layout.
2. Customisation Options
Options | Details |
|---|---|
Title | When specified, this string functions as the designated title for the widget. |
Title Style | This optional configuration defines the stylistic attributes for the widget's title. Available Options:
|
To create a Link, the following JSON structure is used within the widgetArray:
{
"type": "link-table",
"config": {
"title": "Quick links",
"titleStyle": {},
"links": []
}
}The links array has various options, and each is elaborated below:
2.1. Simple External Link
External Links are incorporated into the table in the following form:
{
...
"links": [
"https://google.com.au"
]
}These links will always open in a new tab when clicked. The display of External Links is shown below:
2.2. Named External Links
We can also assign names to External Links by providing an object instead of a key. The configuration takes the following form:
{
...
"links": [
{
"name": "Google",
"value": "https://google.com.au"
},
{
"name": "Kalysys homepage",
"value": "https://kalysys.com.au"
},
{
"name": "Github",
"value": "https://github.com"
}
]
}Here is an example of how named External Links will display:
2.3. Internal links
Internal Links act differently from the External Links above. When clicked, they redirect the user to pages inside the application without opening a new tab.
{
...
"links": [
{
"name": "Instances",
"type": "internal",
"value": "/app/records/130/view"
},
{
"name": "Records",
"type": "internal",
"value": "/app/records/115/view"
},
{
"name": "Reports",
"type": "internal",
"value": "/app/reports"
},
{
"name": "Email templates",
"type": "internal",
"value": "/app/tools/email/create/saved-templates"
}
]
}The result of Internal Links is shown below:
2.4. Button links
All above mentioned are normal links, but if you want to use different types of links, we have Button Links.
{
"type": "link-table",
"config": {
"title": "Quick links",
"type": "button",
"titleStyle": {
"fontSize": "extralarge",
"fontWeight": "bold",
"color": "red"
},
"links": [
"https://google.com.au",
{
"name": "Kalysys homepage",
"value": "https://kalysys.com.au",
"color": "green",
"fontSize": "extralarge",
"fontWeight": "bold"
},
{
"name": "Github",
"value": "https://github.com"
},
{
"name": "Instances",
"type": "internal",
"value": "/app/records/130/view"
}
]
}
}It is also possible to change the font size, font weight, and colour of the button links. The above configuration is shown below:
2.5. Icon links
The value "icon" is introduced to generate icon links within the "type" property of the link table's configuration.
{
"type": "link-table",
"config": {
"title": "Quick links",
"type": "icon",
"titleStyle": {
"fontSize": "extralarge",
"fontWeight": "bold",
"color": "red"
},
"links": [
{
"name": "Google",
"icon": "fal fa-globe",
"value": "https://google.com.au"
},
{
"name": "Kalysys homepage",
"icon": "fal fa-home-lg-alt",
"value": "https://kalysys.com.au"
},
{
"name": "Github",
"icon": "fal fa-alien",
"value": "https://github.com"
},
{
"name": "Instances",
"type": "internal",
"icon": "fal fa-user-friends",
"value": "/app/records/130/view",
"color": "green",
"fontSize": "large",
"fontWeight": "light"
},
{
"name": "Records",
"type": "internal",
"icon": "fas fa-sliders-v-square",
"value": "/app/records/115/view"
},
{
"name": "Reports",
"type": "internal",
"icon": "fas fa-file-chart-line",
"value": "/app/reports"
},
{
"name": "Email templates",
"type": "internal",
"icon": "fal fa-at",
"value": "/app/tools/email/create/saved-templates"
}
]
}
}It is also possible to change font size, weight and colour of the text in icon links. The above configuration is shown below:
3. Combining the Elements
Here’s an example of a full dashboard layout that includes a mix of all 3 link types above.
[
{"widgetId":"77785"}
][
{
"title": "1st section",
"widgetArray": [
{
"type": "link-table",
"config": {
"title": "Quick links",
"links": [
"https://google.com.au",
"https://kalysys.com.au",
"https://github.com",
{
"name": "Google",
"value": "https://google.com.au"
},
{
"name": "Kalysys homepage",
"value": "https://kalysys.com.au"
},
{
"name": "Github",
"value": "https://github.com"
},
{
"name": "Instances",
"type": "internal",
"value": "/app/records/130/view"
},
{
"name": "Records",
"type": "internal",
"value": "/app/records/115/view"
},
{
"name": "Reports",
"type": "internal",
"value": "/app/reports"
},
{
"name": "Email templates",
"type": "internal",
"value": "/app/tools/email/create/saved-templates"
}
]
}
},
{
"type": "link-table",
"config": {
"title": "Quick links",
"type": "button",
"titleStyle": {
"fontSize": "extralarge",
"fontWeight": "bold",
"color": "red"
},
"links": [
"https://google.com.au",
{
"name": "Kalysys homepage",
"value": "https://kalysys.com.au",
"color": "green",
"fontSize": "extralarge",
"fontWeight": "bold"
},
{
"name": "Github",
"value": "https://github.com"
},
{
"name": "Instances",
"type": "internal",
"value": "/app/records/130/view"
}
]
}
},
{
"type": "link-table",
"config": {
"title": "Quick links",
"type": "icon",
"titleStyle": {
"fontSize": "extralarge",
"fontWeight": "bold",
"color": "red"
},
"links": [
{
"name": "Google",
"icon": "fal fa-globe",
"value": "https://google.com.au"
},
{
"name": "Kalysys homepage",
"icon": "fal fa-home-lg-alt",
"value": "https://kalysys.com.au"
},
{
"name": "Github",
"icon": "fal fa-alien",
"value": "https://github.com"
},
{
"name": "Instances",
"type": "internal",
"icon": "fal fa-user-friends",
"value": "/app/records/130/view",
"color": "green",
"fontSize": "large",
"fontWeight": "light"
},
{
"name": "Records",
"type": "internal",
"icon": "fas fa-sliders-v-square",
"value": "/app/records/115/view"
},
{
"name": "Email templates",
"type": "internal",
"icon": "fal fa-at",
"value": "/app/tools/email/create/saved-templates"
}
]
}
},
"77785"
],
"xs": [12, 6, 6, 6, 6, 6],
"md": [12, 6, 6, 6, 6, 6],
"lg": [12, 4, 4, 4, 4, 4]
}
]The above configuration results in the following rendering:
Important NoteThe table paginates when there are more than 8 entries, except for Icon Links.
📌 Need Help?
Updated 8 months ago