Django and React - Models for adding multiple data fields - Material UI - reactjs

I am using Django for my backend and react for my frontend to build a web application that calculates cost based on the total volume (calculated using dimensions lwh) of some boxes. In order to do that, I created a form using React and Material UI in which there is an ADD MORE button to add the dimensions of multiple additional boxes. Below image showing part of the form.
Although I managed to create a model in case there is only one box and store the values in the database, I don't know how this will work when I use the ADD MORE button. How can I create my Django model to store the dimensions and volume for each additional box of the form?
I checked several other threads and found out about Formsets but I don't know how to apply it in my case.
Thanks in advance for your help :)

Related

How to display data in the bootstrap table so that it is reasonable with rowSpan?

Currently, I'm coding Reactjs and using bootstrap's table. And I have a list of data as follows.
Can anyone help stop it from showing up like the photo by mapping the list above?

Create a from builder using Django

I am fairly new to programming and start my career with Python Django. I already build some basic application and recently came across to use google forms and decided to create application like this.
Where any user can come to certain page and can able to create his own form as per his requirement.
I though of some new features like drag and drop. I wanted to ask if that's somehow possible to drag drop input fields or something like that using Django template system where I can use some simple JS library or if its possible using React as fronted.
So my requirements are quite simple, but I am confused with Django models that what will be the structure of models.
UI should be drag n drop thing. User can select the list of fields available in the inventory. And create his own form.
And on post submission. From django you need to capture and store the data.
Here in this case the data will be the form fields as well as its values.
Ex form fields which are available in the inventory.
Test field
Email Field
Multi select field and
Drop Down Field=
I hope someone can help me so that I can get started and came up with some methodology.

How do I submit two forms from a single page in adf?

I am using ADF to build the front end and Toplink for DB transactions. I wanted to show 2 create forms on a single jspx page. Both the forms are from two different objects i.e it doesn't have a parent child relationship. How can I submit the values of both the forms to the backend when the user clicks on the single submit button using ADF?
Any tutorials or examples would be appreciated.
Thanks
ADF doesn’t work the way you think it does: each page is a single form.
You may, however use two distinct af:panelFormLayout components that look as two different forms from UI perspective. But an af:button button will submit the the entire page as a single form.
Check some examples of ADF pages. You will see that the structure goes like: <af:document><af:view><af:form> ... any other components .
You need to overwrite the button method to call the two methods you want it to execute.
Here are the basics of how to overwrite a declarative button:
https://blogs.oracle.com/shay/doing-two-declarative-operations-with-one-button

How to use autocomplete box using angular js with bulky Data?

i want to implement a auto complete text box ,I am new to angular.js ,From sources i got to know that in angular.js first we have to load whole data from database then search begins on that data.In my project i have to run search over 50000 records(database) hence its impossible to load 50000 thousand because of performance issue.
Is it possible to change data for search according to value typed in text box while searching ?
What you are lookin for is Typehead. It is very easy to implement in Angular using Bootstrap UI.
Typehead in Bootstrap UI

searching for a tool/solution that allows angular to show forms and form elements dynamically based on metadata

the forms in my app display themself based on metadata.
In design mode the user should be able to change the form (metadata) by dragging all form elements (text, input ...) somewhere in the browsers window. I want to save the new metadata to display the changed form.
I wonder, if there is allready any solution or a tool.
Thanks in advance
Chris
Check this link - http://ngmodules.org/ which contains a detailed list of plugins developed for angularjs. I have found many useful plugins here.

Resources