Skip to content

Add Widgets API documentation and enable unstableWidgetsApi feature flag #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

dev-docs-github-app-dev[bot]
Copy link

This pull request adds a new page to the documentation, widgets-api.md, which explains how to use the Widgets API to create and manage widgets in the Strapi admin panel. It also updates the features.md file to include information about the unstableWidgetsApi future flag, which can be used to enable the experimental Widgets API functionality.

This PR is generated from the issue team-dev-docs/strapi#6

Widgets are identified by a unique UID, which is automatically generated based on the `pluginId` and `id`:

- For plugin widgets: `plugin::{pluginId}.{id}`
- For global widgets: `global::{id}`
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think "global" is clear to users. Basically it's for widgets created directly within an app, not via a plugin

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But also, users shouldn't care at all about the UID, it's just useful to us to render the homepage

Comment on lines +49 to +55
### getAll()

Retrieves all registered widgets:

```javascript
const allWidgets = widgets.getAll();
```
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this isn't useful to users, it just allows us to render the homepage. Registering is all that matters for them so I recommend to omit the rest

id: 'my-widget.title',
defaultMessage: 'My Widget',
},
component: () => import('./components/MyWidget'),
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the component function should return a component directly, not a file that has a component as a default export. so:

Suggested change
component: () => import('./components/MyWidget'),
component: async () => {
const { Component } = await import('./components/MyWidget');
return Component

Comment on lines +16 to +18

To create a widget, you need to use the `Widgets` class from the `@strapi/admin` package. Here's an example of how to create a widget:

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is wrong, what we should explain instead is:

  • they should register the widgets during Strapi's register phase
  • instead of importing anything, they should access the widgets register api via the app object provided as a param of the Strapi's register lifecycle. Exactly like custom fields

Comment on lines +101 to +106
import { Widgets } from '@strapi/admin';
import RecentContentIcon from './icons/RecentContent';

const widgets = new Widgets();

widgets.register({
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same comment as before, this isn't how registration works

id: 'dashboard.widgets.recent-content.title',
defaultMessage: 'Recent Content',
},
component: () => import('./components/RecentContentWidget'),
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see the point of this example, it's the same thing as the one above.

What would be interesting instead is to show how to build the actual component

- For plugin widgets: `plugin::{pluginId}.{id}`
- For global widgets: `global::{id}`

## Best Practices
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this part is quite visibly AI generated imo, most of it is common sense

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant