Data Table vs View vs Repeater

Hi,

I’m looking for some advice please. Part of my app is a quote function, where I need to select a number of pre-existing line items and add them to customer quotes as required. I have explored Data Tables, Data Grid (Marketplace) and Views, but none of them do a good enough job of displaying and processing the data for my purpose. The main issues with the Data Tables and Data Grid are the layouts, especially column headings, column widths, data alignment, and the need to display related data from another table. I need to be able to set and display the data in a user-friendly way, but I haven’t found any solutions that work well enough for me to implement. Views resolve some of the issues, but are read-only - a game killer, as I need to be able to select and edit the Line Items when required. My other thought is to go down the Repeater path, where I have much more control on the layout and record selection, but my fear (based on ignorance) is that there will be a performance/cost hit with repeated requests to the database when loading up the page. There are approximately 60 Line Items available for a quote, so the initial page load needs to have all 60 displayed for the user to select from. Typically, the users would select between 10-30 of those for most average quotes. I have read as many of the topics with possible solutions that I could find, but none of them have been able to satisfactorily address the issues. The answer(s) may be in coding, and although I understand how and why, my hands-on experience is very limited, so I would need some guidance if the resolutions are down that path. I’m open to all suggestions, so please let me know if you have any advice for me.

Cheers,
Rob

Am I understanding the initial conditions correctly?

  1. Each user has its own list of quotes;
  2. Each quote is related to a set of items;
  3. There is pre-existing set of available (possible) items for each quote the user choose from;
  4. The list of quotes can be retrieved using some request conditions (so this list changes over time);
  5. The user should have a possibility to choose a quote from a provided (requestd) list;
  6. The user should have a possibility to choose items for the chosen quote;

Hi Oleg,

Yes, you’re pretty close. Basically we have a number of sites where we do many construction projects, and at each of these sites our supervisors (the users) raise quotes for upcoming project work. We have a standard list of items that might typically be included in our quotes, and depending on the particular project, these items may or may not be selected for that particular quote. Here’s a mock up using a view to show what I mean:

I need to be able to select multiple lines and add them to a quote record, so I can total them, add some more detail, and send the quote to the customer. The view above shows the items satisfactorily, but I can’t select them. If I try using a table or grid, I can select multiple records and add them to the quote, but I can’t label, align or format the columns correctly, or include related data from another table. I think I can do all this using repeater functionality, but I’m concerned that it might have a high overhead cost in performance and/or database requests. Does this help make sense of my question?

Cheers,
Rob

Hi Rob,

I wrote an article recently about our Grouping API. I think it may help you with the scenario you described. Please take a look (and give it a try) - How to use the grouping API and to render groups in UI Builder

Let us know if it this provides a suitable solution.

Regards,
Mark

Thanks Mark,

The article was of some assistance, and I implemented my grouping following your guide, however it didn’t address some of my (important) cosmetic issues. I’ve spent a few days trying a number of options with tables but couldn’t get anything near satisfactory for the output display, so I went with a single line repeating row. This works fine and almost looks how I want it to, and it also doesn’t seem to have a high overhead of requests to the server (I could be totally wrong), but I have one main issue that is still holding me back. I can’t see any way of changing the size of a checkbox, and this is causing a lot of wasted space in my display. Here is a screenshot of my output display:

and here is the UI Builder screen:
image

As you can see, the checkbox is taking up much more screen real estate than the row of data, causing large white gaps between each row. There is no padding or margin set, and I can’t see any other properties I can set, nor have I been able to find any other way of customising the checkbox. Is there a way I can reduce the size of the checkbox (not necessarily the box itself, just the surrounding frame)?

Also, in your Demo the arrow icon changes from pointing down to right when clicked to display the group, but I can’t find any logic for how that works. I’ve copied your steps and my icon works correctly when clicked, but stays the same (pointing down). How does yours achieve that effect?

Cheers,

Rob

Hello @Rob_Dawson!

To reduce the area occupied by the Checkbox, you can apply styles to decrease or remove the padding.
This can be done as follows:


Regarding the arrow icon, it should work right after creating a page from the template (as shown in the guide).
However, if it doesn’t work or you’ve created the page not from a template, here is the logic used for the animation:

Regards,
Alexander

Thank you Alexander, this has worked perfectly for me!

The icon logic was in my installed demo, but I missed it despite looking over and over. I think a case of “the harder you look, the less you see”!! :slightly_smiling_face:

Cheers,
Rob

1 Like