Add product to table, shopping cart style.

Hi Gareth,

The following is an answer to the first part of your question. The second part is doable as well but we’ll answer it separately.

Here is a link to the XML for the Opportunity Detail page included in our Skuid for CRM starter pack, which has a “Shopping Cart” view for picking Products to add as Line Items.

OpportunityDetail.xml

And here is the tutorial for how to copy/paste page XML into a Skuid Page.

Just go to the “Line Items” tab once you’ve got your page up and running and have Previewed it, then click “Add Products” in the Line Items table, once you’ve picked a Pricebook for your Opportunity.

Here’s what it looks like:

Hi Zach, thanks for the speedy reply!

I have that installed and working, looks really good.

First question, i seem to be seeing items from multiple price books when i go to add items, is that correct?

Thanks

Gareth

Have you selected a Pricebook already for the Opportunity before you go to add Items?

Hi Zach, ignore me someone had modified the price book in Sandbox with some more items which I wasn’t expecting. You mentioned you also had a solution for drag and drop sorting of line items? Thanks Gareth

Hi Gareth,

We can give you an example of making a Skuid Table’s items drag/drop sortable, but this can’t be used to affect the “SortOrder” field on Salesforce’s OpportunityLineItem object because this field is not editable unless you use Salesforce’s native Line Item sorting interface. So unless you have a custom Sort Order field on the OpportunityLineItem object in your org, we won’t be able to help you much here. Here is one of several IdeaExchange ideas posted more than 5 years ago asking Salesforce to make this field Sortable:

Idea: OpportunityLineItem SortOrder to be Creatable/Updatable

If you DID have a custom Sort Order field, here’s how you would do it:

1. Give your Line Items Table a Unique Id – go to the table’s Advanced properties and enter “LineItemsTable” for the “Unique Id” property.
2. Drag a “Custom” Component into your page, to be located just below your Line Items table. Set “Component Type” to MakeLineItemsTableSortable
3. Go to JavaScript Resources and create a new JavaScript Resource of type Inline (Component) named MakeLineItemsTableSortable. Its Resource Body should be the following, only replace “Sort_Order__c” with whatever your custom Sort Order field is called:

<br>var LINE_ITEMS_TABLE_ID = 'LineItemsTable';<br>var SORT_ORDER_FIELD_ID = 'Sort_Order__c';<br>var element = arguments[0],<br>&nbsp; &nbsp;$ = skuid.$;<br>setTimeout(function(){<br>&nbsp; &nbsp; // Find our LineItemsTable<br>&nbsp; &nbsp; var T = $('#'+LINE_ITEMS_TABLE_ID),<br>&nbsp; &nbsp; &nbsp; &nbsp; TBody = T.find('tbody'),<br>&nbsp; &nbsp; &nbsp; &nbsp; list = T.data('object').list,<br>&nbsp; &nbsp; &nbsp; &nbsp; model = list.model;<br>&nbsp; &nbsp;&nbsp;<br>&nbsp; &nbsp; // Return a helper with preserved width of cells<br>&nbsp; &nbsp; var fixHelper = function(e, ui) {<br>&nbsp; &nbsp; &nbsp; &nbsp; ui.children().each(function() {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).width($(this).width());<br>&nbsp; &nbsp; &nbsp; &nbsp; });<br>&nbsp; &nbsp; &nbsp; &nbsp; return ui;<br>&nbsp; &nbsp; };<br>&nbsp; &nbsp;&nbsp;<br>&nbsp; &nbsp; TBody.sortable({<br>&nbsp; &nbsp; &nbsp; &nbsp; helper: fixHelper,<br>&nbsp; &nbsp; &nbsp; &nbsp; // Run as soon as the user stops sorting<br>&nbsp; &nbsp; &nbsp; &nbsp; stop: function(event,ui){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Loop over the tr rows in the table body,<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // and update the corresponding data rows' SortOrder<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var updates = {},<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items = [];<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TBody.children('tr').each(function(){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var tr = $(this),<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item = tr.data('object'),<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; row = item.row,<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; updateObj = {};<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; updateObj[SORT_ORDER_FIELD_ID]=tr.index()+1;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; updates[row.Id]=updateObj;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items.push(item);<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; model.updateRows(updates);<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Now reorder the rows in our Model based on Sort Order<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; model.data.sort(function(a,b){return a[SORT_ORDER_FIELD_ID]-b[SORT_ORDER_FIELD_ID]});<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each(items,function(){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$.each(this.fields,function(){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (this.id===SORT_ORDER_FIELD_ID)this.render(); &nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });<br>&nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; }).disableSelection();<br>&nbsp; &nbsp;&nbsp;<br>},1000);

<br>