dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-07 14:18:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Enhancement: support dynamic list rendering in custom api widget (#5012)

Browse source 
Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
This commit is contained in:
morliont 2025-03-17 19:30:01 +01:00 • committed by GitHub
parent de9c015f7f
commit 8d20f22932
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 125 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

52
docs/widgets/services/customapi.md
View file

@ -138,7 +138,15 @@ You can manipulate data with the following tools `remap`, `scale`, `prefix` and
prefix: "$"
```
## List View
## Display Options
The widget supports different display modes that can be set using the `display` property.
### Block View (Default)
The default display mode is `block`, which shows fields in a block format.
### List View
You can change the default block view to a list view by setting the `display` option to `list`.
@ -169,6 +177,48 @@ The list view can optionally display an additional field next to the primary fie
format: date
```
### Dynamic List View
To display a list of items from an array in the API response, set the `display` property to `dynamic-list` and configure the `mappings` object with the following properties:
```yaml
widget:
type: customapi
url: https://example.com/api/servers
display: dynamic-list
mappings:
items: data # optional, the path to the array in the API response. Omit this option if the array is at the root level
name: id # required, field in each item to use as the item name (left side)
label: ip_address # required, field in each item to use as the item label (right side)
limit: 5 # optional, limit the number of items to display
target: https://example.com/server/{id} # optional, makes items clickable with template support
```
This configuration would work with an API that returns a response like:
```json
{
"data": [
{ "id": "server1", "name": "Server 1", "ip_address": "192.168.0.1" },
{ "id": "server2", "name": "Server 2", "ip_address": "192.168.0.2" }
]
}
```
The widget would display a list with two items:
- "Server 1" on the left and "192.168.0.1" on the right, clickable to "https://example.com/server/server1"
- "Server 2" on the left and "192.168.0.2" on the right, clickable to "https://example.com/server/server2"
For nested fields in the items, you can use dot notation:
```yaml
mappings:
items: data.results.servers
name: details.id
label: details.name
```
## Custom Headers
Pass custom headers using the `headers` option, for example: