diff --git a/assets/js/src/examples/api-data/components/api-data-widget.tsx b/assets/js/src/examples/api-data/components/api-data-widget.tsx
new file mode 100644
index 0000000..0f31b1f
--- /dev/null
+++ b/assets/js/src/examples/api-data/components/api-data-widget.tsx
@@ -0,0 +1,32 @@
+import { Content, Header } from '@pimcore/studio-ui-bundle/components'
+import { useAssetGetTreeQuery } from '@pimcore/studio-ui-bundle/api/asset'
+import React, { useEffect } from 'react'
+import { ApiError, trackError } from '@pimcore/studio-ui-bundle/modules/app'
+
+export const ApiDataWidget = (): React.JSX.Element => {
+ const { isLoading, data, isError, error } = useAssetGetTreeQuery({
+ page: 1,
+ pageSize: 10
+ })
+
+ useEffect(() => {
+ if (isError) {
+ trackError(new ApiError(error))
+ }
+ }, [isError])
+
+ return (
+
+
+
+ {data?.items.map((item) => (
+
+ {item.filename}
+
+ ))}
+
+ )
+}
diff --git a/assets/js/src/examples/api-data/index.ts b/assets/js/src/examples/api-data/index.ts
new file mode 100644
index 0000000..e5d5389
--- /dev/null
+++ b/assets/js/src/examples/api-data/index.ts
@@ -0,0 +1,10 @@
+import { type IAbstractPlugin } from '@pimcore/studio-ui-bundle'
+import { ApiDataExtension } from './modules/api-data-extension'
+
+export const ApiDataPlugin: IAbstractPlugin = {
+ name: 'ApiDataPlugin',
+
+ onStartup ({ moduleSystem }) {
+ moduleSystem.registerModule(ApiDataExtension)
+ }
+}
diff --git a/assets/js/src/examples/api-data/modules/api-data-extension.tsx b/assets/js/src/examples/api-data/modules/api-data-extension.tsx
new file mode 100644
index 0000000..f67d864
--- /dev/null
+++ b/assets/js/src/examples/api-data/modules/api-data-extension.tsx
@@ -0,0 +1,32 @@
+import { type AbstractModule, container } from '@pimcore/studio-ui-bundle'
+import { serviceIds } from '@pimcore/studio-ui-bundle/app'
+import { type MainNavRegistry } from '@pimcore/studio-ui-bundle/modules/app'
+import { type WidgetRegistry } from '@pimcore/studio-ui-bundle/modules/widget-manager'
+import { ApiDataWidget } from '../components/api-data-widget'
+
+export const ApiDataExtension: AbstractModule = {
+ onInit () {
+ const mainNavRegistryService = container.get(serviceIds.mainNavRegistry)
+
+ mainNavRegistryService.registerMainNavItem({
+ path: 'Example Plugin/Api Data',
+ widgetConfig: {
+ name: 'Api Data',
+ id: 'api-data',
+ component: 'api-data-widget',
+ config: {
+ icon: {
+ type: 'name',
+ value: 'pimcore'
+ }
+ }
+ }
+ })
+
+ const widgetRegistryService = container.get(serviceIds.widgetManager)
+ widgetRegistryService.registerWidget({
+ name: 'api-data-widget',
+ component: ApiDataWidget
+ })
+ }
+}
diff --git a/assets/js/src/examples/custom-widgets/components/example-widget.tsx b/assets/js/src/examples/custom-widgets/components/example-widget.tsx
index 4f98307..32cb9aa 100644
--- a/assets/js/src/examples/custom-widgets/components/example-widget.tsx
+++ b/assets/js/src/examples/custom-widgets/components/example-widget.tsx
@@ -6,6 +6,7 @@ export const ExampleWidget = (): React.JSX.Element => {
const widgetManager = useWidgetManager()
const [selectedOption, setSelectedOption] = React.useState(undefined)
const [selectedWidget, setSelectedWidget] = React.useState | undefined>(undefined)
+ const areButtonsDisabled = selectedWidget === undefined
const widgets = [
{
@@ -73,19 +74,31 @@ export const ExampleWidget = (): React.JSX.Element => {
direction='vertical'
size='small'
>
-