Pattern Matching callbacks for inputs of a form on multiple pages

Dash Python
1

I have a use case where I am rendering a form with multiple select dropdowns. The form can be rendered with varying numbers of selects (chosen from a file). I am using dashboard_bootstrap_forms for this. I am rendering each form with a unique ID and there can be multiple number of such forms on a page in different tabs. The users can decide how many tabs to open and each tab has this form.

Form example

dbc.Form(
id={“type”: form, “index”: 1}, children=[list_of_selects]
)

Select example

dbc.Select(
key=key
id={“type”: “select”, “index”: 1},
options=options,
size=“sm”,
)

Whenever I submit the form I want to access the info of all the selects in that particular form.
I am doing it with the STATE

@callback(
Output(toaster, “is_open”),
[Input(form, “n_submit”)],
[State({“type”: “select”, “index”: ALL}, “value”)],
[State({“type”: “select”, “index”: ALL}, “key”)],)

As you can see I am using the index: ALL to get data from all the selects.
The issue is it returns all the selects in all the forms along with the one that is submitted. I was thinking of pattern matching on a particular form ID, but from the documentation, I couldn’t find how to do that as the form IDs are generated dynamically and are not available when the callback is registered.

What would be the right way to solve this problem?

2

HI @finiarel welcome to the forums.

Why is that a problem, which behaviour would you like to see? Unfortunately I don’t understand the question, could you try to explain/ add some information?

3

Hi @AIMPED thanks for the revert.
I will explain.

So on a webpage suppose I have multiple forms as such, I am adding just the sudo code

form id =1
- select id = 1
- select id = 2
- select id =3
Submit id = 1

form id =2
- select id = 4
- select id = 5
- select id = 6
Submit id = 2

Suppose these are the two forms on my webpage. Now when I submit form1 I want to access only selects of form1 they are [1,2,3] but since I am using the pattern match index: ALL for select when I submit form1 I get all the selects in the state which is [1,2,3,4,5,6] and I do not want that.
An obvious way to do that is in my pattern match there should be a way to pass the form ID something like this, so

form_id = 1
@callback(
Output(toaster, “is_open”),
[Input(form, “n_submit”)],
[State({“type”: “select”, form_id: form_id, “index”: ALL}, “value”)],
[State({“type”: “select”, form_id: form_id, “index”: ALL}, “key”)],)

I can’t use this pattern because the form_id is generated dynamically with user interaction.
And the callback is registered only initially, I can’t register it again when a new form is generated.

I hope that makes sense.