[Table Column Toggle] Sporadic issue with column toggle losing setting

Forge Component
(0)
Published on 2018-12-30 by Justin Babel
0 votes
Published on 2018-12-30 by Justin Babel

We have implemented this widget and it works fairly well.   We are saving the column settings in a session variable along with writing the value to an extended user table.   However occasionally when we browse to the page that contains the table all of the columns are hidden.  We have been unable to determine what causes this or how to recreate, it seems entirely random.   Any ideas?

Hi Josh Herron,

We are saving the column settings in a session variable :  Can you please explain more what you will be doing with settings variable ? is the component running based this settings ?


Sravan

Sure, basically we are using the session variable as the DefaultColumnValues.   When the preparation for the page runs we do a lookup to see if our User_X table has had a variable saved for the table.  If so it populates the session variable with that value.  If there is no value in that table we assume it is the users first time viewing the table so all columns are being displayed.  


What we are seeing is that occasionally when navigating to the table all of the columns are de-selected so nothing is displayed on the table.   The user has to click the column button to re-select all of the columns and then everything is fine.   Below is a screenshot of the TableColumnToggle settings we have, and the preparation and update actions.



Hi Josh,

Are you able to debug and see what the JSON value is being passed into the widget when you see this behavior? I know you mentioned it is random so it might be harder to hit this point, but it might help us identify what might be happening.

From my understanding, the widget is acting as if all the 'IsVisible' parameters being passed in are set to false, but only randomly, but then you are able to bring up the modal, and set the checkbox, and the columns are then rendered on the screen?

I am wondering if something is causing the JSON value to sometimes always be set to 'IsVisible' = false for all the values, or if it is a loading problem that happens randomly. If there is a way for you to confirm if it is a problem with the JSON value, or if the JSON value looks correct being passed to the widgets but then the columns aren't rendered, this would be a huge help in trying to identify what might be the problem.

Let me know if you are able to debug to get this information.

Thanks,

Justin

Also, to just to verify, on your page, do you have the web block for the component after the table that it is being initialized on?

I figured out how to recreate the issue.   The table that we are using the toggle widget on is not displayed if there is no data present.     We placed the table in a container and then have this view property on that container.


not CaseTable.List.Empty

When the page loads the toggle widget is run.  When the table has no data the session variable JSON looks good, it contains all of the proper true/false settings.  When I step into the toggle widget during debugging the TableColumnValues input shows all of the columns defaulted to false.    (but the Session variable still looks accurate once we are inside the widget as well)   I have attached a screenshot below.

I have a step in that screen action that takes the TableColumnValues and appends that to the session variable.  (so when the user changes the columns to display it will persist during the session)  So at that point the incorrect JSON with all false entries overwrites the correct one.

Justin Babel wrote:

Also, to just to verify, on your page, do you have the web block for the component after the table that it is being initialized on?


Yes, I had it directly after the table.  Then just as a sanity check i moved it all the way to the footer so it's the very last thing on the page.   Also, as a follow up to the previous post the hide/show works fine when the table is displayed and data is preset.   It only defaults to all false if the table is not displayed because no data is available.

Gotcha, makes sense now. I would wrap the widget in the same condition that determines if your table is displayed or not to avoid this behavior, as if the component is initialized on a table that isn't available in the DOM, this behavior will happen.

I can look into potentially building this into the component to not notify back if it doesn't detect the table, but for now, just put the component web block in the same conditional statement (not table.empty).

Let me know if you have any other questions.

Thanks,

Justin

Unfortunately placing the widget in a container with the same display condition did not correct the behavior.   Even though the table/widget isn't being displayed the javascript for the widget still runs each time the page loads.   So when the table isn't populated the TableColumnValues defaults to all null which then updates the session variable and the database entry on the User_X table.


 I'm trying to think of a work around for this, I think I could set a flag that gets set if the table data is not present and then in the screen action for the widget I could skip the step that writes to the DB and updates session variable.  In theory I think this should work, but I'll have to work on it a bit tomorrow and see if it functions as I expect.

Solution

Hi Josh,

Putting the div with the same display condition will not work as you said because the javascript will still run. You will need to put the widget in an If statement with the condition so the widget isn’t rendered at all and the javascript isn’t ran.

Hope it helps.

Solution

Thank you sir!  This works perfectly.