Because Magento use async rendering it not possible to make what you ask.
But you can work with js UI component to disable field
require(['uiRegistry'], function (uiRegistry) {
uiRegistry.get("product_form.product_form.product-details.quantity_and_stock_status_qty.qty", function (element) {
element.disable()
})
})
This answer is correct, however we're lacking information regarding how we know to use 'product_form.product_form.product-details.quanityt_and_stock_status_qty.qty' as the get() parameter.
.get is looking for its first parameter to be a component. So... how do you find the component, and is that language clear? No.
As an example, I wanted to add some custom javascript functionality to the customer information page within the Magento 2 admin. Specifically under, editing a user, 'Account Information' tab.
There are two ways to approach this from what I can tell...
Edit the datasource, to change values.
Manipulate the field, such as visibility.
Edit the datasource:
Lets roll. Some dots are missing here, but we're on a page handled by the magento customer module, its an edit page... so we look here... /vendor/module-customer/view/adminhtml/layout/customer_index_edit.xml. Within here the content area is defined to contain 'customer_form'.
<referenceContainer name="content">
<uiComponent name="customer_form"/>
</referenceContainer>
This means we're looking for a 'customer_form.xml' file, in this case it is found under /vendor/module-customer/view/base/ui_component/customer_form.xml. Within here we find the definition for a couple of the forms within the tabs and their fields. The datasource we're after is defined near the top.
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">customer_form.customer_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Customer Information</item>
<item name="reverseMetadataMerge" xsi:type="boolean">true</item>
</argument>
Note the 'provider' of 'customer_form.customer_form_data_source'. This is where all of our field data will exist within the .get call.
Our .get() would now become:
uiRegistry.get('customer_form.customer_form_data_source', function(element) {
console.log(element.data);
});
Now, the question becomes... what can we do with this- and all you can do is adjust the data. You can turn fields true/false, manipulate values, so on. Useful.
Manipulate the field:
What if we want to hide the field and only show it under x condition... we can't do that with the datasource.
Now... this is going to be long and seem convoluted. Its because I'm teaching how to find your data... as I don't know how to find this any other way- and its going to be different per module. Teach a man to fish.
First I output my 'customer_form.customer_form_data_source' within our .get(). This will provide us a 'params' object key, within that is the definition of an 'activeArea' on the object, which is 'customer_form.areas.customer_edit_tab_view_content'.
Ok... so there are 'areas'. Areas, are the tabs on the left- each one is an area. Open up the '_elems' within your console, you'll notice 9 objects at the top. Open the second one and you'll find a label of 'Account Information'. This is the section I'm after. Then observe the 'name' value of 'customer_form.areas.customer'... ok lets try that as our get() param.
uiRegistry.get('customer_form.areas.customer', function(element) {
console.log(element);
});
This is our fieldset wrapper, check its name value within the console under '_elems'->0->'name'. 'customer_form.areas.customer.customer'... we're drilling down. We're actually already there, check the 'name' value on the field you want to edit. You'll notice its name is 'customer[field_name]'. Making our path for get() is 'customer_form.areas.customer.customer.['field_name]'.
uiRegistry.get('customer_form.areas.customer.customer.[field_name]', function(element) {
element.visible(false);
});
Examples:
[form_name].[tab_areas].[area_name].[fieldset_name].[field_name]
customer_form.areas.customer.customer.field_name
Best Answer
In Knockout js, there is one function called "afterRender" Use that to achieve expected output.
Magento 2.x Doc Link for afterRender binding notifies its subscriber when an associated element is inserted into the DOM.
Sometimes we want to run custom post-processing logic (after DOM ready) on the DOM elements generated by our templates.
For example,
Pass a function reference (either a function literal, or give the name of a function on your view model), and Knockout will invoke it immediately after rendering or re-rendering our template.
For example,
and define a corresponding function on your view model (i.e., the object that contains myData):
If we're using
foreach
, Knockout will invokeafterRender
callback for each item added to our observable array.