Filter related field dropdown based on the selection of other field

[umairahmed515]

Hi @jowilf and other guys,

First of all thanks for building this tool, it really fulfils most of the requirements one can have on the admin panel.

I wanted to ask about a scenario, so I have this model:

class Span(Base, BaseMixin):
    __tablename__ = "span"
    span_type_id = Column(
        Integer,
        ForeignKey("span_type.id", ondelete="CASCADE"),
        nullable=False,
        doc="Link to the Span_type ID",
    )
    pole_id = Column(
        Integer,
        ForeignKey("pole.id", ondelete="CASCADE"),
        nullable=False,
        doc="Link to the Pole ID",
    )
    connection_id = Column(
        Integer,
        ForeignKey("pole.id", ondelete="CASCADE"),
        nullable=False,
        doc="Link to pole ID",
    )
    deployment_id = Column(
        Integer,
        ForeignKey("deployment.id", ondelete="CASCADE"),
        nullable=False,
        doc="Link to the Deployment ID",
    )

    pole = relationship("Pole", foreign_keys=[pole_id], passive_deletes=True)
    connection = relationship(
        "Pole", foreign_keys=[connection_id], passive_deletes=True
    )
    span_type = relationship("SpanType", back_populates="spans", passive_deletes=True)
    deployment = relationship(
        "Deployment", foreign_keys=[deployment_id], passive_deletes=True
    )

And, I have this view class:

class SpanView(ModelView):
    # fields order
    fields = [
        "id",
        "created_at",
        "updated_at",
        "span_type",
        "deployment",
        "pole",
        "connection",
        "disabled",
    ]
    exclude_fields_from_create = ["created_at", "updated_at", "disabled"]
    exclude_fields_from_edit = ["created_at", "updated_at", "disabled"]

    actions = ["disable_spans", "restore_spans"]
    row_actions = ["view", "edit", "disable_span", "restore_span"]

Screenshot:

Question:

1. I want to filter poles in the dropdown based on the deployment selection. So, if a user selects deployment 1, the poles dropdown should only show the poles associated with deployment 1, if user selected deployment 2, the poles dropdown should only return the poles associated with deployment 2. How can I achieve that?

2. The poles dropdown should only be shown once the deployment is selected, or the poles dropdown should remain disabled until deployment is selected.

Looking forward to the response. Thanks!

[umairahmed515]

Hi @jowilf could you please provide some assistance in this regard. Thanks

[jowilf]

You can create a custom form for the pole field and include your own JavaScript code.

class PoleField(StringField):
    form_template: str = 'custom_form.html'

    def additional_js_links(self, request: Request, action: RequestAction):
        if action.is_form():
            return ['custom_form.js']
        return []

class SpanView(ModelView):
    fields = [
       ...,
        PoleField("pole"),
        ...
    ]
    additional_js_links = []

In your custom_form.js file:

registerFieldInitializer(function (element) {
    $('#deployment', element).onchange(...) 
}

Make sure to place custom_form.html and custom_form.js in your template folder.

Note: This is just a guiding example, and the code is incomplete.