Hi,
I would like to increase Simplicity for Editors.
Is there an outOfTheNeosBox-solution to show/hide Inspector-Fields, depends on the value (at least boolean) of an other inspector-Element?
####Situation:
An element will have different images for small|medium|large viewports. Also for retinaSmall|retinaMedium|retinaLarge, and an one image as fallback for all of them.
I have done a nodeType for this and all is working fine. But maybe an Editor don’t like to add images for retina.
So for his workflow and clarity, it would be great to have the opportunity to show the retinaImage-selection-fields in inspector only, if the boolean «withRetinaImages» is selected.
###BUT: THIS IS NOT WORKING!!
######(I know, in real, I have to do the opposite: disabled: TRUE as default and disabled:FALSE if addImages is TRUE. But for easier understanding/testing I tried as near as possible like in Reference, only canceled the handlerOptions: something: true part. Unfortunately disabled: TRUE in image>ui>inspector doesnt’ hide something. The Image-Field is still there … But in Reference there is the statement: listeningEditor - The property editor this listener is configured for, in the above example it will be the border-color editor => for my situation would be the image editor. But can’t find the fitting option)
####WHAT IS WORKING:
There is the Checkbox in the Inspector and if I select an Apply it, the Database value change to "addImages": false OR "addImages": true
###Possible Mistakes:
I have to declare the Handler with particular name line like: handler: VendorName.SiteName/Handlers/test.js'
–> But if I do so, there is an Error: Inspector change handler could not be loaded. See console for further details. So, this should be right!
-> Although, I’m not sure, maybe the Handler is not loaded, because I have not define the particular name, like in the Configuration Folder for yaml-files. Unfortunately, the Reference never show filenames with #blabla.js or similar, so I can’t figure out, if I would have to do/try different.
I canceled the handlerOptions: something: true -part. Maybe this is also a problem. But also used this part, there is no changing: No hiding/noError.
I can’t understand this part in deep, but I think it has to do with the property: Image and not with the logical or property: addImages. But the Reference is silent about…
Maybe I have to use an other called Option for ImageEditor, not written in Reference. But I can’t figure out the matching file?
Quite sure, I did more than one fault, and if during my Trial&Error, the solution is not
recognizable, because the various Errors influence each other.
####Too many sources of error, to find the solution. Also not possible to debug with IDE. To many unknown corners.
Could some-one help me?
Have to apologize since the listeners can’t really be used for hiding properties, just updating values of other properties.
It is possible to hide/show an editor like you tried, but since the listener is only called when the value actually changes and not also when the editor is initialized you cannot hide/unhide based on the current value but only when it changes.
To show/hide an editor you can use
if (listeningEditor) {
listeningEditor.set('isVisible', newValue);
}
and similarly set isVisible: false in the editorOptions of the editor. But then the editor will always be hidden until the checkbox value is changed.
It could be fixed by allowing listeners to be initialized when the editors are created, but that’s a feature add-on that needs to be added to the core.
Alternatively you can extend the image editor and add the logic, but this I can’t really recommend as it’s quite outside the official API.
Servus Aske,
thank you a lot for your help. Thought almost, I’d be too stupid for the conditional show/hide inspector-fields-solution.
I tried your code and it works fine, all the fields will be showed and hided, until …
If I click «Apply», the current state of «isVisible» transmitted by the handler is forgotten/gone. So I think I understand the problem for my consider Solution. Thanks – it really helps me!
####Other “Problem”:
The «label» is still shown in the inspector, also if the field is set on «isVisible: FALSE» and the field as such is invisible. But for my use case, I can’t use this forgetful solution anyway.
No problem – I learned something new, and know the «limits of use» better.
###For others in search:
Important: In this state of Neos (2.2.3), the resulting “application” is not really helpful or usable for the use case (IMHO), because of the listening field’s dementia! Maybe it will change in future. –> Only for better understanding. (small cookbook for practice: If Neos’ reference is for you sometimes, as for myself as a beginner, not easy to put into practice)
##/Sites/Vendor.Site/Configuration/NodeTypes.CustomImage.yaml
'Vedor.Site:CustomImage':
properties:
showImages:
type: boolean
defaultValue: FALSE
ui:
label: 'Bilder nutzen'
reloadIfChanged: TRUE
help:
message: "Klicke hier, wenn Du Bilder hinzufügen möchtest"
inspector:
group: 'yourGroup'
position: 406
image:
type: 'TYPO3\Media\Domain\Model\ImageInterface'
ui:
label: 'Standard-Bild auch als Fallback'
reloadIfChanged: TRUE
help:
message: "Standard-Bild für alle Grössen: Wenn keine passendes Bild zu finden ist, wird von diesem ein passendes in der Grösse hergestellt"
inspector:
group: 'yourGroup'
position: 407
editorOptions:
isVisible: FALSE
editorListeners:
showImageFields:
property: 'showImages'
handler: 'Vendor.Site/Handlers/showHide'
imageSmall:
...
imageMedium:
...
#/Sites/Vendor.Site/Resources/Public/Scripts/Inspector/Handlers/showHide.js
define(
[
'emberjs'
],
function (Ember) {
return Ember.Object.extend({
handle: function(listeningEditor, newValue, property, listenerName) {
if (listeningEditor) {
listeningEditor.set('isVisible', newValue);
}
}
});
});
# Don't know why, but throws an Error, if js-file will store under Private-path
.