bulk select widget looses its selection in other pages..

bulk select widget looses its selection in other pages..

  

Hi


I have a table records fed by a SQL block. I also have checkboxes for each line in the table records, and a bulk select widget from the RICH WIDGETS in the header of the table along with the titles of columns. 

I have set the following webblock arguments:

  • AssociatedLinkIds: the widget ID of the check box
  • TableRecordsId: the widget ID of the Table Records fed by SQL block.


It works fine the selection of all lines of the table records, HOWEVER, if I go to click in the another page (page 2, or 4 or whatever) the bulk select looses its selection, the tick disappears... how can we fix this? 

Check below: 

the bulk select widget selected in the first time works fine:


if I go to the second page or another one in the table records the bulk select widget looses its selection...


Hello Jorge,

This is the current behavior of this widget.
The only way is to keep a local list of the current selected elements and process the source list of the table to update the selected field every time user changes page.

Cheers

ok. 

Nevertheless, the bulk select ONLY selects the actual page if I bind the check box with the BOOLEAN attribute of the output structure of the SQL (mind you the table records is fed by SQL). I had at first time this check box bound to a local variable, in this case all the values of all pages were selected. Shouldn't  the bulk select widget select all the check boxes of all pages in the case the check box is bind to the boolean attribute of the output structure from SQL??

Apparently it should select all the values.

Solution

As I said, the workaround is to use a local list to store the checked records (the Id should be enough). 

Every time you select or deselect something, you update this local list. 

And probably, the most efficient way if you are using bulk select, is to clone it and do a notify when you check/uncheck it, so you can update your local list in this event.

As for pagination, the data fetch from database is only the required for the current page, and this is the reason the selection values are lost.

Cheers


Solution

ok. I'll need help here. I will explain every step what I've done with screenshots as well.

1st case - case when the user clicks in some of the check boxes in the actual page of the table records. 

2nd case - case when the user clicks on the BULK SELECT to select ALL check boxes even those not visible for the user (for usability reasons, bulk select was designed to select only the visible check boxes which makes sense, nevertheless there is a requirement to select also the hidden checkboxes)

for the 1st case (which have some similarities to the next 2nd case):

             1 - I have created a structure with only one attribute: Id.  (to collect all ids chosen from the table)

             2 - I have created a local variable with data type of LIST of the structure created in 1 (our local list).

             3 - we need to set in the output structure of the SQL block (mind you the table records is fed by SQL) a new attribute called BOOLEAN.

             4 - in the SQL block i wrote select 0, (other attributes) as we do not have entities with this attribute (neither we do need need the boolean attribute in those entities)

           5 - in the check box (not talking here about the bulk select) I have assigned the VARIABLE argument the boolean of the output structure of the SQL block (see 3)

           6 - In the check box I have assigned the ON CHANGE Destination argument with an action OnColumnSelection (the name of the action and depicted in the next pic ). 

          7 - in that action OnColumnSelection I put the logic to calculate the number of Ids (because there will be above the table records a combo box with 4 actions, after we have chosen action it will enable a button called SUBMIT so t he user when click in the button it will open a pop up, and we need to send to the pop up all the ids chosen);  and logic to remove or append to the LOCAL VARIABLE (list of the structure with only id as attribute - local list to save the ids added) the ids.  (check below the action). It is not the best way  because it will run for all the hidden check boxes (but an user can choose in the page 10 for example...). I hope i did not forget anything in this action... (edit: it is necessary to put a refresh SQL block to get the update booleans, after the FOR EACH loop... I have removed the previous List Remove and put before the for each ListClear)

1st approach image


  2nd approach image                 


          8 - now I need to use JSON serialize to  serialize the local list. I have never used json serialize... documentation only has a table. I know that data argument will be the local variable (the one that has the list structure type with only the id as attribute). But this JSON serialize will need to be put in (where)...?  (first question). I have tried to put in the parameter input in the popup but to no avail. I have also created a text parameter in the popup webscreen but it is the same problem. it cannot be put directly. how to overcome this? I have put the JSON serialize in the above action (before the end but it is not depicted in the image). 


