Snippet to Show/Hide set of Column in Table

  • 2
  • Question
  • Updated 12 months ago
  • Answered
What I am attempting to do I think is simple but I do not know the functions or variable I need to alter in Javascript to make it work.
I have a table that on load display a certain set of column and there are some other col in the table but that are not display by default but you can access in the Table setting. I'd like to make a button that one clicked displays a specific set of col and hides the rest while still making them available in the Table Setting if that makes sense.
In short how do I toggle the checkbox in the Table setting via a Snippet? I feel like it should be simple, no?
Thanks for all the help I can get.
Photo of Youri Nelson

Youri Nelson

  • 186 Points 100 badge 2x thumb
  • hopeful..

Posted 2 years ago

  • 2
Photo of Youri Nelson

Youri Nelson

  • 186 Points 100 badge 2x thumb
I found the Personalization object in the page Model and I know there is an updateSettings function that can exist, I just can't figure out how to use it. Any suggestions? Also can I store my own variable in the Personalization object?
Photo of Youri Nelson

Youri Nelson

  • 186 Points 100 badge 2x thumb
I am good figured it out!
Photo of Matt Small

Matt Small

  • 1,182 Points 1k badge 2x thumb
Can you show what you did. I would love to see this =)
Photo of Youri Nelson

Youri Nelson

  • 186 Points 100 badge 2x thumb
Did that help?
Photo of Matt Small

Matt Small

  • 1,182 Points 1k badge 2x thumb
Yeah! Thanks a million =)
Photo of Youri Nelson

Youri Nelson

  • 186 Points 100 badge 2x thumb
Sure my intention was to have 2 different table layout within the same model and be able to toggle back and forth at the push of a button. Also within these 2 layouts, I wanted any modification to the table setting to be recorded in the personalization model. Feel free to ask question if my code below does not make sense:

var params = arguments[0],
	$ = skuid.$;

var parentComponentId = params.component._parentComponentId;
var parentComponent = skuid.component.getById(parentComponentId);

var ScoreFields = ["Name","LLC_BI__Account__c","LLC_BI__Amount__c","LLC_BI__Stage__c","Score1__c","Score2__c",
"Score3__c","Score4__c","Score5__c","Score6__c"]
var CurrentPersoSettings = params.component._personalizationService.getSettings();
var NewPersoSettings;

if(!CurrentPersoSettings.scoreView){
    
    console.log("SCORE VIEW: ON");
    /* 
        If we are currently not in ScoreView it updates the status 
        or creates it in the model if the personalization setting does not exist.
    */
    CurrentPersoSettings.scoreView = true;
    
    if(!CurrentPersoSettings.columnSettingsByUID){
        CurrentPersoSettings.columnSettingsByUID = params.component.element._columnSettingsByUID;
    }
    
    noScoreSettings = $.extend(true,{},CurrentPersoSettings.columnSettingsByUID);
    
    //Create the ScoreSetting Preferences if they don't exist
    if(!CurrentPersoSettings.scoreSettings){
        
        scoreSettings =  $.extend(true,{},CurrentPersoSettings.columnSettingsByUID);
        for(var guid in scoreSettings){
            //Making ScoreView Fields Visible if they belong to the list above
            if(ScoreFields.includes(scoreSettings[guid].fieldId)){
                scoreSettings[guid].userHidden = false;
            }else{
                scoreSettings[guid].userHidden = true;
            }
        }
        
    }else{
        scoreSettings =  $.extend(true,{},CurrentPersoSettings.scoreSettings);
    }
    
    NewPersoSettings = $.extend(true,{},CurrentPersoSettings);
    
    NewPersoSettings.columnSettingsByUID = scoreSettings;
    NewPersoSettings.noScoreSettings = noScoreSettings;
    
}else{
    
    console.log("SCORE VIEW: OFF");
    
    CurrentPersoSettings.scoreView = false;
    scoreSettings = $.extend(true,{},CurrentPersoSettings.columnSettingsByUID);
    noScoreSettings = $.extend(true,{},CurrentPersoSettings.noScoreSettings);
    
    NewPersoSettings =$.extend(true,{},CurrentPersoSettings);
    NewPersoSettings.columnSettingsByUID = noScoreSettings;
    NewPersoSettings.scoreSettings = scoreSettings;
    
}


params.component._personalizationService.updateSettings(NewPersoSettings);
parentComponent.render();
(Edited)
Photo of Youri Nelson

Youri Nelson

  • 186 Points 100 badge 2x thumb
If you are only interested in updating the personalization model for a table you can simply do the following: 
params.component._personalizationService.getSettings();
The line above will help you find all the current personalization setting if they exist along with the UID but if there are no personalization settings yet saved you have to go find the UID here 
params.component.element._columnSettingsByUID;
Then to update you do the following
var update = {};
update.columnSettingsByUID["UIDofColYouAreTryingToUpdate"].userHidden = true;
params.component._personalizationService.updateSettings(NewPersoSettings);
You can alter other settings by switching .userHidden for other variable. Make sure to re-render the table for the change to be displayed, I try re-rendering the table itself but to no avail, so I re-render the wrapper component the table is in and it did the trick.
(Edited)
Photo of Praveen Pannala

Praveen Pannala

  • 580 Points 500 badge 2x thumb
I am looking for a way to save the skuid charts drill down filter value into user personal settings, I mean the model condition which was filterable off.
(Edited)