Getting type select to set value based on jcr property | Community
Skip to main content
K
ki_hu
October 16, 2015
Solved

Getting type select to set value based on jcr property

  • October 16, 2015
  • 5 replies
  • 1239 views

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());
  }

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by smacdonald2008

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.   

5 replies

K
ki_huAuthor
October 16, 2015

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
smacdonald2008
Level 10
October 16, 2015

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
smacdonald2008Accepted solution
Level 10
October 16, 2015

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.   

K
ki_huAuthor
October 16, 2015

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

K
ki_huAuthor
October 16, 2015

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

Terms & ConditionsAccessibility statement

Loading footer...