UI for Container/Data Provider input in a form seems broken

[arladmin]

trafficstars

Hosting

• Tenant ID: arl

Describe the bug When a Container or a Data Provider component is added to a form, the width is not stretching upto the limit of the form, like all the other components. Instead, it is remaining confined within a width equivalent to the label width of the other components. Also, there doesn't seem to be any option to be able to rectify this.

To Reproduce Steps to reproduce the behavior:

1. Create a form
2. Create a Text Input (fills up the width of the form)
3. Create a Data Provider component (doesn't fill up the width of the form)

Expected behavior All the components should, by default, fill up the width of the form.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS] Win 10
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[aptkingston]

Hey @arladmin. This is actually caused by putting it inside the field group. Field groups should only contain fields, and nothing else. They use CSS grid to align labels on the left - so by adding another component inside the field group it's taking up the space where labels would go.

If you move the data provider outside the field group then this will work as expected. However, if you move the data provider outside the field group then the options picker will not align with the other fields which could be annoying.

Your best bet might be to pull the data provider up above the entire field group. That might seem a bit strange because only the options picker needs it, but it will work fine.

[arladmin]

@aptkingston Thanks for your inputs. Although, what i'm actually trying to achieve is a more complex scenario than depicted above.

I'm trying to ascertain how to dynamically configure the Data Sources for various components, like Options Picker, Relationship Picker etc., within a single form. Use-Case e.g. If a value is selected for Field A, then show only filtered data for Field B. And based on this value, show only filtered data for Field C, and so on.

Do you think something like this is feasible within the scope of Budibase's capabilities?

Thanks.

[aptkingston]

That is certainly possible, yes. You just need to do exactly what you're currently doing - wrapping options pickers inside data providers, then using the form field values as filters for those other data providers.

The current issue you're experiencing is just a UI layout issue, and it would be much easier if you change the field group to put labels above the fields rather than on the left side. Or just remove the field group entirely! Either of those things will allow you to wrap fields with data providers with no issues :+1:

[arladmin]

Is the 'nested within Data Provider' thing not possible for Relationship Pickers?

I seem to have got them working for Options Picker. But, when i put a Relationship Picker within a Data Provider (providing filtered data) there doesn't seem to be aby option to bind the options to the Data Provider. Instead all the options from that form schema are being shown.

[aptkingston]

Relationship fields show all possible rows at the moment and don't support using external data providers since only rows from a certain table are valid. What we could do is add a filter directly as a setting for relationship fields, so you can define your own filters for related row options without needing any extra data providers. Would that solve your issue?

[arladmin]

That would be great!

Most of the time, like for other data, relational data also needs to be filtered using certain bindings. Hence, i went down the rabbit hole with a Data Provider to get the Relationship Picker filtering work somehow.

[arladmin]

@aptkingston Is there no workaround for this, in the meanwhile?

I thought putting the relational data in an Options Picker within a Data Provider might work. But saving the form errors out in that case, "URI malformed".

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity.