App Builder

AndreiDu · 1/19/24

I'm trying to integrate Admin UI SDK into our Adobe Commerce instance while following the official docs.

While trying to test the integration using the provided sample app, I'm running into the following issue:

As a result, I don't see the sample app in the admin section of Adobe Commerce.

This is the code that registers the extension, it's from the sample app:

/*
 * Copyright 2022 Adobe
 * All Rights Reserved.
 *
 * NOTICE: All information contained herein is, and remains
 * the property of Adobe and its suppliers, if any. The intellectual
 * and technical concepts contained herein are proprietary to Adobe
 * and its suppliers and are protected by all applicable intellectual
 * property laws, including trade secret and copyright laws.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from Adobe.
 */
import { register } from '@adobe/uix-guest'
import { extensionId } from './Constants'
import { MainPage } from './MainPage'

export default function ExtensionRegistration(props) {
  init().catch(console.error)
  return <MainPage runtime={props.runtime} ims={props.ims} />
}

const init = async () => {
  await register({
    id: extensionId,
    methods: {
      menu: {
        getItems() {
          return [
            {
              id: `${extensionId}::first`,
              title: 'First App on App Builder',
              parent: `${extensionId}::apps`,
              sortOrder: 1
            },
            {
              id: `${extensionId}::apps`,
              title: 'Apps',
              isSection: true
            }
          ]
        }
      },
      page: {
        getTitle() {
          return 'First App on App Builder'
        }
      },
      product: {
        getMassActions() {
          return [
            {
              actionId: `${extensionId}::first-mass-action`,
              label: 'First App Mass Action',
              type: `${extensionId}.first-mass-action`,
              confirm: {
                title: 'First App Mass Action',
                message: 'Are you sure your want to proceed with First App Mass Action on selected products?'
              },
              path: '#/first-mass-action',
              productSelectLimit: 1
            },
            {
              actionId: `${extensionId}::another-first-mass-action`,
              label: 'Another Mass Action',
              type: `${extensionId}.another-mass-action`,
              path: '#/another-mass-action'
            }
          ]
        },
        getGridColumns() {
          return {
            data:{
              meshId:'',
              apiKey: ''
            },
            properties:[
              {
                label: 'App Column',
                columnId: 'first_column',
                type: 'string',
                align: 'left'
              }
            ]
          }
        }
      },
      order: {
        getGridColumns() {
          return {
            data:{
              meshId:'',
              apiKey: ''
            },
            properties:[
              {
                label: 'First App Column',
                columnId: 'first_column',
                type: 'string',
                align: 'left'
              },
              {
                label: 'Second App Column',
                columnId: 'second_column',
                type: 'integer',
                align: 'left'
              },
              {
                label: 'Third App Column',
                columnId: 'third_column',
                type: 'date',
                align: 'left'
              }
            ]
          }
        },
        getMassActions() {
          return [
            {
              actionId: `${extensionId}::order-first-mass-action`,
              label: 'First App Mass Action',
              type: `${extensionId}.order-first-mass-action`,
              confirm: {
                title: 'First App Mass Action',
                message: 'Are you sure your want to proceed with First App Mass Action on selected orders?'
              },
              path: '#/first-mass-action',
              orderSelectLimit: 1
            },
            {
              actionId: `${extensionId}::second-mass-action`,
              label: 'Second Mass Action',
              type: `${extensionId}.second-mass-action`,
              path: '#/another-mass-action'
            }
          ]
        },
        getOrderViewButtons() {
          return [
            {
              buttonId: `${extensionId}::delete-order`,
              label: 'Delete',
              confirm: {
                message: 'Are you sure your want to proceed to delete order?'
              },
              path: '#/delete-order',
              class: 'custom',
              level: 0,
              sortOrder: 80
            },
            {
              buttonId: `${extensionId}::create-return`,
              label: 'Create Return',
              path: '#/create-return',
              class: 'custom',
              level: 0,
              sortOrder: 80
            }
          ]
        }
      }
    }
  })
}

rxraj · 8/13/25

@AndreiDu

During the development of the admin-ui SDK for the App Builder application, we encountered a similar error.

We have implemented a fix in the ExtensionRegistration.js file. Please refer to the following code.

Add the timeout parameter value

export default function ExtensionRegistration(props) {

  useEffect(() => {
    (async () => {

      await register({
        id: extensionId,
        methods: {
          ....
        },
        // TODO: This timeout variable configured for the development purpose only
        timeout: 1800000 // For 30 minutes
      })
    })()
  }, [])

  return <MainPage ims={props.ims} runtime={props.runtime} />
}

Let me know, if this fix works for you

asalloum · 8/18/25

@AndreiDu

Are you testing on a local environment or the cloud instance? What version of Admin UI SDK is installed on your commerce instance?

I would recommend to upgrade to the latest version of Admin UI SDK and check if you still have the issue of the application not being displayed. Please make sure to update your registration based on the following sample: https://github.com/adobe/adobe-commerce-samples/tree/main/admin-ui-sdk/menu/custom-menu

Kindly note that the timeout issue is not the source cause of why the app is not being displayed.

rxraj · 8/19/25

@asalloum

Please refer to the following version of the Admin UI SDK:

magento/commerce-backend-sdk        2.3.0 Metapackage with required packages for Commerce Backend SDK

magento/module-commerce-backend-uix 2.3.0 This module introduces UI extensibility in admin panel

Additionally, we are using the same sample code for the custom menu that you shared earlier: https://github.com/adobe/adobe-commerce-samples/tree/main/admin-ui-sdk/menu/custom-menu

I noticed that an error is being thrown in the browser console from the @adobe/uix-core package.

The source file for this error (Please refer attached screenshot)