EDIT: I think I have managed to use the first part of JSON (serialize, not yet for the deserialized). I have put the JSON serialized in the action depicted above after the FOR EACH . i HAVE created a local variable of text type. Then I made an assignment ofd this local variable to the output of JSON serialized. then in the pop up webscreen I set the input parameter to receive the previous local variable. I suppose this is the right way to do... I think this first question is sorted out... kinda.... right? :)


after this we need to pass those ids to a popup after we click in the button sUBMIT (after choosing the option of the combo box):


There is a slightproblem with the accountsnumber: if we do not change the action in the combobox... it will not update the accountsnumber in input parameter of the popup webscreen... if we deselect or select the checkboxes, but it should rerun the on change action and give the correct number! it is not updating what I found odd as in the webscreen where is calculated tsuch value is correct and the link provides this value.. )


                        9 - i will need to deserialize it in the pop up, and it has two arguments JSON string and data type.  I do not know how to assign these and in which place it must be put. How to do it? (second question).

 EDIT: The json string would be the input parameter of the popup webscreen that has the json string....and what about the data type? I have tried text but it has not that option?... 

EDIT2: I have tried with the same structure as I have used in the serialize, have created a new one with a different name but the same attribute Id.


Is there a way to count the number of ids with the JSON deserialize? (third question). if so, the accountsnumber local variable (and then passed to the pop up) will be unnecessary...


And I think for the 1st case after the questions are clarified, we're done. :) 


2nd case -  it is clear we need to have another on change for the BULK SELECT, but there is no way how to do it. there is no ON CHANGE in the parameters. I did not understand why to clone the bulk select... (i suppose one bulk select must be hidden with the display:none;  ).  That must be why you referred the use onnotify as there is no on change in the bulk select... 

                 

The 4 steps are the same as the 1st case. 

                     5 - in the bulk select I have put a link to an action and I called it OnNotify,

                     6- first part of the action after declaring accounsnumber as 0, I pick up the current boolean, and if it is true than it will run ALL results of SQL block in the table records (because there is a search filter and we can have different sizes for this table), and append each ID to the list (all the ids  in this case), then the in the  assign widget it is  assigned the boolean as true. 

                   7 - if the current boolean is false, it will set all booleans as false, and it will clear out the list.

 

Here i have the same problem with serialization/deserialization like the 1st case. The question is: why to clone the bulk select and how to proceed from it? Thanks. 



NOTE: in the on change action for the check box, if it delays a bit more to choose one another checkbox this will not be taken into account... how to prevent this? i have selected two check boxes, and only the first has appeared in the local list. (ah... i was using the debugger to see if everything is fine). However if the user is fast to click the checkbox and open the pop up after choosing the option of the combo it may result in lost of data (?)... 

Thanks for your attention! 


short version: 

i) i have still problems with the deserialization - it gives this error:

Failed to deserialize JSON to AccountsManagementPopUp:
Cannot deserialize the current JSON array (e.g. [1,2,3]) into type 'ssGAE.RestRecords.JSONST******' because the type requires a JSON object (e.g. {"name":"value"}) to deserialize correctly.

how to solve it?

ii) the accountnumbers local variable is not updated if i tick one check box without having change anyhting in the combo box. odd.  (see above)

iii) how to force the bulk select to run another action and prevent to run the on change CHECK BOX ?



i and ii) were solved.

Problems still for iii) . Can u help me in this part? Thanks. 

Jorge Almeida wrote:

i and ii) were solved.

Problems still for iii) . Can u help me in this part? Thanks. 

Hello Jorge,

I see two possible solutions heree.

1. Clone the BulkSelect widget and change it to do what you want. (I already did that once).
2. Use JavaScript to bind to the BulkSelect check box and prevent it from executing the base action (using JavaScript).

I would really opt for the first... Gives a little more trouble, but the code would be much more clearer and easy to maintain.

Cheers.


thanks, Eduardo.

for 1) I understand that we need to copy the bulk select widget, then hiding this cloned bulk select from the user with display:none;  And then? I suppose we need to connect the original bulk select to the hidden bulk select through its id in associatedlinksId?...  Now maybe (?) we need to get a way to connect this hidden bulk select to the action I have created. I have tried with the link in this hidden bulk select but it activates the on change action bind to the check boxes. (but this on change action must be mute...) and do not run the action I would like to.  I am stuck here. 

 The action to select all check boxes (even  the hidden check boxes)  is almost ready ( this action is shown above - last image), but need to test it first. 


