43
Views
2
Comments
How to create side by side comparison UI
Application Type
Reactive

Hi,

I have a requirement like 

1. Current request

2. List of matching requests and showed in reactive web table with checkbox to select request.

let assume matching table has 10 records and user selected 3 out of 10.

now I want to show side by side comparison of attributes of selected records with current

              Current    Req1.  Req2.  Req3

Name    John.        Mike.   Ruth.   Jude

Age.       30.            30.        35.       27

Country  USA.        UK.      USA.     UAE

How we can build this kind of UI using reactive table or list control to create dynamically. Also provide data structure. Please anyone help me on this.

Thanks,

Arul


UserImage.jpg
Puja Rani

Hi,

May be you can take a look at these forge components and see if you can get some ideas. 

  • https://www.outsystems.com/forge/component-overview/9001/side-by-side-list
  • https://www.outsystems.com/forge/component-overview/11332/two-side-multi-select
UserImage.jpg
vikas sharma
Champion

Hi

First of all there is no widget using we can achieve it directly. Whenever new request comes in just use params of this request and use as filters to get the list of similar requests. Once done we are showing table on screen user can select request from checkbox.

Now if want to show side by side then main challenge is dynamic number of request added for comparison. If you cam make slight change in UI and show req1,req2 in first column instead of row header then it will become simple table. If not possible then if number of row is fixed which user can have for comparison then you can create predefined number of columns already. Let's say created 10 columns for 10 request. Now if user add 4 request in comparison then only data will be in 4 columns rest will be blank. Otherwise Guess need to create some logic with web blocks.

Regards 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.