_sivert
September 20, 2024, 12:42pm
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.
1 Like
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
// Erik
1 Like
_sivert
September 24, 2024, 8:16am
3
Thanks! I’ll have a look at implementing this:)
_sivert
September 24, 2024, 8:50am
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?
Strange,
Maybe querySelector would work better?
So appfarm.element.querySelector(#id);
?
// Erik