Getting type select to set value based on jcr property

[ki_hu]

Im creating a custom xtype and Im running into an issue where I cant seem to pull the jcr property and set the default value to the jcr property value each time the page refreshes. 

So for example, if I set the defaultValue to Option A and the user select Option B, Option B will be set as the default but once the user refreshes the page, the defaultValue returns to Option A and not Option B. Is there a way where I can set the defaultValue to Option B or in other words to what the user selects? 

 this.optionsField = new CQ.form.Selection({
      type:'select',
      hideLabel: true,
      defaultValue: 'p',
      value: 'p',
      fieldDescription: 'Select header tags in semantic order. If no header tag is needed indicate “p”',
      options : [
        {
          value: 'p',
          text: 'p'
        },
        {
          value: 'h1',
          text: 'h1'
        },
        {
          value: 'h2',
          text: 'h2'
        }

      ],
      listeners: {
        selectionchanged: {
          scope: this,
          fn: this.updateHidden
        }
      }

    });
    this.add(this.optionsField);
  },

  setValue: function (value) {
    this.setValue(this.getValue());

    this.optionsField.setValue(this.getValue());
    this.hiddenField.setValue(this.getValue());
    
  },

  //calls CustomCTAField#getRawValue
  getValue: function () {
    //console.log("CustomCTAField#getValue");
    return this.getRawValue();
  },

  //this gets the value of each of the following fields
  //then puts them into a JSON object which we use later.
  //a good example of usage is seen in CustomCTAField#setValue
  getRawValue: function () {
 
    return this.optionsField.getValue()
  },

   updateHidden: function () {
    //alert(this.getValue());
   // this.hiddenField.setValue(this.getValue());
    this.setValue(this.getValue());
  }

[ki_hu]

Yes, but in my case, when the user reloads the page and click on the component to open up the dialog; the value of the jcr property is not being set in the optionField object. In our case, I am setting the hiddenField to what the jcr property value but how can I get the optionsField to set the value of the jcr property? 

[smacdonald2008]

When working at the custom xtype level -- you can set values of fields using event handlers and JavaScript. We have a community article that demonstrates how to dynamically set the value of a field from another field. See:

http://helpx.adobe.com/experience-manager/using/dynamically-updating-aem-custom-xtype.html

[smacdonald2008 · Accepted solution]

WHen the page refreshes-- the values revert back to the default. However - you can code around this. Like most use cases - CQ allows for a code solution. 

In this case -- you can persist the values in a JCR node prop. For example -- when the component dialog with the custom xtype opens - method foo()  (an example user-defined method name) is fired that reads the JCR node and gets the value. When the user selects the value, method foo2()  updates the JCR node. You then refresh the page. Method foo() is fired again- gets the updated value and sets the field with the user modfied value. That way -- the new value appears. 

Hope this helps.   

[ki_hu]

But what if I take out the defaultValue and Value properties? Shouldnt the selection revert to the users choice?

[ki_hu]

Makes sense, is there a method example where I can access the jcr property in JS?