Highlighting a row from a record list after being modified

Ok guys, so lets say i have 2 webscreen called :


  • "booking" >  which contain a record list with (lets say it has 300 record) and a...
  • "booking detail" > where you can create, update, or delete a booking record


so what i want to achieve is :

  • Create or Update a booking record in "Booking detail" screen
  • After create/update a record move back to "Booking" screen
  • In the "Booking" screen load, Automatically Scroll to the row element where the record just modified on the point 2. Oh also i want the row to be highlighted too like the ajax's highlight animation one.
  • Point 3 doesn't work (just load like usual without autoscroll or highlight to specified row) on case where user just moving from "Any other" screen to "Booking screen" except from "Booking detail" to "Booking" screen or ON DELETE record action in the "booking detail" screen.


Any suggestion like using javascript or some extension are welcomed but i prefer the outsystem built in solution if possible.


Best Regards.

Hi John,

In general, I would consider this bad UX, and you can run into all sorts of problems, with pagination, filters, etc. So I would definitely advise against it. That said, if you really want it, and you have paginated table, you can play with the pagination actions to assure you at least show the right page (though it's far from trivial, as you need to locate your record, calculate the page it's on, etc.). The highlight is probably something you need to do with JavaScript, though perhaps some tricks with an Ajax refresh might work, but I wouldn't want to have to program it :).

Kilian Hekhuis wrote:

Hi John,

In general, I would consider this bad UX, and you can run into all sorts of problems, with pagination, filters, etc. So I would definitely advise against it. That said, if you really want it, and you have paginated table, you can play with the pagination actions to assure you at least show the right page (though it's far from trivial, as you need to locate your record, calculate the page it's on, etc.). The highlight is probably something you need to do with JavaScript, though perhaps some tricks with an Ajax refresh might work, but I wouldn't want to have to program it :).

hmm i sad to know this is a bad UX example (thanks for the advice !), but the main purpose is to let the user know where the modified/created record is located in the corresponding list (which the list is in another page) right after he/she press the "Save" button WITHOUT any further input from the user (Yes, it's like the web telling the user "hey this is the record that u just manipulate" right after the manipulation happen). but i think to achieve this purpose, there must be many ways aside from proposed idea above. and maybe can u help me find the other solution then ?

Best regards sir.


As an alternative you could have in your booking screen an extra small List Record widget that shows the last 10 updated records, with a link to it. This is an easy aggregate with Max Records 10 and a filter on an attribute like UpdatedAt datetimestamp sorted descending.

Kinda simular link the most recent links you have in service center.

Daniël Kuhlmann wrote:

As an alternative you could have in your booking screen an extra small List Record widget that shows the last 10 updated records, with a link to it. This is an easy aggregate with Max Records 10 and a filter on an attribute like UpdatedAt datetimestamp sorted descending.

Kinda simular link the most recent links you have in service center.

Noted !, ill make the latest record modified instead of 10 record by using this way. Thanks a lot sir.

but i'll wait (lets say 2 days from this post ?) for other solution (and pick which one be the best to be marked as solution !)

EDIT : after i think again, this is more like an "Activity Log Features" Right ?, i just feel like this is not what i want to achieve (only my intuition dont mind it haha) but yeah, at least i have some option to do now (once again, i still note this ! and looking for another fancy solution !)

Best Regard !


Hi PY!

Daniel's idea is a better one in terms of UI/UX.

But if you really want to highlight an updated record in a table, you can do it with an extended style class.
First, create a boolean attribute on the entity like "wasUpdated" that becomes true whenever you create or update the record.
After that, in the records list, go to each cell in the row and add the style in the extended properties, something like:

if (list.current.record.wasUpdated, "color: yellow", "")

This way, when the table is rendered, it will color every record that has that attribute true.

PS: Don't forget that you need some other action to put the attribute to False after. You can use for example a timer.


Hope it helps!
Regards

Tiago Rodrigues wrote:

Hi PY!

Daniel's idea is a better one in terms of UI/UX.

But if you really want to highlight an updated record in a table, you can do it with an extended style class.
First, create a boolean attribute on the entity like "wasUpdated" that becomes true whenever you create or update the record.
After that, in the records list, go to each cell in the row and add the style in the extended properties, something like:

if (list.current.record.wasUpdated, "color: yellow", "")

This way, when the table is rendered, it will color every record that has that attribute true.

PS: Don't forget that you need some other action to put the attribute to False after. You can use for example a timer.


Hope it helps!
Regards


Another Good Idea, Noted !, never thought such this way before (eventho i never using extended properties and timer on my previous work, still newbie haha but with some googling i know this is possible to do !) thanks anyway!

Best Regards.

Ah of course another opinions are still welcomed !

Solution

Hi PY,

If you can manage to show your booking form in popup instead of new screen then it will be even simpler for you. 

1. Upon edit link click in table record, popup will upon

2. When update button is clicked, you can close the popup and send the id of the updated record to parent screen

3. On parent screen save the updated record id in a local variable.

4. Parent screen will also do that ajax refresh on aggrigate & table (it will not go back to page no1, same page will pe selected)

5. On table row set style in the extanded property if current record id is equal to id stored in local variable then only apply specific style.


Solution

Nikhil Gaur wrote:

Hi PY,

If you can manage to show your booking form in popup instead of new screen then it will be even simpler for you. 

1. Upon edit link click in table record, popup will upon

2. When update button is clicked, you can close the popup and send the id of the updated record to parent screen

3. On parent screen save the updated record id in a local variable.

4. Parent screen will also do that ajax refresh on aggrigate & table (it will not go back to page no1, same page will pe selected)

5. On table row set style in the extanded property if current record id is equal to id stored in local variable then only apply specific style.


Nice one ! combined with other idea i think this is the most suitable one. but i think since the row that has been recolored wont go back to the original color and also i need to put something like focus on the corresponding row. but i think i can get over with this issue by a little bit googling, thanks anyway !