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
Related
I have used a toggle button from react- bootstrap (https://react-bootstrap.github.io/components.html#btn-groups-checkbox-radio) in one of my form in react application. I want to get the checked value but it is always showing me undefined. Other form controls are getting easily. Please, help. Below is the code:
<Row>
<Col xs={12} sm={8} md={6}>
<FormGroup controlId="journeyType" validationState={ this.props.validation }>
<ButtonToolbar>
<ToggleButtonGroup type="radio" name="journeyType" defaultValue={"cheapest"} ref="journeyType">
<ToggleButton value={"cheapest"} bsStyle="primary">Cheapest</ToggleButton>
<ToggleButton value={"fastest"} bsStyle="primary">Fatest</ToggleButton>
</ToggleButtonGroup>
</ButtonToolbar>
<FormControl.Feedback />
</FormGroup>
</Col>
</Row>
and in my react function, I am using below:
const sortQuery = {
departure: findDOMNode(this.refs.departure).value,
arrival: findDOMNode(this.refs.arrival).value,
journeyType: findDOMNode(this.refs.journeyType).value
};
console.log(sortQuery);
this.props.handleSort(sortQuery);
In above code, departure and arrival have values from the user but the journeyType always have undefined. It is because, react-dom is rendering the ToggleButtonGroup as radio inside divs. Even if used, journeyType: findDOMNode(this.refs.journeyType.checked).value , also not working.
Hope to hear from you, all. Thanks
You can call your function in the onChange function of the ToggleButtonGroup.
If your onChange={handleChange}, then,
handleChange = (slectedButtonNumber) =>{
//slectedButtonNumber= the 'value' of the selected radio button
}
I think with radio buttons we use .checked instead of .value. So there is no need for the .value.
Try journeyType: findDOMNode(this.refs.journeyType).checked.
I've got a dialog defined for a component:
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Dialog" xtype="dialog">
<items jcr:primaryType="cq:Widget" xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<config jcr:primaryType="cq:Panel" title="FooTab">
<items jcr:primaryType="cq:WidgetCollection">
<foo jcr:primaryType="cq:Widget"
text="Foo"
xtype="button"
name="./fooButton"
handler="function(b, e){/*what am I editing?*/};"/>
</items>
</config>
</items>
</items>
</jcr:root>
How do I know which resource is being edited by this dialog? Can I get the explicit path that is implicit in the "./" used in the name parameter? Is there some way to find it from the parameters (b = the button, e = the button click event) that are being passed to the button handler? If not, how can I get it into the button handler?
The button is on an dialog, and the dialog has the path.
So the following gives you the path:
b.findParentByType("dialog").path
I have a dialog with a multifield with custom xtype. As per the requirement, I don't require the re-ordering functionality of the multifield elements. Is there a way to hide these buttons.
Dialog xml is as follows.
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
height="{Long}800"
width="{Long}1200"
xtype="dialog">
<items
jcr:primaryType="cq:Widget"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<tabs
jcr:primaryType="cq:Panel"
title="Questions & Answers">
<items jcr:primaryType="cq:WidgetCollection">
<tabs
jcr:primaryType="cq:Widget"
addItemLabel="Add a question"
fieldDescription="Note:
1. Add the questions first in a row.
2. Please select answer type before start adding the answers."
name="./questionStack"
xtype="multifield">
<fieldConfig
jcr:primaryType="nt:unstructured"
xtype="apps.nirmal.widgets.configurableQandAfield"/>
</tabs>
</items>
</tabs>
</items>
</items>
</jcr:root>
Just check the API documentation at https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html
There you see a boolean property in the Multifield configuration properties to disable ordering:
orderable : Boolean
If the list of fields should be orderable and Up/Down buttons are
rendered (defaults to true).
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.
I have 2 buttons:
<Button Name="parent">
<StackPanel>
<Button Name="a" />
<Button Name="b" />
<Button Name="c" />
<Button Name="d" />
<Button Name="e" />
</StackPanel>
</Button>
Parent is registered to PreviewMouseLeftButtonDown event.
I want that the PreviewMouseLeftButtonDown event of the parent will not happen if we click on button c (c has some other registrations). I can't check it specifically (with GetPosition or to register to MouseEnter on c and change some flag...), because the parnet is generic one, and can contain many buttons.
I've tried to register PreviewMouseLeftButtonDown in c, but e.Handled = true isn't helping me, because the parent's event occurs before the child's one.
Is there any way to do it?
Thanks
that's because PreviewMouseLeftButtonDown uses a tunneling strategy , it hits the child last and the parent first ,
it sound like you need MouseLeftButtonDown in this case which uses a bubbling strategy and apply
e.IsHandled = true
when handling it from c ,
FYI ,for this reason e.IsHandled effects only child elements of you Button .
see RoutedEvents