We are planning to build a dynamic frontend where users (admin specifically) can create UI components with something simple like a button click without changing the code.
For example:-
I have a form where I have 2 inputs username and email and there's a button to add more input fields and whenever the admin clicks on that button it displays another form where you can enter info such as type, label, name of the input field to be added and it then it displays it on the DOM.
But he also wants to persist the newly created form (or components) so whenever other user logs in he'll also be able to see it
We are using react to create our frontend so is there any way to achieve this?
One solution came to my mind that we can store the information to create new components into a database and then fetch that with an API into the component we want and then render it. But they don't want to use a database
Related
I have an add contact Modal and an add company Modal. When the user wants to add a contact they click the corresponding button which opens said Modal. Typically, they would fill out the information needed on this form. One of them being a Company they belong to. If the company does not exist in the system, they then have an add company button which when pressed opens another Modal on top of the contact one.
Again, the user enters the information for the company and once done, would tap save. This would then trigger a fetch which POSTS the information to my Spring Boot backend which in turn sends back a JSON object version of the company which has come from the database.
I then check it and if it comes back valid, it sets out an alert telling the user it was successful and closes the company Modal.
At this point, the user should be able to type the company name into the contact company autocomplete and find the company they've added.
However, at this point, that is not happening. The re-fetch is not triggered at all despite me thinking that when the Contact Modal is re-rendered it would trigger the re-fetch.
I've tried clearing the contactList within the return() function but this causes a Too many re-renders error.
My question is, how would I trigger a re-fetch from within the contact list once it has returned from the company modal?
My initial thought would be to not have more than one modal open at the same time. Feel free to disagree but that doesn't seem like that's how modals are intended to work. As an alternative, you could have an "Other" option and have a set of text fields conditionally appear. Upon completing the form, have a boolean variable (or however you want to do it) be passed into your backend that kicks of the business logic that creates a new company before adding the contact. Or add all that logic to your add contact SQL procedure to avoid making (a risky) two db calls for one action.
Refetch Problem
Without looking at your code, it's possible that if you're using the useEffect hook, you aren't passing any dependencies to "listen" for certain variables that have been changed. After the data comes back from that POST call, you should add code that updates the array populating the select company dropdown field (eg .then() callback)--assuming it is a dropdown and an array. This change in state should re-render the component but, for a better user experience, you may want to do it in a way that it doesn't blank out the rest of your fields.
You are probably using useEffect which makes the loop.
Try to connect refetch with an event - click or submit, within try/catch - via 2 way binding eventHandler prop that calls praticular function.
Also you can change the state, and refectch the results after the new loading of the page. Hope it helps, even as a hint!
I have a form in which there are multiple fields. The user can enter in any of the field and submit it to the database. I then display display this data in the table.
I have created backend APIs and they are working properly. I also know how to create a component on react, but I am not able to figure out how to display the data in the table after the search button is pressed.
Look at controlled input in React. Basically you need to update the state and use the state value in React for the value of the input
Assume I have a shiny new React component for rendering markdown and ye old legacy static HTML form, where user types text into textarea
Now I want to enhance this form a little: I want to display my React component alongside and render markdown as user types.
So, basically, I need to set component's props from HTML.
Next thing
Assume I have a React component that displays set of pics and lets user to click and mark one as active. It draws a fancy blue border around the active image and everyone are happy.
Now I have ye old HTML form and I want to send selected picture's id to my server.
So, basically, I need to read component's props (or state) and put it in the hidden field of the form
How do I achieve this? I also might have multiple separate components on my page
I'm trying to figure out how I can make a custom directive which will combine:
reference list select field
create button which will show a reference entity creation view
and on creation save. reload reference list entities, so i can choose a newly created entity.
It can be easily done using completely custom code, but i want to make it using ng-admin templates and directives.
It's also quite common functionality, but i'm having a hard time integrating it into ng-admin.
So in case there is no required field in list, i will not loose data i already entered by navigating to create new entity on another page.
Add two fields:
one of type referenced_list to display related entries
one virtual field with an empty label and a custom template, using a create button with prefilled default values for the related entry (e.g. <ma-create-button entity-name="comments" default-values="{ post_id: entry.values.id }" size="xs"></ma-create-button>)
Check https://github.com/marmelab/ng-admin-demo/blob/3a0944acbcb12dc20dc8a4a860c6c9f8da9c1645/js/customers/config.js#L81-L101 for an example.
I have a dropdown, on its change I need to load the contents related to it on the same page. Which I did using jQuery. Now the question is how do I make edits on this data and store it on my database. If I am wrong in using jQuery for loading my data then what else should I use? I am using PHP as my server side scripting language.
More detail -
Simply taking there a list of details I need to display as per the country you select, which I am displaying currently in a nice grid(textboxes)!
Now the data from this grid should be copied to another textbox on "EDIT" button click from where I edit them and store it in my database. I am not able to make the values copy into a another textbox
You could do this:
Display the data in some form of editable div, textarea, or other element.
Make a hidden field somewhere and when you display the data
Set the row id from your database to the hidden field
On your change event, grab the id from the hidden field along with the edited data.
Using Jquery/ajax, send that data to a php page that will save thee data to your database using the passed in id.
You could do that.
However, if it were me (and if you're not married to your current databse / mySQL etc..), I would use parse.com. The service is free up to a significant amount of usage (which Ive never come close to) and it really simplifies everything. See the below post if you're interested in that approach:
Save and retrieve user input from database with javascript?