[Feature Request] Enable Dynamic List Rendering in Custom API Widget

[morliont]

Description

Currently, the Custom API widget in Homepage is limited to displaying specific, pre-defined data points from an API response. It does not support dynamically rendering a list of items from an array in the API response.

As-Is Situation:

The Custom API widget can only display individual values extracted from the API response, limiting its usefulness for APIs that return lists of items (e.g., a list of servers, a list of available updates, a list of models).

For example, if an API returns a JSON response like this:

{
  "data": [
    { "id": "server1", "name": "Server 1" },
    { "id": "server2", "name": "Server 2" }
  ]
}

The Custom API widget cannot be used to display a list of server names, unless you manually mark each item.

To-Be Situation:

The Custom API widget should be enhanced to support dynamically rendering a list of items from an array in the API response. This would allow users to create more dynamic and informative widgets.

Using the example above, the Custom API widget should be able to generate a list of clickable server names, where each name is a link to a specific server. The list should dynamically change depending on the number of items returned from the API.

Proposed Solution:

Modify the Custom API widget to:

1. Check for an items property in the mappings section of the widget configuration.
2. If the items property exists, extract the array from the API response.
3. Iterate over the array and generate a list of items.
4. Use the name and label properties in the mappings section to determine how to display each item.

Benefits:

• Increased flexibility and usefulness of the Custom API widget.
• Ability to display dynamic lists of items from various APIs.
• Improved user experience with more informative and interactive widgets.

Example Configuration:

widget:
  type: customapi
  url: https://example.com/api/servers
  mappings:
    items: data
    name: id
    label: name
  target: "https://example.com/server/{id}"

Do I miss anything that is already possible? And if this is not the case, what would you think of the above solution?

Other

No response

[shamoon]

#5012

[yamek]

How about keeping the list display and add an attribute to specify the root element? If it is an array, fields as columns?(?) If not, as usual. We could use the formatting options used on "list"

[robflate]

I love this new dynamic-list for the customapi. It cuts down on so much repeated code. The docs don't seem to say if it's possible to set scale, format, style etc for the label. I'm wanting to replace;

display: list
mappings:
  - field: response.data.recently_added.0.title
    additionalField:
      field: response.data.recently_added.0.added_at
      scale: 1000
      format: relativeDate
      locale: en-GB
      numeric: auto
      style: narrow
      color: theme
- field: response.data.recently_added.1.title
    additionalField:
      field: response.data.recently_added.1.added_at
      scale: 1000
      format: relativeDate
      locale: en-GB
      numeric: auto
      style: narrow
      color: theme

with this;

display: dynamic-list
mappings:
  items: response.data.recently_added
  name: title
  label: added_at
  limit: 2

but I need to format the label from a Unix timestamp to a relativeDate as in my current code. Any help appreciated.

[lufiia]

I would like to have format working for dynamic-list as well.

[lufiia]

I opened a PR to add formatting to the label : #5217

[github-actions[bot]]

This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns. See our contributing guidelines for more details.