I have one quick action which opens up the aura lightning component. In that I have one requirement to execute some logic when the quick action is closed by "X" close button on the top right corner(not by cancel button).
I was searching so many articles most of them explained about closing the quick action by clicking the cancel button. I would like to know whether we can write some logic when quick action is closed by "X" close button or is there any way we can capture the onClick event for this close button.
I couldn't share any code snippets because I have not written any, still I am searching for solutions.
Have you seen the aura component lifecycle, especially stuff around (re)rendering the component? You could attach what you need to "unrender" call.
Put this in myComponent/myComponentRenderer.js and try?
({
unrender: function () {
this.superUnrender();
alert('You\'re closing me, I thought we were friends');
}
})
Alternatively have a look at handling aura:valueDestroy. I mean renderer should just try to clean some custom DOM stuff, free memory maybe, shouldn't run business logic. If there's a more appropriate system event - maybe play with that one?
Have you tried creating a custom event to handle this?
Reference: Lightning Aura Components Developer Guide: Create Custom Component Events
Create a custom component event using the <aura:event> tag in a .evt resource. Events can contain attributes that can be set before the event is fired and read when the event is handled.
Use type="COMPONENT" in the <aura:event> tag for a component event. For example, this c:compEvent component event has one attribute with a name of message.
1. <!--c:compEvent-->
2. <aura:event type="COMPONENT">
3. <!-- Add aura:attribute tags to define event shape.
4. One sample attribute here. -->
5. <aura:attribute name="message" type="String"/>
6. </aura:event>
7.
The component that fires an event can set the event’s data. To set the attribute values, call event.setParam() or event.setParams(). A parameter name set in the event must match the name attribute of an <aura:attribute> in the event. For example, if you fire c:compEvent, you could use:
1.
2. event.setParam("message", "event message here");
3.
The component that handles an event can retrieve the event data. To retrieve the attribute value in this event, call event.getParam("message") in the handler’s client-side controller.
Related
I am writing a wrapper for material-ui/AutoComplete.
I want it to:
set value and submit on clicking the suggestions,
set value and submit on pressing enter on the suggestions,
navigate through list by pressing arrow keys
submit on clicking a submit button next to the AutoComplete button.
I realise that I need to capture three events:
onKeyDownCapture
onKeyDown
onNewRequest
All the events are handled using the same handler.
Among these events, onNewRequest is triggered as usual but onKeyDown is triggered when I press the enter button while onKeyDownCapture captures a click.
When the value updates, the component also triggers onNewRequest automatically, leading to duplicate and expensive calls to my search service.
Is there a way to block duplicate calls for search service?
Here is the code for my component:
handler(){
// calls search service.
}
render(){
return (
<AutoComplete
...{props}
onKeyDownCapture={this.handler}
onKeyDown={this.handler}
onNewRequest={this.handler}
/>
}
I tried an ugly "newRequestDuplicatesHandler" which basically keeps track of the last search request text and prevents the duplicate requests by comparing the new search request text. However this is not a clean solution.
The original code, as shown above causes duplicate requests.
However, the newRequestDuplicatesHandler does the trick. But this is not a clean solution.
I am creating a profile screen for user in my apps . I am using lightbox from React-Native-Navigation by wix to perform an edit profile . So , the user will click the touchableopacity and a lightbox will pop up and the user will enter the new information and save it . So, im wonder is it possible if i want to pass the textinput value from lightbox to the parent(profile.js) so that i can setstate in the profile.js ?
Yes this is possible. You will need to send the data as props to the parent. If you haven't done it before it might feel a bit tricky but you'll get there.
From the parent:
<LightboxComponent
userData={this.handleUserData(data)}
/>
handleUserData(data) {
/* Do something with the data here */
}
From the child:
To send the data you need to set an onChange event or similar on the input you want to capture, like this:
<input name="user-name" onChange={ (e) => this.props.userData(e.target.value) }
This will make the input data from the child get sent to the parent. Every change will trigger a re-render of the affected components.
If your app complains about not being able to setState correctly, then you need to bind this in the parents constructor like this:
this.handleUserData = this.handleUserData.bind(this);
I would also say pass the parent's function pointer to the child as props (as seen on the React site). Although some people opt for using an event emitter. I'm actually really curious about more developers' opinions on that.
Is derailing a thread on StackOverflow grounds for epic down voting?
I have an AngularJS custom component that essentially wraps around a Material Design mdSelect, but provides easy configuration of available, default, and current values via its bindings.
But the component functions as a general editing component in an mdDialog that can change its options based upon the thing being edited. Thus is a "Next" button to go to the next "thing" to be edited. When the button is pressed the custom component will have new available, default, and current values—something like this:
<foo-component default-value="dialog.getDefaultFoo()" current-foo="dialog.currentFoo">
</foo-component>
Note that the component, if a list of available values is not given (as in the example above), the component assumes a list of values with only one value, the "default-value" indicated.
So when a user selects "Next", the list of values in the mdSelect will change, because the value returned by dialog.getDefaultFoo(). The new selected value will be dialog.currentFoo.
But if dialog.currentFoo is null, I want the control to automatically select the indicated default value, or if no default is indicated, the first available value. That's easy enough when the component is created using $onInit. But once it is created, how do I know (inside the component) that the user has selected "Next" and the list of available values has changed?
In the code for the "Next" button, I call this.fooForm.$setPristine(). According to the documentation, the when this method is called the form controller will "propagate to all the controls contained in this form." So I considered having my custom control hook detect that $setPristine() is being called, so that it can automatically select a default value from the list if the new value is null. But how now I'm back in the same situation: how does my custom component detect that $setPristine() is being called on the form?
In essence, my custom component needs to detect when one of its bound values changes, and perform some custom update of other values under certain conditions. I know that I can use a getter/settter from outside the custom component, but how does the custom component detect that one of its bound values has changed?
To make matters more complicated, dialog.currentFoo is actually a function, which my component recognizes as a getter/setter function which will return/update the correct value based upon the state of the dialog. So I can't even detect that this value has changed, because the actual function never changes—only the value that it returns will change.
And it's actually even more complicated than that, because the mdSelect is only one piece of the object that gets sent to dialog.currentFoo; otherwise it isn't propagated outside the component.
Trying to summarize, I need to know in a custom component if the binding dialog.currentFoo, which is really a getter/setter method, would now return null so that the custom component could select a default value (also dynamic) based upon the current items (also dynamic) listed in the internal mdSelect. I would accept workarounds, such as detecting that $setPristine() has been called on the enclosing form. I would even accept a hack, such as forcing AngularJS to recreate the custom component when some external state changes.
This is tricky, because AngularJS is tricky, and because it's exceedingly hard to track information on custom AngularJS control/input components.
Above all the first thing that needs to be done is to make the custom component use the normal ngModel framework; trying to "fake" it using a two-way bound currentValue doesn't cut it for this complexity, and besides, ngModel is the "correct" AngularJS way to do it. To pull this off you'll need to use NgModelController. Finding out how to do this with a component is difficult in itself, although one page gave the magic formula. It goes something like this:
require: {
ngModelCtrl: "ngModel"
},
bindings: {
ngModel: "<"
//TODO add defaultValue or whatever other properties here
},
Then you don't access the two-way value directly; you use the NgModelController interface:
//get the current value
const foo = this.ngModelCtrl.$modelValue;
//set the current value
this.ngModelCtrl.$setViewValue(foo);
As best I can tell, if you add ng-model-options="{getterSetter:true}" to the component, the ngModelOptions will automatically get applied to your model, and getters/setters will be called automatically.
Now you are hooked into the whole ngModel framework, and use NgModelController to add/access validators and all sorts of advanced features.
Getting back to my needs, where I need to "reset the component" in certain conditions, I can patch into NgModelController#$setPristine(). The form controller recognizes my component is part of the ngModel framework, and calls $setPristine() when the form is reset to its pristine state.
this.$onInit = () => {
this.ngModelCtrl.$setPristine = () => {
myInternalValue1 = null;
myInternalValue2 = this.defaultValue;
};
this.ngModelCtrl.$setPristine(); //initialize default value
};
This explains the doubt I had about the form controller "propagat[ing $setPristine()] to all the controls contained in this form", which I mentioned in my original question. The secret is that the component must become part of the real ngModel system so that it can interact as AngularJS is expecting, as well as to gain access to important internal methods.
I've got an OAuth process that pops up a window, but when I log in, the redirect to the OAuth callback page happens within the popup rather than the parent window (window.opener). This might be a bit hacky, but I'd like a way for the popup window to tell the parent "we're authorized!"
This actually works:
OAuthCallback = React.createClass({
displayName: 'OAuthCallback',
render() {
window.opener.console.log('hello parent window');
return (
<div>
Hi, OAuth is process is done.
</div>
)
}
});
But I'm wondering if there's some way I can have the popup window tell the parent window to call a prop function, e.g. this.props.oauthSucceeded().
When you are unable to establish any parent-child or sibling relationship between the components, React recommends setting up an event system.
For communication between two components that don't have a
parent-child relationship, you can set up your own global event
system. Subscribe to events in componentDidMount(), unsubscribe in
componentWillUnmount(), and call setState() when you receive an event.
Flux pattern is one of the possible ways to arrange this.
see https://facebook.github.io/react/tips/communicate-between-components.html
Have a look at window.postMessage for cross window communication (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
Eelke's suggestion was spot on.
I used window.postMessage() in the child window, then window.close(), then added a window.addEventListener('message', function(){}) in the componentDidMount method of of main/master component.
Check out https://facebook.github.io/react/tips/dom-event-listeners.html for more information!
I had a unique situation where I had to work on an iframed react popup from an asp.net application. I had to provide a x button to close the popup by calling a closePopup method in the parent asp.net in addition to other ways to close it. I used window.parent. Below is how I used it.
if (window && window.parent) {
window.parent.closePopup();
}
Which event fires after form load? My requirement is at the time of view load based on some condation some controls set to disable mode(read only)
so how to handle this (which event)
i have try this formpanel.on({ actioncomplete: function (form, action) {} but ist not fired
thanks in advance
I just struggled with this today. The important thing to keep in mind is that there is no event fired on form.loadRecord() as it is simply a setValues() wrapper. If you want an event to be fired on loadRecord(), you will need to define it yourself by extending Ext.form.Basic (and potentially adding the event to relayEvents in Ext.form.Panel).
I assume you a event after a record/data has loaded into the form. The action get handled in the basicForm and calls. Within the basicForm the load() calls doAction() so you should be able to use the following events from the basicForm
actioncomplete : ( Form this, Action
action ) Fires when an action is
completed.
actionfailed : ( Form this, Action
action ) Fires when an action fails.
beforeaction : ( Form this, Action
action ) Fires before any action is
performed. Return false to cancel the
action.
You can observe the events on an Observable using Ext.util.Observable.capture. Here is an example of observing a form, which is loaded and then submitted:
http://jsfiddle.net/el_chief/HBah5/4/
I saw these events:
fieldvaliditychange
fielderrorchange
validitychange
dirtychange
beforeaction (i hit submit)
afterlayout
actionfailed (it did not submit to anywhere)
Don't forget, BasicForm has its own events (though I believe they are all relayed to Form), as do Fields inside a form.
Changing basic.trackResetOnLoad changes some of the events too, in particular "dirtychange"