Menu Close
    Start a Project Request quote Reading list Switch to dark mode

    How to subscribe admin form knockout observers in Magento2

    In this article, we are going learn how to create a subscriber for magento2 admin form elements.
    Working on magento2 is quite fun but sometimes it feels quite annoying of the fact that, a very simple task such as adding a change event on admin form element or getting its value on form load can take hours.
    Magento2 uses a very hi-tech code architecture on server-end like dependency injection, code generation, service contracts, but it is even more hi-tech on ui-end and most of the PHP developers use javascript in their daily work, but they use very basic javascript functions, very few understand the advanced javascript concepts and magento2 is full of these things.

    It is very hard to see and understand things that you don’t understand very well, and magento2 javascript code architecture is one of them. Now back to our topic, how we can get admin form element value on form load, it seems very simple a simple jquery code can do this:

    what you will do is to add the above code in a phtml file and load the phtml from the catalog_product_edit.xml layout to the content, header, footer or anywhere on the page, but it will simply give you an undefined message in the console, since magento2 admin form is purely knockout driven all the form elements starts loading after the page is loaded so there is only one way to do that is to use knockout and get the observable value of the product name field.

    So the first step is to load you knockout component in the magento2 admin form, create this file in your module:



    This is how easily you call any component on the admin forms, the above code will load your component on the product form.

    Now let’s create the component file:

    As you can see in the above code I have extended the uiComponent and set some default values, you can see the imports property there I have defined productName and productDescription as ${ $.provider } and ${ $.provider }:data.product.description, in this string ${ $.provider } is the form data provider and is the attribute to get, similarly you can define any form attributes here, I am not going in depth of all these stuff since these can be very time taking but I will surely write about these topics as well in the future.

    You can see the initSubscribers property there I have subscribed the productName and productDescription  observers, so that if there is any change in the values I can do whatever I want and I also console log the initial values.

    So to observe the magento2 admin form values you need to do the above code in your module.

    Hope the above code will help you if you have any doubt please let me know in the comments below.


    . . .

    Comments (4)

    Add Your Comment

  • Shane
    How come if I add productSku: ‘${ $.provider }:data.product.sku’ to the imports and duplicate everything the function below only fires when you click out of the product sku input ?

    //creating a knockout subscriber to observe any changes in the product SKU
    function (productSku) {

    • ashutosh srivastava
      yes this is the problem with some of the input fields in Magento form, you can simply observe it with keyup event using simple jquery. thanks
  • Sagar Doshi
    Hello Ashutosh Srivastava,

    I have review your Post its very use full but give me some more guidance please.

    Where i need to create above javascript file give me path please. And most thing how can i update attribute value using javascript observers ?

    Please quickly answer me.

    • Webkul Support
      The javascript path can be anywhere in adminhtm/web, but according to my code it will reside in :
      the html template file path will be:
      and I have already defined product name and description observables in the js file.
  • Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again