1

Is it possible to have an event in JS that fires when the value of a certain variable changes? But this variable is only in my js code, not in html. For example, i have: var x='George'; i want whenever the value of this var changes, to handle it and perform an action. Is there any possible way ? More specifically, i want in line 116 where i do

this.queryTerm.value = info.view.type; 

to be "listened" and then fire an event in order for another component to listen to this event and perform some actions.

/*
@ggalaios 07/04/2020 
Lightning Web Component to Implement fullCalendar.io solution
This LWC will be contained in an Aura Component that will have a map with the respective Locations
*/

import { LightningElement, wire, track, api } from "lwc";
import { loadScript, loadStyle } from "lightning/platformResourceLoader"; //In order for fullCalendar to be displayed
import FullCalendarJS from "@salesforce/resourceUrl/FullCalendarJS"; //import the static Resource!
import { NavigationMixin } from "lightning/navigation"; //Import this in order to be able to pop-up the New Event Screen
import { encodeDefaultFieldValues } from "lightning/pageReferenceUtils";
import getMyEvents from "@salesforce/apex/fullCalendarController.getEventsForCurrentUser"; //in order to call fullCalendarController Apex Class
import { RecordFieldDataType } from "lightning/uiRecordApi";

export default class FullCalendarJs extends NavigationMixin(LightningElement) {
  @wire(getMyEvents) myEvents; //@wire is used to call automatically the Apex method!
  @track eventsList = [];
  currentEvent;
  @track queryTerm = {
    value: "timeGridWeek"
  };

  connectedCallback() {
    var targetProxy = new Proxy(this.queryTerm, {
      set: function (target, key, value) {
        alert(`${key} set to ${value}`);
        target[key] = value;
        return true;
      }
    });
    this.queryTerm = targetProxy;
  }

  //Function to pop-up New Event Standard screen
  createNewEvent() {
    this[NavigationMixin.Navigate]({
      type: "standard__objectPage",
      attributes: {
        objectApiName: "Event",
        actionName: "new"
      },
      state: {
        nooverride: "1"
      }
    });
  }

  renderedCallback() {
    Promise.all([
      // First step: load FullCalendar core
      loadStyle(this, FullCalendarJS + "/packages/core/main.css"),
      loadScript(this, FullCalendarJS + "/packages/core/main.js")
    ])
      .then(() => {
        // Second step: Load the plugins in a new promise
        Promise.all([
          loadStyle(this, FullCalendarJS + "/packages/daygrid/main.css"),
          loadScript(this, FullCalendarJS + "/packages/daygrid/main.js"),
          loadStyle(this, FullCalendarJS + "/packages/timegrid/main.css"),
          loadScript(this, FullCalendarJS + "/packages/timegrid/main.js"),
          loadScript(this, FullCalendarJS + "/packages/interaction/main.js")
        ]).then(() => {
          // Third step: calls your calendar builder once the plugins have been also loaded
          this.initialiseFullCalendar();
        });
      })
      .catch((error) => {
        // Catch any error while loading the scripts here
      });
  }

  initialiseFullCalendar() {
    let myVar = "timeGridWeek";
    //@ggalaios 03-04-2020 If events not null or undefined...
    if (this.myEvents) {
      let newEventList = [];
      this.myEvents.data.forEach((ele) => {
        newEventList.push({
          id: ele.Id,
          start: ele.StartDateTime,
          end: ele.EndDateTime,
          title: ele.Subject
        });
      });
      this.eventsList = newEventList;
    }
    const ele = this.template.querySelector("div.fullcalendar");
    console.log("ele >>> " + ele);
    var calendar = new FullCalendar.Calendar(ele, {
      customButtons: {
        myCustomButton: {
          text: "custom!",
          click: function () {
            calendar.changeView("timeGridDay");
          }
        }
      },
      header: {
        left: "prev,next,today,myCustomButton",
        center: "title",
        right: "dayGridMonth,timeGridWeek,timeGridDay"
      },
      plugins: [
        "interaction",
        "resourceDayGrid",
        "resourceTimeGrid",
        "dayGrid",
        "timeGrid",
        "timeline",
        "interactionPlugin"
      ],
      events: this.eventsList,
      defaultView: "timeGridWeek",
      viewSkeletonRender: function (info) {
        alert("Change to type: " + info.view.type);
        this.queryTerm.value = info.view.type;
      }
    });
    calendar.render();
  }
}

4

This is more of a general JavaScript question then Salesforce, however, you can check out this question, more specifically the Proxy response.

@track queryTerm = {
    value: "Test"
}

connectedCallback () {
    var targetProxy = new Proxy(this.queryTerm, {
        set: function (target, key, value) {
            console.log(`${key} set to ${value}`);
            target[key] = value;
            return true;
        }
    });
    this.queryTerm = targetProxy;
}

handleKeyUp(evt) {
    this.queryTerm.value = evt.target.value;
}

Unless you've already tried this in LWC and doesn't meet your needs.

| improve this answer | |
  • 1
    Hi Jordan and thanks for your response. But where could i put this code snipped? If i put it inside the export default class FullCalendarJs extends NavigationMixin(LightningElement) {}, i get error and i cannot save my code – Giorgos Galaios Apr 7 at 15:31
  • Hi Giorgos, setup your proxy and assign it in the connectedCallback() life-cycle function like so developer.salesforce.com/docs/component-library/tools/…, – jordan.baucke Apr 7 at 15:38
  • Hi Giorgos, modify your original question with some more complete code if this doesn't work. – jordan.baucke Apr 7 at 15:43
  • Hi Jordan, thank you very much for your help! I will try it out and if it doesn't work, i will update the question. Thank you again:) – Giorgos Galaios Apr 7 at 15:45
  • Hi Jordan, unfortunately i cannot find solution. I update the question with my code and explain a bit what i want to do: In line 116, i change the value of the variable, and i want at this point the listener to "get" this change and then fire an event. I haven't found any solution yet, unfortunately. if you could give a piece of advice i would be grateful! Thanks :) – Giorgos Galaios Apr 8 at 7:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.