Custom Component table help - Grouping, Inline edit, check boxes, record history

App Development
1

I’ve spent the last day working with custom components and see how powerful they are. There are a few specific case where it is much better for me currently to use the custom component to make a table rather than the gui. I love the benefits this brings. There are 4 critical things I am not sure how to do though. Can anyone help?

  1. Grouping based on a value of a field.

  2. Add inline editing of fields? Is there a built in way to do this? I could see doing it through making a form, adding all fields to it, hide all fields, then just display the field that was clicked on. Use code to watch when a field is clicked on, open the form as a popup relative to the cursor position, and display the corresponding form field (with the modal size being dynamic). Is there a simpler way to do it?

  3. Adding a Record History field. I have successfully added edit, details, action, and delete links plus custom links however I cannot get Record History to work. The closest I got was below. A popup opens but says page not found.

    {{tb_link this tb-id="6" tb-value="Record History" tb-open-popup="1"}}

  4. Adding check boxes and update functionality. I have not tried much here yet. Not fully sure where to start. I found this. Is this the best method? How to add checkboxes to your table and add logic to them! - Community Discussions / Tips and Tricks - Tadabase Community

@Chem or @moe ?

2

Regarding #4 - I’m hoping there is a built way given it can be toggled on and off in gui built tables. If there is not I could see adding an additional column to the front of the table, use to add check boxes, and also add the field with the record ID to that column (must add this field to table and set value with table rule- @tim.young I like your idea about doing this to every table). Give that class=“checkbox-id”.

Now, as listed in the post I referenced, I can look for the check boxes with the value “checked” and then grab the record id via the checkbox-id class (I found it under .outerText). This gives me the array of records via their record id’s that I want to update. The part I am less certain of is the popup update page. I have had some fun with coding but I am not too proficient (yet :slight_smile:). I could see adding a form page with all fields added and hidden. Then add an HTML field and add a drop down selector via…

 ><p><label for="fields">Choose field to update:</label></p>

Add a menu to the main page in the same page row as the table. Add the form to this menu and choose open in popup. Use CSS to show just the button in the position desired. (Or use iframe modal method but I feel this is easier).

Then populate the drop down when the form page loads via…

var options = [“1”, “2”, “3”, “4”, “5”];
$(‘#fields’).empty();
$.each(options, function(i, p) {
$(‘#fields’).append($(‘<option></option>’).val(p).html(p));
});

Note if you paste this in your browser console you may have to replace the " ’ "s.

Then add javascript to run on form submittal grabbing the field to update, the new field value, and the array of records with the checkbox checked. Pass that to a custom javascript pipe (so running server side) and update the records. Thoughts?