With reference to this Q&A there's another question.
How do I clear the image selected using the Media Browser on category edit page in the admin Panel?
Here's what I tried:
in app/code/Vendor/Module/view/base/web/template/form/element/custom-button.html
I added an extra button which will clear the value of the hidden input field, when clicked.
But the real problem starts here. When the Category is saved (Save button is clicked), the Knockout JS observables, replace the already saved value or newly selected value (image url) to the input field.
ref: vendor/magento/magento2-base/lib/web/knockoutjs/knockout.js line 1276
function observable() {
if (arguments.length > 0) {
// Write
// Ignore writes if the value hasn't changed
if (observable.isDifferent(_latestValue, arguments[0])) {
observable.valueWillMutate();
_latestValue = arguments[0];
if (DEBUG) observable._latestValue = _latestValue;
observable.valueHasMutated();
}
return this; // Permits chained assignments
}
else {
// Read
ko.dependencyDetection.registerDependency(observable); // The caller only needs to be notified of changes if they did a "read" operation
return _latestValue;
}
}
now I used the component property in the category_form.xml
to override this behaviour, but unsuccessful.
<field name="custom_attribute_code">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sortOrder" xsi:type="number">40</item>
<item name="formElement" xsi:type="string">input</item>
<!--<item name="notice" xsi:type="string">The categroy has to be saved after selecting an image</item>-->
<item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/bg-button</item>
<item name="elementId" xsi:type="string">custom_attribute_code</item>
<item name="dialogUrl" xsi:type="url" path="cms/wysiwyg_images/index">
<param name="target_element_id">custom_attribute_code</param>
<param name="type">file</param>
</item>
<item name="component" xsi:type="string">Vendor_Module/js/form/element/button</item>
<item name="label" xsi:type="string" translate="true">Custom Attribute Label</item>
</item>
</argument>
</field>
[only that line]
<item name="component" xsi:type="string">Vendor_Module/js/form/element/button</item>
where button.js
is in the following path
Vendor/Module/view/base/web/js/form/element/button.js
But I get the following error.
TypeError: Constr is not a constructor layout.js (line 66, col 25)
Can someone show me the right direction on how do I override the above mention Knockout JS observable with my js file???