for 2) unfortunately I do not know enough js. Nevertheless, I like that option because it is very important to keep ways easier to maintain the app. 


many thanks once again. :) Cheers. 

Hi Jorge.

No. What I suggest was:

Clone the Bulk Select Widget to create a NEW widget that do what you want. This way, you can inspect the code and do the changes to it so that it executes a Notify (OnChange), for example, and this way you know if it changed its previous state.

Than you use the NEW bulk select only.

There is no point in using a hidden bulk select and an original one...

Cheers.

ok. got the idea behind... but dunno how to do it.besides I cannot open the rich widget bulk select. It is blocked here. I know it would clone it, but then I'd have trouble to edit it. Is there a doc explaining how to proceed?

and he is in holidays. :)

No. Basically, you click to open, it says it can't and asks if you ant to clone. Now you have access to it. Go look the web block that is this widget, and copy it and everything it needs to your project, and than change the code to do what you want.

Any other thing will involve lots of complex Javascript, probably.

This way, you can make almost all the changes to be done under OutSystems (notifies, run server actions, etc).

Cheers

the problem is the same... code is in js which I do not feel comfortable (for now). but i ll try to figure out the part of the code that refers to the choice of the check boxes (all of them , hidden too) and to prevent the on change action bind to the check box, and enabling the run of another action (instead of on change that should be only disabled when someone ticks the new bulk select). Thanks. 

Hi Jorge,

I think want you want to do do not require changes to the JavaScript code.
If I remember well, there is an OnChange in the Checkbox of the rich widget, no?
If so, just set a Notify to alert the user that it was clicked, and the actual value (true or false), and in the OnNotify you do your magic :)

Cheers

to be clear:

1 - bulk select should be able to select also all the hidden check boxes at once;

2 - at first time, I thought that when an user clicks in the bulk select it should prevent the on change to be run, as this is bind to the check box, and if it is ticked it will run the on change action (preventing I see requires js script)

"If I remember well, there is an OnChange in the Checkbox of the rich widget, no?" 

The check box I have used was this one: https://success.outsystems.com/Documentation/10/Reference/Web_Interfaces/Designing_Screens/Check_Box_Widget

The action on change is only for the case when the user clicks on check boxes. It should not be run with the bulk select. (but the way it is working now it is running the on change.. it cannot happen!)


You told before :"and than change the code to do what you want." and now no need to do changes in js code... 

So, you say that  I only need to set a notify action in the bulk select clone and then in the app using this new bulk select I can now use the on notify action. Thanks again for your attention, Eduardo. 

Cheers.

Hello,
This is what i do:

- Your source of your widget is a variable (datatype the same as your aggregate)

- Your table has no navigation. You set max height with overflow-y:scroll; (a lot of people like this)

- Make sure you set the max records right.

- On the onchange of your checkbox set an action

- The action does the following : 

1.Listclear the var
2. ListAppendAll from your widget to your var.
3. Done :)

Hi


All my tables have that scroll. I am not using aggregates... but sql that feeds the table records... Thanks.

I ll also try the check box approach instead of using bulk select. Nevertheless i ll want to learn about the Eduardo's approach. 

well, I discarded the bulk select widget. I do not know how to do it (but I'd like to see a modified bulk select widget and how to do it). 

So, I have used another approach and it worked perfectly.  I have used ANOTHER check box to behave as a Bulk select. Now when an user clicks on it (in the disguised "check box" as a bulk select) it ticks all the check boxes even the hidden. aLSO to prevent the ticks to disappear whenever changes the page 

"As for pagination, the data fetch from database is only the required for the current page, and this is the reason the selection values are lost."   I have discarded off the refresh sql in the refresh action. 

Json deserialization and deserialization are working welll too. Many thanks to Eduardo and Niels. 

Maybe I will make a doc how to disguise a check box to be a bulk select wdget. 

Hello Jorge :)

I don't remember (I did one component based on this some time ago), but I am almost sure the Bulk Selection is built around a Check Box... :)

Cheers.