I have a selection box in my component's dialog, with four options:
off
default
addon
overwrite
In the dialog, I want dynamically set the defaultValue property to 'off' or 'default' based on whether the URL path contains a certain characters or not. Is this possible?
Here is the dialog.xml snippet with my attempted listener to do this:
<extra_meta_description_tag_mode
jcr:primaryType="cq:Widget"
defaultValue=""
fieldLabel="SEO Description Usage"
name="./extraMetaDescriptionTagMode"
type="select"
xtype="selection">
<listeners
jcr:primaryType="nt:unstructured"
defaultValue="function(url) {
url.contain("en_gb/news") ? return "default" : return "off";
}"/>
<options jcr:primaryType="cq:WidgetCollection">
<off
jcr:primaryType="nt:unstructured"
text="Off"
value="off"/>
<default
jcr:primaryType="nt:unstructured"
text="Append pre-set text"
value="default"/>
<addon
jcr:primaryType="nt:unstructured"
text="Append input text"
value="addon"/>
<over_write
jcr:primaryType="nt:unstructured"
text="Overwrite"
value="overwrite"/>
</options>
</extra_meta_description_tag_mode>
The listener can only have values of events, defaultValue is not one. You can use the loadContent event,which is fired when the dialog loads. CQ.WCM.getPagePath() will give the current page path:
<listeners
jcr:primaryType="nt:unstructured"
loadcontent="function(selection,record,path) {
var currentPath = CQ.WCM.getPagePath();
if(currentPath.indexOf('en_gb/news')!=-1)
{
selection.setValue('default');
} else {
selection.setValue('off');
}"/>
This will reset the value every time the dialog loads, so you will have add conditions to prevent it if the users have overridden the default value.
You could also give your component a itemId property with the value: "extra_meta_description_tag_mode", then write an ExtJS plugin and register it for xtype: "selection" and in the init method of your plugin, set the defaultValue property depending on the current page path.
Related
I want to change default value of TextField when state change but it doesn't work. I guess it is doesn't re-render.
<TextField
multiline={true}
rows={15}
disabled
id="outlined-basic" label="" variant="outlined"
defaultValue={!isEn?data.data[0].description:data.data[0].descriptionLocalization.en}
/>
<Button style={{position:"absolute",right:"20px",bottom:"5px"}} onClick={changeStateIsEn}>Save</Button>}
Default value is not meant to be changed with state.
You should set the value for reflecting the default value
<TextField
multiline
rows={15}
disabled
id="outlined-basic"
label=""
variant="outlined"
defaultValue="Something that will stay there initially only"
value={!isEn ? data.data[0].description : data.data[0].descriptionLocalization.en}
/>
There are two parts missing to your TextField component that is required to tie the input to state.
As user Mohammad Fasial said, the defaultValue prop is only for the default value the component will have. The correct prop you're looking for is value. State will need to equal value.
To listen for changes when the user inputs new information into the TextField input, you'll need to use the onChange prop. The onChange prop (on change listener) let's you provide a function as an argument to run when the input value changes. In this case we want to set onChange to run setExampleState to set the state to the value of the input field by using the event.target.value property.
function ExampleComponent(){
const [exampleState, setExampleState] = useState([]);
...
return (
<>
<TextField
multiline={true}
rows={15}
disabled
id="outlined-basic" label="" variant="outlined"
defaultValue={!isEn?data.data[0].description:data.data[0].descriptionLocalization.en}
value={exampleState}
onChange={(event) => setExampleState(event.target.value)}
/>
<Button style={{position:"absolute",right:"20px",bottom:"5px"}} onClick={changeStateIsEn}>Save</Button>
</>
);
}
To learn more about the different properties TextField has, you can look at the TextField API Documentation. There are also a lot of TextField code examples that can be expanded on the Material-UI site as well.
Update the key of Element or Container after Default value Change
I have issue with date picker implementation. I am using this date picker:
https://www.npmjs.com/package/react-mobile-datepicker
I am also using redux-form.
Could someone check my code and give me some tips what might be wrong.
It is doing nothing. No error, nothing is happening.
import { Field } from 'redux-form';
import DatePicker from 'react-mobile-datepicker';
renderDatePicker = () => <DatePicker dateConfig={dateConfig} showCaption={true} />
<Field
name="date"
type="date"
component={this.renderDatePicker}
label={"date"}
/>
You have to manage the attribute isOpen in <DatePicker>, which has the control over the display of the component.
If isOpen is true, it is visible else it's invisible.
So in <DatePicker> manage the attribute isOpen by maintaining state and further like,
<DatePicker isOpen={this.state.isOpen} dateConfig={dateConfig} showCaption={true} />
I would like to compose a custom RadioGroup element as seen in this example. Ideally I'd like to have an Avatar as a sibling to the radio element of the control pro. Im stumbling on this JS warning or at least understanding the root of why inputRef cant spread to this element.
React does not recognize the inputRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase inputref instead. If you accidentally passed it from a parent component, remove it from the DOM element.
As you can see in the example the custom control prop breaks the RadioGroup functionality making it multi-select. Is this custom Radio component possible?
`<Field name="bestFramework" component={RadioGroup}>
<FormControlLabel
control={
<span>
<Radio value="react" />
<Avatar
alt="react"
src="https://image.flaticon.com/icons/svg/53/53058.svg"
/>
</span>
}
label="React"
value="react"
/>
<Radio value="angular" label="Angular" />
<Radio value="ember" label="Ember" />
</Field>`
I am trying to use the DateTimePicker component from react-widgets
Is it possible to disable keyboard input (and copy pasting) for the DateTimePicker input field and only constrain dropdown selection.
The disable API disables everything, including the dropdown selection menu. My intent is to constraint which values the user is allowed to select, and I can only do it from the dropdown menu.
Try this:
<DateTimePicker
inputProps={{
component: props => <input {...props} readOnly />
}}
/>
There's an active issue in react-widgets
repo to allow to set readOnly for just the input, which would accomplish this task more elegantly.
I solved it by handling onChangeRaw that listens for changes on the input and setting the current field value to empty string.
<DatePicker
value={this.state.startDate}
onChangeRaw={event =>
this.setState({startDate: ''})}
onChange={value =>
this.setState({startDate: value})}
/>
I have the following code in my CQ dialog.xml
<toolbar
jcr:primaryType="cq:Widget"
xtype="toolbar">
<items
jcr:primaryType="cq:WidgetCollection">
<input
jcr:primaryType="cq:Widget"
xtype="textfield"
name="./myInput">
</input>
<button
jcr:primaryType="cq:Widget"
xtype="button"
name="./myButton"
text="Submit" handler ="function() {passMyInput()};">
</button>
</items>
I have implemented the function passMyInput() as follow:
passMyInput(){ alert("test");}
This works fine. My question is how to pass the value of ./myInput to the function passMyInput ?
I have tried handler ="function() passMyInput('./myInput')};" but it doesn't work
The button's handler function receves 2 arguments, button b and eventObject e.
We can obtain the container dialog through the button and then use the getField() method to obtain the value of the field.
The modified hander function would be
function(b, e) {
var dlg = b.findParentByType('dialog');
var val = dlg.getField('./myInput').getValue();
passMyInput(val);
}
For more info, refer widget docs