Directus conditional fields
Conditional fields is a custom extension that allow you to hide and show fields in a collection
Usage
Type dropdown
Add a type dropdown to your collection. It will host the event listener and will trigger the hide and show fields
e.g:
Type:
- editorial
- image
- quote
- ...
Field naming convention
Once you have setup your type field, you need to name your fields like the above
(example with a collection named blocks you will need to start your field name with the singular block)
| collection | type | field |
|---|---|---|
| block | editorial | text |
| block | editorial | intro |
| block | image | picture |
| block | image | alt |
So the fields in the database should be like
block_editorial_text
block_editorial_intro
block_image_picture
block_image_alt
With that config, if you select the type editorial in the dropdown, only the text and intro fields will appear on the screen (and any other field that doesn't start with the collection name).
Import conditional-fields into the collection
Once you have setup your fields, you can then just add the conditional-fields field so the javascript can do his job on the administration page.
NOTE: you will have to name the field conditional_interface
And that's it !
Implementation
You can use the generated build file from the /dist folder and drop it directly into your Directus custom folder, like this :
public/extensions/custom/interfaces/directus-conditional-fields
Build
If you want to update this module, don't forget to run the production build like this :
npm run build
And to drop all the files from directus-conditional-fields/dist into public/extensions/custom/interfaces/directus-conditional-fields
Happy to hear for improvement, use the issues traker to open anything you want.