Populating a enum with data from an array


I hope this isn’t just some duplicated question/topic or there isn’t some problem in that way I’m exposing the topic, but I want to have a dynamic dropdown list in my forms which is dynamic populated by some array in the same forms.

In more concrete way, I’m developing a forms to gather information about group projects. So, there would be an array of members and an array of tasks. My problem here is, in each task, there would be an assignee field and I would like to select in that field only the members that were submitted in the members array early on.

I searched a bit and I found that I need to make a Custom Renderer, but, as a newbie that I am, I’m very confused and lost in all the wiki or other questions that I found. So, I wanted to know if there is someone that could help me find examples of other Custom Renderer, so I could understand the subject better, or explain to me how could interact this two arrays (or more specific an array and an enum) in this project?

Thanks in advance!

Hi @Vilps, yes this can be solved with a custom renderer. This custom renderer barely needs any code as you can reuse the existing renderers.

I would recommend following this tutorial on how to implement a custom renderer. As a reference, here you can see the implementation of our enum renderer: MaterialEnumControl wrapping MuiSelect.

Plan for your custom renderer:

  1. Write a custom control renderer using withJsonFormsControlProps
  2. In your renderer you can get the whole data object injected via useJsonForms. With that you can resolve your allowed members, e.g. const context = useJsonForms(); const members = context.core.data.members;
  3. Now you can reuse the MaterialEnumControl (unwrapped) and hand over all your props plus the options prop (= an array of label/value objects)

Make sure to add a proper tester (e.g. hardcoded against your assigne path or maybe checking some special property in the JSON Schema) for your renderer and register them in the JsonForms component. That’s it.

Hi @sdirix, sorry for the late answer, but I tried to apply what you said in the project, but it still got me blocked because I’m fairly new to the react and jsonforms way of doing things. Not only that, but the tutorial you reference were in typescript and I’m doing all the app in javascript xp.

For now, I scan in runtime the data and then overwrite the necessary enums on the schema to show them afterwards. Just because I have a due date to have this operating, this solution is doing just fine, but after that, I’ll try find some free time to advance on this answer and see if I could make the custom renderer work. Not only because of that, but because the current method I implemented becomes slower as more entries is added (because a for loop).

Thank you very much for the answer though! I hope that I can give an update in the near future!

1 Like