I have an external data model that I want to display in a calendar component. When the date is (i.e. user selects a date from the date picker or uses the back/forward buttons) updated, I want to re-query the model, but pass in the selected date to the re-query so that the external system knows what events to fetch.
What’s the safest way of doing this? I can’t find anything in the Skuid JS docs on the calendar component that exposes the currently selected date, or any event triggered when the date changes. Closest I’ve got is something like: skuid.$(“#sk-id-here”).datepicker() which I can traverse to find the currently selected date
My other concern is that, from what I can see, if I change the date, a re-query happens automatically. For Salesforce models, I can understand that a date change can be applied to the model in a way that affects the underlying query, so that only records within the date ranges are fetched.
I don’t think this is possible with external data - though I’d love to be corrected. I’m concerned that on changing the date, a query will be fired without me being able to affect the URL merge conditions controlling the query; so I’ll update the URL merge conditions and have to re-query again.
Anyone got advice on this?
What's the safest way of handling changes to the date in a Calendar component?
+7
+17I have never done this, but I wonder if you could 1) add a UI only field that has a default date of today (or whatever date is most appropriate for your use case). 2)Build that field into the URL parameters of your external data. 3) add a model action that requeries the model when that UI only field is updated. This would load a default date into your external data query, but allow the user to change the date and requery. Alternatively, you could probably have a button that triggers the requery. Maybe you have the user update a date range but nothing happens until he/she hits the “Update” button, upon which a requery is triggered using the updated date parameters.
+7Thanks for the ideas Raymond - hadn’t thought about the UI only field, nice!
I think I may have found something that seems to work and doesn’t require too much dancing around, essentially the following in an inline snippet:
var datepicker = $(".hasDatepicker"), onMonthChange = function(year, month, ob) { var evts = skuid.model.getModel("CalendarEvents"), condition = evts.conditions[0]; console.log("setting condition"); evts.setCondition(condition, "some-value") }; datepicker.datepicker("option", "onChangeMonthYear", onMonthChange);
(Apologies, it’s a knocked together POC so it may not make sense as a use case here.)
This seems to work and set the condition before the query callout occurs. Looks like the lifecycle is 1. run event handlers then 2. query the model. Confirmation would be nice though! 😉
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.