I have a form where users are adding an absence for a student. The absence can be 1 day or span multiple days, they submit the form which generates absences according to their enrolments through a custom module I’ve created, which then displays below the form for verification before submitting.
My problem is, however, when I reset the form on modal hidden, or reset the form with the temporary reset form button you can see in the screenshot, the data doesn’t clear. (The inputs do clear as expected).
Is there any Wappler way to reset the data object on the form? Or, will I need to add a custom js snippet to run on form reset?
For the time being, I have added the following functions that are working as intended to my custom.js file and call on form reset. The latter was found on StackOverflow.
Function called from form reset
Click to show
function clearformdata(element) {
let getform = findPropPaths(dmx.app.data, key => key === element)[0] + '.data';
if(getform.length > 0) {
function setToValue(obj, value, path) {
path = path.split('.');
for (i = 0; i < path.length - 1; i++)
obj = obj[path[i]];
obj[path[i]] = value;
}
setToValue(dmx.app.data, null, getform);
}
}
Function that finds element path in dmx global object.
Click to show
function findPropPaths(obj, predicate) { // The function
const discoveredObjects = []; // For checking for cyclic object
const path = []; // The current path being searche
const results = []; // The array of paths that satify the predicate === true
if (!obj && (typeof obj !== "object" || Array.isArray(obj))) {
throw new TypeError("First argument of finPropPath is not the correct type Object");
}
if (typeof predicate !== "function") {
throw new TypeError("Predicate is not a function");
}
(function find(obj) {
for (const key of Object.keys(obj)) { // use only enumrable own properties.
if (predicate(key, path, obj) === true) { // Found a path
path.push(key); // push the key
results.push(path.join(".")); // Add the found path to results
path.pop(); // remove the key.
}
const o = obj[key]; // The next object to be searched
if (o && typeof o === "object" && ! Array.isArray(o)) { // check for null then type object
if (! discoveredObjects.find(obj => obj === o)) { // check for cyclic link
path.push(key);
discoveredObjects.push(o);
find(o);
path.pop();
}
}
}
} (obj));
return results;
}
For server connects, there was a reset option added some time ago. Don't think such an option exists for Server connect forms yet. Sounds like a good feature requeset. @patrick?
So for now, you can run JS to clear out the data from dmx.app.data... object. DISCLAIMER: Use it only if you know what you are doing, else you might break things.
Thanks for the clarification @sid, and the disclaimer. I got my path wrong while testing it and left the form object completely empty wondering why nothing was working
But the JS above is working for me, so I’ll leave it at that for now and continue on.
Heya, I’ve had to remember back to this, but yes. You just pop it into the custom.js file your page is using. Make sure you have both functions. The clearformdata function uses the findPropPaths function. For the element parameter, just use the id string without ‘#’.
