I’m building a form that field service users will use during site inspections. I have a field that represents the count of items that they see during the inspection. The final count may not be known until the end of the inspection, so it is convenient to step-change the count during the process.
In the past, I’ve used a star-rating field as a work-around. Wondering if there is a more elegant way of doing this with something like a integer field that has large up/down arrows next to it that can step change the value in real time.
I know the default number field can show the arrows, but you have to click into the field and the arrows are the same size as the integer. My users will be entered data into the forms via tablet/phone.
Thanks for the info. So I’ve done something like that to customise a number input. On display it does change the value of the number input but when I go to submit my form or when entering the number input with the mouse it resets the value to the default one. Screen Rec of the issue below.
Below is the JS on the button (generated with your AI btw)
// Get the input element by its id
let inputElement = document.getElementById(“number”);
// Check if the input element exists and it’s a number
if (inputElement && !isNaN(inputElement.value)) {
// Decrement the value by 1
inputElement.value = Number(inputElement.value) - 1;
}
// Return the updated value
return inputElement.value;
Because I wasn’t using the arrows built-in the default component I was struggling, but thanks to your help and the video, I ditched the JS, used a new variable and no-code and it’s now working. Thank you Joyce.
You’re complicating this by using JavaScript DOM modification vs Vue.js state. You gotta set a workflow to change the [number input].value via a WeWeb Workflow like this (but with a number input - I don’t have any on hand)
