Update property object using coded component

Ask the community
1

Hello!

I am using a coded component to display the values of the properties (called filters in this case) of an object. By clicking a switch I want to toggle between true/false values. However, as .set() can not be used to this I need to connect an action and pass the value in question as a parameter. How can I know which property corresponds to the toggleSwitch in question, as it will be one if the many iterated properties.

image
image593×516 23.2 KB

1 Like
2

Hi, just a thought,

You’re creating multiple <input> with the same class .toggle_switch and giving each an onClick event handler in the forEach.

Would it not be easier to also give each <input> an unique ID by using the index property on forEach?

filters.forEach((filterName, index) => {
  filterDiv.innerHTML += `
    <input type="checkbox" class="toggle-switch" id="checkbox${index}" onClick="myFunction('checkbox${index}')">
  `;
});

After you have created all the HTML, you can have a function that gets the value of the checkbox in question:

function myFunction(checkboxId) {
  const the_checkbox = appfarm.elements.getElementById(checkboxId);
  const the_value = the_checkbox.checked ? true : false;
  appfarm.actions.example({ id: checkboxId, setValue: !the_value })
    .then(() => {
      the_checkbox.checked = !the_value;  // Fix the checked state after the action
    })
    .catch(err => console.log(err));

With this method, you have a way to know which checkbox has been triggered.
Hopefully this helps :smile:

// Erik

1 Like
3

Thanks! I’ll have a look at implementing this:)

5

Due to permission issues I modified your suggestion somewhat, and created an event listener instead.

const container = document.getElementById('filter-container');
container.innerHTML = ''; // Clear any existing content

Object.keys(filters).forEach((filterName, index) => {

    const isActive = filters[filterName];

    // Create the filter item container
    const filterDiv = document.createElement('div');
    filterDiv.className = 'filter-item';

    // Create inner HTML with the toggle switch
    filterDiv.innerHTML = `
        <div class="toggle-item">
            <span class="material-icons MuiIcon-root jss364 mdi mdi-menu" aria-hidden="true" style="font-size: 18px;"></span>
            <span class="item-label">${filterName}</span>
            <input type="checkbox" class="toggle-switch" id="checkbox${index}" ${isActive ? 'checked' : ''}>
        </div>
    `;
    // Append the filter to the container
    container.appendChild(filterDiv);

    const checkbox = filterDiv.querySelector(`#checkbox${index}`);
    checkbox.addEventListener('click', () => myFunction(`checkbox${index}`));
});

The function is pretty much the same

function myFunction(checkboxId) {
      const the_checkbox = appfarm.element.getElementById(checkboxId);
      const the_value = the_checkbox.checked ? true : false;
      appfarm.actions.changeValue({ filterIndex: checkboxId, value: !the_value })
          .then(() => {
              the_checkbox.checked = !the_value;  // Fix the checked state after the action
          })
          .catch(err => console.log(err));
  }

However, I am getting this error:
Property ‘getElementById’ does not exist on type ‘HTMLElement’.(2339)

I have tried using .document with various javascript workarounds, but I cannot get it to work. What am I missing?

6

Strange,

Maybe querySelector would work better?
So appfarm.element.querySelector(#id); ?

// Erik