Highlight row in table if id matches id in URL

  • 1
  • Question
  • Updated 3 years ago
  • Answered
My users have asked for a way to quickly jump to different Accounts without going back to a tab.  I created a button that shows up on every account detail page that when clicked shows a pop-up with a quick list of all the accounts in a table.  I would like to do two things and wondered if they were possible.
1. I wanted to highlight the table row that matches the URL id of the client detail page they were already on so they can quickly see their place in the alphabetical list.  A lot of users go down the list one by one and update certain information.  This would allow them to always see their place in the list.  Can someone help me with the snippet and css to be able to say if Row ID === URL id then highlight row green etc.?

2.  A useful tool that we had in an old database was a button that would automatically load the next client in Alphabetical order when the button was clicked.  Could this be done with model conditions somehow?  For instance a Model that sorts by alphabetical order but that only brings in 1 record. For instance, if I could make a condition that start on the current ID and brings in the next ID/Name sorted alphabetically I could isolate the next Account.  That would bring in one record id for the next Account in alphabetical order.  I could then have a button that redirects to a URL using the one ID that was brought in.  Is it possible to create a condition like that?

In a perfect world I would have three buttons:
Button one is a back button/icon that goes back one account.
Button Two is the Pop Up Button that brings up the list (this is already working)
Button three would be a forward button/icon that jumps to the next account.

Thank you for your thoughts!  I appreciate this community.
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Rich,

You can definitely accomplish #2 with some javascript. There may be a better way, but this is my first thought:

Load a model on your page with all of your data in alphabetical order. Load a second model with a filterable condition on Id (leave it blank), that only pulls one record.

With inline javascript you can use
 skuid.utils.merge('global','{{$Model.MYMODEL.data.' + X + '.Id}}');
 where MYMODEL is the model with all your data and X is a variable you've set for the index of your rows in alphabetical order (the first row is 0). That will give you the Id of the row, which you can load into your condition on the second model and query it.

Then you just need to set your previous/next buttons to add or subtract 1 from the value of X.
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb
Matt thank you for taking the time to reply.  In my head it seems like I need to do the following:
1. Create a Model called AccountList and make sure it is in Alphabetical order.
2. Put a button on the page that "Runs a Skuid JavaScript Snippet"
3. When the button is clicked the snippet does the following:
   a. Hey Account Detail Model what is your id (row 0).  Response (Answer: 18 digit ID mathching URL ID)
   b. Hey AccountList Model which row matches this 18 Digit ID. (Answer: Row 30)
   c.  Hey AccountList Model 30+1 = 31.  What is the ID of row 31?  (Answer: New 18 digit number)
   d.  Hey webpage "Redirect to URL" https://salesforce.com/{{New 18 digit number}}

Would this method work.  I apologize for my coding slang.  I am obviously no coder.  Hopefully, you professional coders look at my naivete with a smile.  My brain gets it, I just need to learn the language.
(Edited)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Rich,

That method would work. Nice job. I'm by no means a professional coder either! Just learning on the fly.

I'm not sure I totally understand the reason for the url redirect, though? Perhaps it's just the way your page is set up? Why redirect to a url instead of a popup or something like that to view your detail page? Or a queue with a page include for details?

It seems like you could accomplish the same thing without realoading the entire page:

1. Create a Model called AccountList and make sure it is in Alphabetical order.
2. Create a Model called AccountSelected which has only one row, does not load on pageload, and has a condition on the Id field that is filterable default off and left blank initially.
3. Put a button on the page that "Runs a Skuid JavaScript Snippet"
4. When the button is clicked the snippet does the following:
   a. Hey AccountSelected Model what is your id (row 0). (If the answer is, "the model is empty", then assume the current record is row 0 of the AccountsList Model).  Response (Answer: 18 digit ID mathching URL ID).
   b. Hey AccountList Model which row matches this 18 Digit ID. (Answer: Row 30)
   c.  Hey AccountList Model 30+1 = 31.  What is the ID of row 31?  (Answer: New 18 digit number)
   d. Hey AccountSelected Model, the new value for your condition is The new 18 digit number from step 4c
  e. Hey AccountSelected Model, requery.

A method like that would save you a bunch of time -- you just have to load a model instead of reloading an entire page.

All that said, the method you outlined will work, so if that's how you want it, go for it! 
(Edited)
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb
Thanks for your help Matt. My detail page includes a large amount of related data, tabs, calendars etc. so it would not display well as a popup. I build all the tabs with page includes to keep the load speeds quick, the tabs aren't loaded until you click on the tab you need.

I did try building the page with a Queue on the left side. It mostly worked but ran into two issues. 1. Since the queue is not collapsible it ate screen real estate. 2. My main page was loading but the page include tabs weren't loading any data in. My guess was since the page URL did not include the ID they were failing to load. I could have reworked all the pages but I didn't want to redo them all. If the queue was collapsible I would definitely put the work in to use that method.

My end users often have to update a single field in one of the many tabs during the month. So they like to be able to march down a list. A button that automatically loads the next client and returns to whatever tab they were on seems to be the best marriage of full screen access and ability to update whatever tab they need to. If I always knew what fields people needed to update I could build a special tool, but since I don't this seems to be the best method.

Your first example likely would have worked. I tried it, but I got lost on some of the steps and was not able to follow. Which is why I rewrote it in a method I could follow. It was more me not understanding than me suggesting a better method. I started some JavaScript course so hopefully that will fill in some of my knowledge gaps.

In the meantime I did create a button that creates a popup with a page include that is simply a list of accounts. When they click the account it loads the page. This doesn't have an additional speed hit since it is a page include and gets me 60% there.

Thanks for your feedback!
(Edited)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Rich, sounds like you have a great solution. Nice work!