Dynamically creating form inputs in react based on configurations stored in DB - reactjs

I want to create a dynamic forms in React.
The form should be fully dynamic means say if my API returns the JSON object having different labels for form fields and their types like text, textarea or a dropdown.
So whatever type of form API returns that form field should be displayed in a form.
I am unable to implement it in reactjs.
Any leads would be greatly appreciated.

Related

Grafana custom editor for every query/series

I was wondering if it is possible to write a custom editor (StandardEditorProps) that displays multiple input fields dynamically for every query (every series in the dataFrame).
I would need the same form (labels, bunch of select and text input fields) repeated for every query (I need to get the field names of the query resultset).
These values will be then used to render the custom panel plugin.
If I return, in StandardEditorProps, the entire form, then onChange every select input field is updated with the same value and I cant get the value of every input field in the custom panel plugin as only one customEditor is added in the module.tsx.
On the other hand, If I define multiple custom (and others non custom) editors in module.tsx I can get the values in the panel plugin but I cant make N such forms dynamically.
Hope that makes sense.
Does anyone have any suggestions or ideas how achieve that?

How to combine row filtering and highlight functionality in React tables?

I'm trying to create this functionality in React Tables:
This functionality has been created for another table that is not using useFilters. But now I want to use React useGlobalFilter functionality for this.
I followed this tutorial for that purpose, and now my tables are being correctly filtered using globalFilters.
But the highlight functionality is not working properly. My cell render receives an HTML like this:
<mark>Reg</mark>istered
so if I try to filter by: Registered, it will never work, as plain text contains <mark> HTML tags.
So I'm trying to combine both functionalities playing with Column filters based on dataSource instead of column value, but with no luck.
Note:
My render functionality accepts any component to render content. That's why I can draw HTML content inside.
I want my filter to search based on dataSource or a specific value I set
Any clues on how to get this?

How to implement multilanguage form in antd properly?

I have a form where the user can enter text in the fields, and then select from a dropdown to change the language and fill the same form in the newly chosen language. I can't have a flag for the language and reset the fields because I need to submit the form in every language that is entered. Is there a standard way to implement this with antd? Thanks.
Antd will help you with the design, by providing you with out-of-the-box components such as forms, dropdowns or tabs.
But you will have to implement the logic yourself. One way to do it would be to store the content of the current form in the state, with the language as the key. Then on language update you have a callback that validates the form and insert the current answers into the state. In the end, you will have a form with answers for multiple languages and you send that to your backend on submit.

Ext JS Load data into a form automatically

I'm wondering how to load data into a form. I have already a store for the appropriate grid but the model is different. I'm using the MVC approach. So basicly I need to load the data into the form when the form is displayed.
With limited details, I could just give you hints.
Make sure you load your View from your Controller.
Your view should be connected to a Store .The Store must be connected to the Model.
Model is composed of Data and Fields or it is otherwise called the actual schema. You can also define the proxy in the Model or Store.
Follow this approach and you will be able to achieve what you are looking for.
You can use form.loadRecord(record) to load a model into a form.
If a form field has a name that matches the name of a field on the model, then that value will get loaded into the form field.
What does
I have already a store for the appropriate grid but the model is
different
mean?

How to load custom post type field values in Wordpress from the database?

I was reading this link about creating a custom post type in Wordpress. In the example, the field value box is text and the user can enter anything inside. I was wondering if it's possible to turn that field value box to a dropdown one, which values are loaded from the database. So for example, under 'Date', there is a dropdown box next to it with dates loaded from the database. Anyone know if it's possible? Thanks!

Resources