Table Component: Dynamic Row Sorting Options

  • 3
  • Question
  • Updated 3 years ago
I have a table of bid line items that together make up a bid form. I have a custom field called Sort__c [(Number 18,0)], that is in-line editable which I use to order records by (ascending) in the model. Today, user's must manually type in the sort order. Whenever a new row is added via in-line record creation, ideally, I'd like the Sort to be set to whatever sort # is for the last row +1.

A couple questions:
  1. Is it possible to have newly inserted rows to appear at the bottom of the table instead of at the top?
  2. How can I get the value for Sort__c to be set to the next sequential number in the table for new records?
  3. If I want users to be able to re-order line items in the table without having to manually edit the Sort for each line item in the table, is there a way to enable drag a drop to move line items around in the table and have sort update accordingly (i.e. Can the drag & drop JS functions for queues be extended to table components in any way?) Or, is it possible to have 2 row actions (one labeled "Move Up"; one labeled "Move Down") that when clicked, move the row up or down 1, and update the sort for all the line items in the table accordingly on the fly? 
Photo of Trey Alexander

Trey Alexander

  • 222 Points 100 badge 2x thumb

Posted 3 years ago

  • 3
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Q. How can I get the value for Sort__c to be set to the next sequential number in the table for new records?

A. Several options: Apex Trigger, Auto Launch Flow, Workflow (use Roll-up on Parent + 1)
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,260 Points 5k badge 2x thumb
Hi Trey~

For #1: 

It is absolutely possible to insert new rows at the bottom of the table instead of at the top of a table using the action framework.

For the table in question, uncheck the box that says “Allow Inline Record Creation” because this automatically adds the row at the top of the table.



Next, create a new row action for your table.


Finally, click on the Action tab for the table action properties associated with your table. Choose the Create New Row(s) as the action type and End of Model Data for Place Row. This is what it should look like but for your specific model.


For #2: Let me add to what Irvin said. Here is one way of doing it. 

Create a number field called Sort Order on the child object, bid list. 



Create a Roll Up Summary field called Sort Order
 on the parent object, bid form, that counts the number of bid list related records.



In the Salesforce setup menu, navigate to Process Builder under Build --> Create --> Workflow and Approvals --> Process builder to automate the numbering of the bid list records when the bid list records are saved. 



You will want this process builder to fire when a new bid line record gets created so have the Bid List object be the starting object. Click Save.



Since you want this to run whenever a bid list is create, choose No critieria - just execute the actions. Click Save.



For the action, do the following. Name your action something descriptive like “update sort order on bid list”. Choose to update a record, selecting the bid list record that started this process builder. Again, select no criteria - just update the records. You want to use a formula to update the sort order field using the sort order field created in step a on the bid form +1. Click Save



At the top right corner of the screen, activate the process and then run a few test bid list records and see what happens.  Somewhere on your Skuid page, you will want to notate that both sort order fields get automatically updated when the bid list record gets saved. Note: The sort order on the bid list record can also be manually changed but that may confuse the roll up summary to the parent bid form record.


For #3: this is not possible currently. 

Hope this helps!
Karen
Photo of Trey Alexander

Trey Alexander

  • 222 Points 100 badge 2x thumb
Karen, thank you so much. Looks like #2 requires Banzai. We're still on Superbank in my instance, since we've got some customizations that break with Banzai, but we're slowly making the transition. Table actions properties and the host of other new features look very promising. :)
(Edited)
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,260 Points 5k badge 2x thumb
Trey~

What I explained above for #2 is actually utilizing standard Salesforce functionality and has nothing to do with Skuid. The table actions for #1 is all Skuid though ... 

Thanks!
Karen
Photo of Trey Alexander

Trey Alexander

  • 222 Points 100 badge 2x thumb
Sorry, meant #1. :)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
I think you can do the row actions for #3, to move up or down, but you'll need some javascript.
The row action would add or subtract 1 to the value of Sort__c on the row,
then find the other row where Sort__c is the new value and subract or add 1, then save the model (which should re-render the table and sort them properly... but if it doesn't, you could manually render the table component again with javascript, too).
Photo of Sharon Anoop

Sharon Anoop

  • 232 Points 100 badge 2x thumb
Matt we tried to do something similar to what you've suggested but we got stuck. We were able to interchange the Sort__c value however we are unable to sort the values before saving the model changes. Currently we are saving the model changes and updating the model which is causing the rows to be sorted properly. Is there some way to sort them before saving the model? Cause updating the model takes to the starting page even if the user tries to sort in any other page(pagination). Thanks in advance. 
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
You could try to re-render the table directly before saving, but I don't know if it will work.
skuid.$C('MyTableUniqueId').render();
Photo of Sharon Anoop

Sharon Anoop

  • 232 Points 100 badge 2x thumb
Matt we tried using "skuid.$C('MyTableUniqueId').render();". But it didn't work.
Photo of Trey Alexander

Trey Alexander

  • 222 Points 100 badge 2x thumb
Thanks all for the detailed responses. This is really great. :)