How to use 'showon' with global settings in menu item parameter?

Question

In a custom component I have some component params (config.xml) and I have some menu item params (default.xml).

Inside the component params I make use of the showon attribute many times. But to keep it brief, I will show 1 example:

<field name="currency_decimals" 
    type="number" 
    default="0" 
    min="0" 
    max="3" 
    size="2" 
/>   

<field name="currency_decimals_sep" 
    default="," 
    type="text" 
    showon="currency_decimals!:0" 
/>

As expected, the 'decimals separator' field is only visible when 'currency decimals' is not 0, because of the showon attribute.

Next, I also made some menu item params to override this behavior on some pages. And that's where I get a bit stuck. Because my component params are set to 0 decimals, the 'decimals field' shows 'Use Global (0)'. But the 'decimal separator' field is still visible.

This is the code:

<field name="currency_decimals" 
    useglobal="true" 
    type="number" 
    min="0" 
    max="3" 
    size="2" 
/>

<field name="currency_decimals_sep" 
    useglobal="true" 
    type="text" 
    showon="currency_decimals!:0" 
/>

When I manually set the value to 0. The 'decimal separator' field hides. But it doesn't respond to global setting, defined by component config.

I've read the Joomla documentation on this but didn't find a solution. Any ideas on how to fix this?

All input is most welcome. Thanks! :)

Answer 1

The interesting bit here, I think, is that the "Use Global" option leaves the field empty so this simple approach will work for you, but only as long as the global value is 0:

showon="currency_decimals!:[AND]currency_decimals!:0

The problem is the form code doesn't know what the global value is, it only knows the field is empty or filled with a value. Empty == use the global value (if useglobal is defined for the field). So if you were to come along and define a global value of, say, 3 for this field, the second field would still be hidden for "Use Global" -- not exactly what you're after.

Two ways to work around that, but both require writing some code (which you seem capable of since you built a custom component) that I'll describe so you can work whichever mechanism you're more comfortable with into the component. The complicating factor here is javascript shows/hides the field, PHP cannot, but PHP knows what the global config value is, not javascript.

To do it in PHP, you'd need to render the field yourself, and if there is not already a stored value for it, take the global value and insert it as the value for the field. (This effectively eliminates the flexibility of "Use Global" as a side effect, so maybe it's not the best way, but it's the only pure PHP way.) You might be able to manage that in an override of the /form/field/number.php layout file, but that would be template dependent and would override all number fields. Safer would probably be creating a custom field type for this and doing it there.

The (probably preferable) javascript-based mechanism would be to write your own show/hide javascript, and ignore the built-in "showon" mechanism. Add a class name to the field to identify them to the javascript, then read the placeholder for the input field and parse the value inside the parens ("Use Global (0)", for example, would get parsed to "0") to get the current value of the global, then show/hide based on it if the field value is empty. You could use the existing js as a template for it, if it would help.

To use different "showon" values with this code you could build them into the class. For example, to show on values greater than 3 use class "showon-g3" and attach the js to class "showon-*", then read the class names to find the value to use in your js.