If you’re stuck on a problem, please include screenshots or a short video showing:
What you’re trying to achieve
I am building against an API that returns a JSON object (let’s call it a ‘deal’). Each ‘deal’ can contain a list of line items. I want to build a form that will allow me to display the project details as well as the project’s line items. This is supposed to be an edit form that allows editing the information before sending it back to the backend for an update.
How things are set up
I have a landing screen that shows a list of the ‘deal’ objects from the API. I used a grid to display the top deal level attributes in the grid. The grid has an onrowclicked workflow that sets an app variable to the selected row and navigates to the deal detail form. The project details page has two sections. One shows the high level deal details such as name, value etc and then there is a repeating container that is linked to the line item details from the deal.
The form correctly displays the values. But I have a few things to ask:
Is it the correct approach?
The repeating form element has a date attribute that I have linked to a date picker. The date picker seems to be readonly for some reason and also does not show a calendar icon to tell the user this is a date field
I have noticed that when I change any value on the line item details repeating item panel, a new variable is added by the front end to the JSON data structure instead of using the same attribute that it is bound to. E.g. the Coupon Frequency field is linked to ‘PaymentFrequency’ in the JSON but when I change it in preview, a new attribute ‘couponFrequency’ is added. I cannot figure out why this is so?
The steps to reproduce the issue
As noted above, I will like to allow the user to edit the selected object, including the nested structures, on a details form and retain the same structure as when I bind the variables to the UI elements. Will then need to push this back to the API using POST but that will work when the data binding is correct.
What you’ve already tried
Documentation is light on this. And although I am more comfortable with JS code than low-code, I will not like to use JS coding to forcefully write each attribute to its correct attribute.
Thanks for your response. I will see if I can influence the API results as initially I wanted to put up a frontend quickly using the existing structure of the API.
Can you elaborate on the issues I am facing?
The repeating form element has a date attribute that I have linked to a date picker. The date picker seems to be readonly for some reason and also does not show a calendar icon to tell the user this is a date field
I have noticed that when I change any value on the line item details repeating item panel, a new variable is added by the front end to the JSON data structure instead of using the same attribute that it is bound to. E.g. the Coupon Frequency field is linked to ‘PaymentFrequency’ in the JSON but when I change it in preview, a new attribute ‘couponFrequency’ is added. I cannot figure out why this is so?
I fixed that by removing some incorrect code generated by AI. Thanks.
But I do still have the date issue that I need help with. I am at my wits end as to how to link date attribute in my data variable to a date picker. The date picker remains disabled. I have also tried using the Date and Time Picker but that does not allow changing the value (clicking a different date does not work and the date remains stuck at the value).
not sure I understood your setup right, but tried to recreate something similar with repeated items and it worked. Is on the video the behavior you want to achieve?
When you change the date picker value for the first time its UI doesn’t respond, because nothing is bound to date picker inside my JSON (initially there’s no date object). If you prepare proper JSON it will work without this flaw.
It is somewhat similar though I am not using a row. I have a collapsing panel that needs to repeat for each row. This is because I want to display the details in-line without further navigation and allow editing of those details.
try to use “date and time picker”, because I checked a simple “date” element and it’s really read only. It can only be changed by changing a bound variable.
I’m not sure if this is a bug or normal behavior. But if it’s normal then it’s not a date picker, it’s date viewer @DanielL , can you please clarify this issue?
Thanks for checking this out. I had tried using the date and time picker as well but that does not let the user change the date either. The calendar does show up but when I select a date, the value does not change. Also, the date time picker does not format the date as set (it shows the time component from the JSON attribute).
I know the formatting can be set forcefully using JS but ideally this should be taken care of by the date and time picker. Regardless, there is still no way to change the date using the picker.
The placeholder inside the datepicker is bound to the item.data.value (I assumed this item is referring to the picker itself rather than the current row item being worked on)
But the underlying data does not change. I have tried to set a workflow to do it but it will still not work. I guess I am not using the correct script at the correct level.
Thanks for taking the time to do this. My setup now is pretty much the same (workflow using the event.value) but I think the key difference is my data attribute being inside an array. I am using a partial update to only update the current item’s StartDate property as can be seen from the below data structure and the workflow configuration:
I have narrowed the issue down to the partial update. When I set the partial update formula, it creates a new variable in the current list item with the attribute name set to the outcome of the Path formula.
I have tried to use something fancy like this JS but it also just brings back the runtime value of StartDate and uses that as a new attribute at the top level JSON.
