[QUESTION] Dynamically changing Trait Properties

Hi, I went through the other questions posted here and could not get it to work.

All I need to do is to access a specific trait of a specific component (or selected one) and to set some of its attributes. I default the trait to display: none and when I did some server logic the trait gets a value and is displayed to the user.

I did this:

var blockManager = editor.BlockManager;
	var domComps = editor.DomComponents;
	var dType = domComps.getType('default');
	var dModel = dType.model;
	var dView = dType.view;
	
	// Add components
	loadComponents(editor, options);

	// Add navigation block
	blockManager.add('NAVIGATE_SCREEN', {
		id: 'initiateJob',
		label: 'Navigate to screen',
		content:{
			content:'<div class="my-block fa fa-paint-brush">screen name</div>',
			type:'NAVIGATE_SCREEN'
		},
	});
	
	//component traits
	domComps.addType('NAVIGATE_SCREEN', {
		model: dModel.extend({		
			defaults: Object.assign({}, dModel.prototype.defaults, {
				traits: [
					{
						type: 'screenID',
						label: 'Screen ID',
						name: 'screenID',
						attributes: {style: 'display: none'}
					},
					{
						type: 'screenName',
						label: 'Screen name',
						name: 'screenName',
						attributes: {style: 'display: none'}
					},
					{
						type: 'screenSelectorButton',
						label: 'Click to select',
						name: 'ScreenSelector'
					},		  
				], 
			}),
		}, {
		  isComponent: function(el) {
			if(el.tagName == 'INPUT'){
			  return {type: 'input'};
			}
		  },
		}),

		view: dView,
	});
	
	//extend screenSelectorButton
	editor.TraitManager.addType('screenSelectorButton', {
		events: {
			'click': 'selectScreen' , // trigger parent onclick method on click
		},
		
		selectScreen: function(){
			var flowTemplate = prompt("screen name: ");
			//implement
			//NavToHomeScreenOpenPopup(); //call the fake notify
             //implement - after selection update trait value:
		domComps.addType('NAVIGATE_SCREEN', {
		model: dModel.extend({		
			defaults: Object.assign({}, dModel.prototype.defaults, {
				traits: [
					{
						type: 'screenID',
						label: 'Screen ID',
						name: 'screenID',
						attributes: {style: 'display: none'}
					},
					{
						type: 'screenName',
						label: 'Screen name',
						name: 'screenName',
						attributes: {style: 'display: none'}
					},
					{
						type: 'screenSelectorButton',
						label: 'Click to select',
						name: 'ScreenSelector'
					},		  
				], 
			}),
		}, {
		  isComponent: function(el) {
			if(el.tagName == 'INPUT'){
			  return {type: 'input'};
			}
		  },
		}),

		view: dView,
	});
		},
		getInputEl() {
            var button = document.createElement('button');
            button.id = 'btnScreenSelector';
			button.classList.add('actionButton');
            button.appendChild(document.createTextNode('Select a screen'));
			
            return button;
		
		},
	});

//code for setting via jQuery
//get the screenName trait in the current context, change its value
var screenNameEl= document.querySelector('.gjs-trt-trait input[type=\'screenName\']');
screenNameEl && grapesjs.$(screenNameEl).val('" + OrgScreen.Name + "').trigger('change');

//get screenNameEl's gjs-trait parent and set it to display
//only changes DOM but not editor components
var screenNameElParentDiv = $('.gjs-field-screenName').parents('div[class^=\'gjs-trt-trait\']').eq(0);
screenNameElParentDiv.css('display', 'flex');

Essentially, I need to be able to access the screenName type trait and change its attributes (value, style etc.) so that it reflects in the local storage.

Thanks.