I have a custom lwc component, with a new button. I am using NavigationMixin to leverage the standard new record creation form on pressing the New button on the custom component. Is there a way where I can control the actions to be performed after I click save on the standard form.
Here is sample code used to navigate to the New record creation form. I want to control the actions to be performed after I click save.
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: this.items.relatedObjectApiName,
actionName: "new"
},
state: {
nooverride: '1',
defaultFieldValues: this.items.relatedFieldApiName+"="+this.recordId,
recordTypeId: recTypeId
}
});
Related
I have a button(Material-UI) in my ReactJs application. Now, the scenario is when a user clicks(too many times thou!) and call an API to insert my form data there are multiple clicks triggering which tends to insert twice, thrice or n times(depends on user clicks).
So, I basically want a proper way to accept a single click(despite of user clicking a button n times).
Can anyone suggest me a proper way of doing it.
Note: I have tried out disabling and enbaling of button on click, as well as setTimeout to call API only on single click, but it does not work. Still on production I am having issues.
So I want a proper way for implementing single click on button (let user click multiple times the button)
Set a state variable on button click and disable the button based on the variable. So that the user will not be able to click again. And also, you can enable the button on API response.
example:
[disableButton, setDisableButton] = useState(false);
const submitFunction = () => {
setDisableButton(true);
apiCall().then(resp => {
setDisableButton(false) // enable button on api success response
// code on success response
})
.catch((error) => {
setDisableButton(false)
});
}
<button onClick={() => submitFunction()} disabled={disableButton}>Submit</button>
My page has a search form and table with a paginator. So I have two states: searchCondition and pagination. I need to query the channelList when the page component is mounted.
When the user clicks the paginator, the pagination state will be changed so that a new channelList query will be made. That's ok.
The search form includes two input form items and a "Query" button. The channelList query also can be triggered by the user click event.
But now, when the user types something in the input form item. The channelList query is made immediately when the searchCondition state changed. That's not expected. I want this query triggered when the user clicks the "Query" button.
I read the doc Dependent Queries, there is an enabled option, but don't think it can solve my issue.
Currently:
Send the query on the component mount. - done!
Made a new query when pagination state changed - done!
User types something in the input form item(this will cause the searchCondition state changed) and clicks the "Query" button, then made a new query - undone.
When sending the channelList query, I will make the API parameters by merging searchCondition and pagination states.
const { searchCondition, setSearchCondition } = useSearchCondition(initialSearchCondition);
const { pagination, setPagination } = usePagination();
const channelListQuery = useQuery(
['channelList', pagination, searchCondition],
async () => {
const getChannelListParams = omitFalsyFields({
currentPage: pagination.current,
pageSize: pagination.pageSize,
...searchCondition,
});
const { code, result } = await apis.channel.getChannelList(getChannelListParams);
if (code === '0') {
return result;
}
},
{ initialData: { totalItem: 0, resultList: [] }, refetchOnWindowFocus: false, keepPreviousData: true },
);
But now, when the user types something in the input form item. The channelList query is made immediately when the searchCondition state changed. That's not expected. I want this query triggered when the user clicks the "Query" button.
What you need for this to happen is to have two state. One inside the form so that users can type (this can also be an uncontrolled form), and another one that you set when the user clicks the "Query" button.
That second state is what your query should "listen to" - by being part of the query key. Pseudo code:
function App() {
const [search, setSearch] = useState()
const { data } = useQuery(['channelList', search], () => getChannelList(search), { enabled: !!search }
<SearchFrom onSubmit={setSearch} />
}
by making sure to only call setSearch when the user clicks the Query button, you make sure that the query doesn't fire on every click.
A good place to store "applied searches" is also the url: When the user clicks the button, you write to the url, and the query subscribes to that.
This also makes your urls sharable, which is nice.
I have a short example on that here:
https://codesandbox.io/s/react-query-url-filtering-h0ikw?file=/src/App.tsx
The filter form itself is uncontrolled - but it doesn't really matter how you solve it, it's "internal" to the filter form. The "global" client state lives in the url.
When the user clicks this camera icon the get a snapshot of the page in a modal. If they click repeatedly it will make multiple snapshots before the modal has loaded and essentially blocked the camera icon.
Is there a way that I can say if a snapshot modal has just been created do not create another one?
events: {
'click .snapshot-camera' : 'clickCamera'
}
clickCamera: (event) ->
event.preventDefault()
#snapshot = new ******.Models.Snapshot({ user_id: ******.State.get('signInUser').id })
You can use underscore's debounce method which prevents double submissions.
// prevent double-click
$('button.my-button').on('click', _.debounce(function() {
console.log('clicked');
/* .. code to handle form submition .. */
}, 500, true);
Have a look into the below article
http://jules.boussekeyt.org/2012/backbonejs-tips-tricks.html
I'm using the .NET Google Mirror API library for all of this.
I start by inserting a new timeline item which includes the built-in Delete menu item plus a custom menu item:
TimelineItem item = new TimelineItem() {
Text = "Test Item",
Notification = new NotificationConfig() { Level = "DEFAULT" },
MenuItems = new List<MenuItem>() {
new MenuItem() { Action = "DELETE" },
new MenuItem() {
Action = "CUSTOM",
Id = "report",
Values = new List<MenuValue>() { DisplayName = "Report" }
}
}
}
I'm also subscribed to timeline notifications, with no Operation specified (so it should receive all operations). When I select the 'Report' menu item on my Glass, my subscription does not receive a notification. When I select the 'Delete' menu item on my Glass, my subscription gets a notification for the DELETE, which also includes both the Delete and the Report actions in the UserActions field.
Is there something special I need to do to receive notifications for the custom menu item?
If you are getting built-in menu events such as DELETE, but you are not getting Custom menu events, then your only problem should be handling custom events, not getting them.
To test it;
Be sure that you are adding custom menu item to your timelineItem(as
you shared your code, I see that you are adding it)
Subscribe to timeline updates(you wrote that you've subscribed and got DELETE menu event)
Add Payload attribute to your custom menu item.
At your notifyCallback servlet, handle that Payload value.
This is a JAVA code for handling built-in and custom notifications, I guess you can write similar code with .NET. Logic is same:
Adding custom menu item:
List<MenuValue> menuValues = new ArrayList<MenuValue>();
menuValues.add(new MenuValue().setDisplayName("Test it!"));
menuItemList.add(new MenuItem().setValues(menuValues).setId("MY_CUSTOM_MENU_ITEM_ID").setAction("CUSTOM").setPayload("MY_CUSTOM_MENU_ITEM"));
timelineItem.setMenuItems(menuItemList);
Handling custom menu item:
// notificationString comes from inputStream of Mirror API's notify request.
Notification notification = jsonFactory.fromString(notificationString, Notification.class);
if (notification.getUserActions().contains(new UserAction().setType("DELETE"))) {
LOG.info("It was a DELETE of a timeline card.");
} else if (notification.getUserActions().contains(new UserAction().setType("CUSTOM").setPayload("MY_CUSTOM_MENU_ITEM"))) {
LOG.info("It was a MY_CUSTOM_MENU_ITEM of a timeline card.");
}
I need some direction in the following situation I have to solve:
I have a 'page' that have some fields that can be edit with 'save' button and with another button to 'navigate' to another place.
If the user edit some fields and click on the 'navigate' button before saving the data, the application should show and message something like:
Confirm Navigation
Button1 -> Leave this page Stay on this page
Button2 -> Stay on this page
I was think that I need some availability of pre-processing, before navigating to another place, Is there some availability in marionettejs before navigating in the AppRouter Or Router objects?, also I need to get some indication from the user, to which button he clicks.
You should have events set up for the buttons
Backbone.Marionette.ItemView.extend({
/* Removed other stuffs*/
events: {
'click #navigateBtn': function(e) {
/* Do your preprocessing in here */
}
}, //events
}