uiRegistry library

uiRegistry is in-memory, plain storage of entities by keys. Implements the get(), set(), and has() methods.

JavaScript debugging

To debug the UI component JS, we first need to get a uiRegistry instance from the browser console. To do so, use the RequireJs ID uiRegistry.

In the browser console enter the following:

Copy
var registry = require('uiRegistry');
Copied to your clipboard
var registry = require('uiRegistry');

Now we have uiRegistry instance in the registry variable. We can use it to get an instance of any component.

Copy
var component = registry.get('componentName');
Copied to your clipboard
var component = registry.get('componentName');

The uiRegistry instance allows you to search for components using property values. If you know a unique property value of a component that you need to find, you can use the following code to get the component:

Copy
var component = registry.get('property = propertyValue');
Copied to your clipboard
var component = registry.get('property = propertyValue');

To get a list of all components used on the current page, you can use this code:

Copy
require('uiRegistry').get(function(component){console.log(component.name)});
Copied to your clipboard
require('uiRegistry').get(function(component){console.log(component.name)});

Asynchronously retrieve components from the registry

Copy
module('trigger', true);
var component = () => registry.get('componentName', function (component) {
    component.trigger(true);
});
Copied to your clipboard
module('trigger', true);
var component = () => registry.get('componentName', function (component) {
    component.trigger(true);
});

Examples:

The following code shows how to get a component by a full component name:

Copy
// Admin > Products > Catalog > Add Product
var fieldName = registry.get('product_form.product_form.product-details.container_name.name');
Copied to your clipboard
// Admin > Products > Catalog > Add Product
var fieldName = registry.get('product_form.product_form.product-details.container_name.name');

The following code shows how to get a component by a property value:

Copy
// Admin > Products > Catalog > Add Product
var fieldName = registry.get('index = name');
// or
fieldName = registry.get('inputName = product[name]');
Copied to your clipboard
// Admin > Products > Catalog > Add Product
var fieldName = registry.get('index = name');
// or
fieldName = registry.get('inputName = product[name]');

The previous example gets the same JS component as using the full component name.

Lets look what we have in component variable. It keeps component context with all properties, we can see component file, component name and so on.

Copy
console.log(fieldName.name); // product_form.product_form.product-details.container_name.name

fieldName.trigger('validate'); // will invoke validation
fieldName.visible(false); // will hide field from page
fieldName.visible(true);  // will show field again
fieldName.value(); // will show current field value
fieldName.value('New string value'); // will change field value to string 'New string value'
Copied to your clipboard
console.log(fieldName.name); // product_form.product_form.product-details.container_name.name

fieldName.trigger('validate'); // will invoke validation
fieldName.visible(false); // will hide field from page
fieldName.visible(true);  // will show field again
fieldName.value(); // will show current field value
fieldName.value('New string value'); // will change field value to string 'New string value'

Last updated 9/11/2023

Was this helpful?

Yes

No