Pass value from custom component to temporary state variable

App Building
1

Probably overlooking something simple, but haven't been able to work it out yet via the docs or searching this forum.

I've created a custom component using FullCalendar to expand on the possibilities of the calendar component in Retool.

I'm looking to pass the week number of the visible week in the calendar back to a temporary state variable in retool. The week number of the current view can be called using getDate() from within the component.

My iframe code looks like this:

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css">
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'>

<script>
window.Retool.subscribe(function(model, modelUpdate ) {
    if (!model) { return }
     var calendarEl = document.getElementById('react');
     var calendar = new FullCalendar.Calendar(calendarEl, {
       
       initialView: 'timeGridWeek',
       events: model,

       
       datesSet: function(info) {
         console.log(moment(calendar.getDate()).isoWeek())
       }
    });
  
    calendar.render();
})
</script>

<div id="react"></div>

With the code above, the console logs work as intended, so when I change to a different week the correct week is printed to the console (e.g. 45). I'm looking to pass this value to a temporary state in retool which I've called selected_week_num.

Can anyone point me in the right direction? :pray:

2

Here is how I do that:

  1. Have a JS query that sets the temp var.

image

  1. Update the model with the value you are passing
  2. Trigger the query from the Custom Component.

image

image
image831×469 51.4 KB

3 Likes
3

Thanks a lot @bradlymathews ! I'll take the time to go through this and try and get it working.

I was hoping I didn't have to change the model itself and write the value directly to the temporary state (maybe via a query), as the model I have is an object that I've transformed into an array to get the calendar title and time etc, as show here:

image
image992×734 114 KB

4

Ahh, I see.

My first guess in that case is to make you model something like this:

{
   calendar: {{formDataAsArray(import_agent... etc. ,
   properties: {
     week: 0
  }

In your CC change events: model to events: model.calendar.

Then change your model like this:

window.Retool.modelUpdate({ properties: {week: moment(calendar.getDate()).isoWeek()}})

I am also very curious if anyone else comes up with a better pattern that I am using here.

5

Oh, one other comment about

Blockquote
I was hoping I didn't have to change the model itself and write the value directly to the temporary state (maybe via a query),

You can just run the query, but there is no way to pass a parameter back with that query like you normally can using additionalScope. I have a feature request for exactly that which will simplify things quit a bit. Please heart it and +1 it to get it some more traction!

6

Yup I think that's the way to go for my case! Thanks :pray: