Dynamic User Buttons on User Input forms

Ask the community
, ,
1

In advance thank you for the assistance…there are numerous posts and chats etc but I am not able to find a clear cut answer

Is there a way to add a button to a user input for that once clicked displays additional fields to capture the user data.

Has anyone seen or have the code used to achieve this…I have seen repeaters mentioned, hide/display etc

I am not able to find a clear and concise answer and guide…

Thank you

2

Your question is not clear enough.
Can you please elaborate more informations?

-How do look like your SETUP ?
-Which elements are used?
a) Table?
b) Repeater?
c) Multistate-Box?
d) what ever else…?

How do look like your form ?
Where is placed your button ?
Is your form connected to a DATABASE ?
…and so on…?

Some screenshot?

3

Hi Warren :raised_hand_with_fingers_splayed:

You need to use the button’s onClick( ) event handler to expand the intended fields.

const steps = {
    step1: { triggered: false, fields: ['email', 'password'] },
    step1: { triggered: false, fields: ['firstName', 'lastName'] },
    step1: { triggered: false, fields: ['phone', 'address'] },
}

$w('#showButton').onClick(() => {
    for (const stepNum in steps) {
        if (!steps[stepNum].triggered) {
            steps[stepNum].triggered = true;
            steps[stepNum].fields,forEach((field) => $w(`#${field}`).expand());
            break;
        }
    }
})

Hope this helps~!
Ahmad

4

@ahmadnasriya
I am not sure :roll_eyes: Ahmad. There was something about → “dynamic”.
But perhaps i try to think too much into future.

5

@russian-dima maybe he meant additional - different - fields whenever it’s clicked.

In this case, I’ll update my answer.

6

Firstly thank everyone. I have a user input form with elements.

Example; Pet = Dog

Next to this element I want to add a button that once clicked makes additional input field or fieldss appear that the user will populate with the additional set of data.

Pet Dog, Cat

Yes form is connected database.

7

@ahmadnasriya correct additional fields of the same category…ie 1 pet field when clicked a second pet input field appears

8

So you want the same fields as the original fields to show up? If that’s the case, then you need to use repeaters and then add a new item to that repeater.

$w('#showButton').onClick(() => {
    // Generating an _id for the item.
    const _id = String(Math.floor(Math.random() * 10000));
    
    // Creating new item    
    const item = { _id }
    
    // Add the item to the repeater
    const data = $w('#repeater').data;
    data.push(item);
    
    // Update the repeater
    $w('#repeater').data = data;
})
9

thank you, I’ll give it a try.