Data from form changes

UI Builder
1

I have a “Data Table” component that feeds a selected record to a form in a Modal popup. The “Data Table” is fed by a View. I am using the data binding technique on each Input component of form. The data displays properly in the form but when I update the data, the updates are not captured. I have dumped all Page Data and Form Data, but the data changes are not visible in either. Changes show on the screen but only original data shows in FormData.

Screenshot 2024-02-28 222824
Screenshot 2024-02-28 2228241541×996 67.4 KB

Why would the changes not be captured?

2

Hello @Richard_Munger ,
Thank you for your request,
We will need a little time to analyze and I will soon get back to you with an answer.
Regards,
Sergey

3

@Richard_Munger
Could you provide your App ID and page name for a detailed analysis of the problem?

Regards,
Sergey

4

app id = DEC6B808-645B-7B62-FF97-8D7C3B617700
page = client_profile

6

Thanks for waiting,
we analyzed your application, as indicated in the screenshot, you connect, do “binding” formData and selectedRecord and in this case you cannot overwrite formData using binding from the form.
I suggest creating the same object in pageData and writing data into it using the OnChange handler in each form field.

image
image1920×952 137 KB

Regards,
Sergey

7

I had already tried using the OnChange events.
image
image

I had tried setting the changes in FormData and also in the selectedRecord of PageData. When I try with FormData, the modified field is mysteriously no longer registered with FormData. When I use the selectedRecord of PageData, the field displays cursor positioning issues as the system dynamically updates the field within selectedRecord.

image
image688×569 20.1 KB

8

Hi, @Richard_Munger

Unfortunately, Views does not support real-time refresh, so even after updating data in the database, the Data Table component does not change.
To fix this, you can try using the action Reload Data for Data Table after updating the database.

Screenshot from 2024-03-01 11-50-34

Please let us know if this does not help you.

Regards,
Serhiy

9

I think you are confused. I am not talking about Views or Real-Time-Refresh.

You had suggested 1) using On-Change events and 2) creating a secondary field within PageData to contain the selectedRecord. I replied by telling you that I had already tried using the On-Change events and also tried having the events update various data areas. In all cases, the On-Change events DO capture the changes made to the on-screen but the use of the On-Change events also cause data entry issues as the manual screen updates begin to interfere with the background On-Change event update to the data field that supplies the value to the on-screen input field.

In short, do not use On-Change event as it creates more issues than it resolves…for this situation.

10

Any updates to this problem?
To recap: My application screen displays data in a data-table component. On-Record-Select event displays a modal popup containing a form with the selected data. Any manual modifications to this data cause the entire data field to be removed from PageData when I was expecting the data field changes being captured.
I have 3 pages using this technique. I need to know if this can be resolved or if I need to design a different solution.

11

Hi @Richard_Munger

It sounds like a bug, but I guess it could be an issue in your logic.
Since there are lots of X, could you please provide a test page with minimum logic (one data-table and a modal with one input) to check this behaviour

Regards,
Vlad

12

App-ID = DEC6B808-645B-7B62-FF97-8D7C3B617700
Test Page = client_test_page

You will notice that the On-Change events are active for the input fields. When entering the data changes into the fields, the user must be very careful to check the updates as the data binding update is interfering with the On-Change event. When the On-Change event is not present, the updates do not appear in page data.

13

Hello @Richard_Munger

Unfortunately, the page that you provide contains a lot of your business logic, and we can’t just dive into it because it could take a lot of time. If you want to get help, please do as my colleague ask you

provide a test page with minimum logic (one data-table and a modal with one input)

Regards, Dima.

14

Ok, I have the same page but have removed the logic that was filling the logic screen.
The current state of this test page: The Input field On-Change events are in place. This causes the manual input of data into these fields to conflict with the binding update from the on-change event.

The cmpname input field has the On-Change event removed. When you test data changes to this field, the data from the screen is not present.

15

the test page still has many elements and logic and let’s summarise steps to reproduce and expected result

Steps to reproduce (STR):

  • you have a table with data view
  • when click on a row you open a modal with form to edit the record
  • once you change any data you press the save changes button

Expected result (EXR)

  • you want to send these changes to the server
  • you want to update data in the data table

Actual result (ACR):

  • ???

please correct STR and EXR if I miss something and please provide ACR

16

the logic you refer to feeds the data to the data grid and to the modal. Those are not the problem (or do not seem to be). The issues show in the logic for the Form’s on-submit event and in the Form’s input field on-change events.

17

Richard,

Player the message from Vladimir above.

  1. Are the “steps to reproduce” and “expected result” correct?
  2. What is the actual result?

Mark

18

Print statements are already in place to display the data going into the form fields and the data condition after the manual update and submit of the form.
The steps to reproduce are:

  1. run the page
  2. Open a debug console window.
  3. choose/select a data line from the data grid
  4. Modal populates. Modal input fields have on-change events except CMPNAME field so you can see the with/without event scenarios.
  5. enter data/make a change into the CMPNAME field and into some other field (not the dropdown)
  6. Take note of the on-screen behavior for CMPNAME. It reacts as it should to the manual data entry.
  7. Take note of the on-screen behavior for the other field you chose. The data entry is interrupted by the on-change event.
  8. Now click SAVE CHANGES button to perform the submit.
  9. Examine the console window. You will see the data before the submit and then after the submit. Examine the contents of the fields in the console and you will see that there is no capture of the data without the on-change events. And with the on-change events, quality of data becomes a problem.
19

please pay attention you run API requests on each render phase which might lead to bad performance.

2024-03-13 15-22-45
2024-03-13 15-22-452693×1550 338 KB

20

I run a single file API request to populate the data grid. The modal is populated from Page Data. I then use one file API to save the data back to the database only if the user clicks on SAVE. What other API would be in play in this scenario?

21

do you mean where these requests come from?