MDUI Dev Kit Plugin - Some considerations

[studio.purracchio]

MDUI Dev Kit Plugin for Bubble

Hi G.,

I’m very proud that you like my plugin. Every suggestion are appreciated. My customers know it.

I try to answer point by point.

• “the project I’m building requires percentage inputs, I didn’t see a way to do that in the plugin currently”

Well, I’m not very sure what “percentage input” means. With my component “MDUI Number Field” you can insert every type of numbers for every purpose, like integer, decimal, float numbers, currencies and then percentages, potentially (integer numbers). However, percentages have a peculiar characteristic: a limit. You can insert numbers from 0 to 100 only. Ok, in a number field, limits can’t be set because insert is free. Is a problem of semantic of component. The best component to represent percentages (or every limited numbers input) is a slider in where you can set minimum and maximum number allowed and a step to select to. Here an example of slider: https://material.io/components/sliders
In a next release I will implement a slider component.

• “I’d love to be able to change the background color of the field to get rid of the gray. Could work around it by making the background of the whole app the same gray, but flexibility there would be nice (and hopefully easy?)”

First I answer to second part of your sentence: You can’t work around by change background color because grey of MDUI components are almost created by lower opacity of black (or white in dark mode). Unfortunately in MDUI plugin I’ve decided to follow Material Design guide lines as strictly as possible and changing of field background is not considered for design chooses. However I’m developing a version of this plugin where anybody can change a lot of parameters to customize design of components (this will spend a lot of time).

• “It looks like the elements have a bit of built in padding, which makes it hard to line everything up down the page (my H1, a shape delineating sections, etc.)”

I’m sorry but I think I don’t understand. Would be useful have some example. However external padding is to help designer to positioning fields in a form better. Simply, just put each component side by side or attached to the top or the bottom of border. Padding helps designer to respect correct spaces between fields.

I hope you can ask me every doubt you can have. Otherwise, I hope I helped you. Bye.

Andrea.

[zenter]

On percentage inputs, a slider would work great if I wasn’t trying to be precise. In this case we’re asking for financial metrics so it needs to be exact.

You can also have virtually any number in there positive or negative (150% revenue retention, -50% growth) so it’s really just the % that needs to be appended to the end, and then if you want to be stored consistently with the rest of bubble you’d store it as a decimal. 50% = .5

Good stuff on the colors, makes sense. Not a deal breaker by any stretch, but looking forward to the more customizable one.

With everything else in Bubble the components don’t have interior padding, so I’m used to providing padding through groups or other alignment. My advice would be to make that explicit as a parameter… it works fine if everything you’re using is an MDUI element, but if you’re trying to line up other elements horizontally it gets goofy. For instance a logo in the header.

Thanks for the responses!

[studio.purracchio]

OK @zenter,
now I understand what you talk about. You need only a symbol of percentage on the right of field.

I’m working to do that and other stuffs (like custom padding), meantime you can do like below, if you like it.

Preview:

Bye.

[zenter]

Beautiful, thanks Andrea! Looking forward to seeing it.

[zenter]

Alright, I’m all in… switched my whole app over and got it to a better place than I could with default Bubble inputs and input formatter, so thank you thank you thank you. Big fan.

I took some notes as I was going on ideas for improvement, not sure if any of these will make sense for you to knock out but in case it’s helpful I’ll just drop it all here. No need to respond line by line but happy to clarify any that don’t make sense.

Annoyances/stuff I ran into

• I can’t display a $ in the number field to the left, only to the right as a trailing icon. Not a big deal, but nice to clarify units outside of just the question text.
• Won’t allow negative numbers in number inputs, so for ones where the number can be above or below zero I have to ask two question (positive/negative & then the value)
• it allows 0 as an input and doesn’t consider the input empty (which is critical for my form), so that’s great, but it doesn’t display the 0 after you tab away. Instead it goes to the initial state where the text is large so it’s not clear to me that it got my input.
• The select component only works with texts, which is limiting… I have a US State or Territory input that I’d like to look up against an option set (where the displays are stored as text) but it’s not possible to autobind against that data, I’d have to copy it all in manually.
• Spacing seems to look different in the editor vs in reality, I want about 24px padding and I have to basically put them against each other to achieve that
  
  
• Checkboxes in a repeating group against a database attribute list of things. I want to be able to preselect checkboxes if the current cell’s item is in the list of things, but there’s no dynamic option for “is this checkbox prechecked?” Using a conditional rule for it only works on page refresh, not when the page is loaded by navigation (which is really odd to me). Luckily the inverse works, I have preset the check to unchecked, and then uncheck if the item isn’t in the list.
• I’ve got an issue with inputs clearing when other inputs autobind (saves). One scenario - three inputs in a row, the top and bottom ones are autobound, the middle one is a percentage input (number input with a % as the trailing icon) that I can’t autobind because I need to divide it by 100. When I type a value into all three and then tab out of the third field I see the page loader (saving the third field) and then the middle field’s input is cleared. If I turn off autobinding on the two values there’s no issue. Second scenario is my signup page with an email field, password field, and then legal acknowledgement. If the checkbox for legal is autobound it clears the username & password fields. Have to fix by having the non autobound fields also save on input change with a workflow, or not autobinding at all.
• disabled buttons are still clickable, so you have to configure “only when” for every button and duplicate the conditional logic. Would be great if disabled buttons weren’t clickable.
• there’s a small delay in making buttons active after changing an input that they’re conditionally tied to, maybe a second (conditional rule on button when input’s value is not empty). Not a huge deal, but a small amount of friction.

Minor stuff, nice to have or delight opportunities

• I’d love color to be included in style so I don’t have to set it every time
• I’d like the “Start/Edit Workflow” button to show up in the edit pane instead of having to find things by navigating to the workflow tab
• I imagine I’m not the only person that arrives at MDUI after getting really frustrated with default bubble components or other plugins, so my primary use case was rebuilding a series of forms from standard inputs. A lot of that was really really smooth, but there were a couple of things that I had to do every time. The text of a button gets converted into a “label” that I have to type in every time. Validation rules that depend on an input’s value not being empty come across largely intact except thee last qualification. I have to click on [missing element] or whatever and select “Is not empty” and then it works. Button names get reset to MDUI-Button A. Not a big deal, but that stuff could help migrations. Autobinding and initial content come across beautifully.
• Text input set to “area” with a given number of rows doesn’t display tall in the editor, but displays correctly in product. Not a huge deal, just need to pop back and forth to make sure it looks right.
• every once in a while I saw an error state for the inputs in the editor where it just spewed text in place of the preview. I believe it happened when I made the parent group too small? It didn’t affect rendering in the app itself so not a huge deal, but noticed it so thought I’d mention it.
• It looks like hitting enter when you’re in an input doesn’t work as a button press… so I had to go back through and use another plugin for keyboard shortcuts.

Overall I’m a fan like I said and the experience is super smooth. It does all the stuff I need it to do, and it solves the main issue I had with the default components which is thousands separators messing with focus when you tab into another field.

Thanks for putting this together!!

[studio.purracchio]

@zenter

I can’t display a $ in the number field to the left, only to the right as a trailing icon. Not a big deal, but nice to clarify units outside of just the question text.

This is not an issue or an error but a feature that will be in future release as I said you last time. You should have told me like a wish not a issue.

@zenter

Won’t allow negative numbers in number inputs, so for ones where the number can be above or below zero I have to ask two question (positive/negative & then the value)

I can’t figure when I should need a negative value in input. A positive value can be added or subtracted from another, then can be showed a positive or negative result.
For example, in a personal financial app: select for a EXPENSE or INCOME and then insert a positive (absolute) value that can be added or subtracted if income or expense. Another advice, you should always try to limit to less as possible influence of user. If I ask to users to add a correct math sign like minus or plus, I expose app to more errors possibilities. Better a clear message to select: eg. EXPENSE or INCOME and the app engine select appropriate math sign! …I think you are agree with me …or not !?

@zenter

it allows 0 as an input and doesn’t consider the input empty (which is critical for my form), so that’s great, but it doesn’t display the 0 after you tab away. Instead it goes to the initial state where the text is large so it’s not clear to me that it got my input.

If on a text field, number field or date field you don’t set an initial value in DB or a autobinding is a correct way to set initial value with value of component self. It’s to workaround a structural issue that will be corrected in a next release.

@zenter

The select component only works with texts, which is limiting… I have a US State or Territory input that I’d like to look up against an option set (where the displays are stored as text) but it’s not possible to autobind against that data, I’d have to copy it all in manually.

What you said is not true, but is my fault! Poor documentation that not consider limitation of known about Bubble power! Every text field (like in my Select component) can be filled with lists from searches that will be automatically converted in a list of comma separated text. Look below.

Now, if you set autobinding with a text database field will be perfectly saved. I don’t know why your set don’t works. I invite you to review your set and in private I can help you to correct it, if you want.

@zenter

Spacing seems to look different in the editor vs in reality, I want about 24px padding and I have to basically put them against each other to achieve that

Another strange behaviour. In my editor everything works fine! Take a look. An advice …don’t change default height of component in editor (80px for text fields and co.).

…tomorrow second part…it’s too late for me.

[zenter]

Thanks for the followups Andrea, I should’ve checked on default sizing… I was making all the elements 56 px tall or something. Got them all updated to 80 px height and it’s feeling much better, thanks!

Also good to know on the selects, I didn’t realize I needed to identify both caption and value. Some of the selects values I want to use are ranges of currencies "(Up to $100,000, $100,000-$250,000, etc) and it looks like it’s separating on all of those commas which doesn’t work… is there a way to escape that? The Bubble select does one option per line in the select definition dialogue, probably for this reason.

There are lots of use cases for negative numbers, you’re right that there’s a work around but it’ll end up being really tedious from a data handling standpoint. You have two different fields that tie back to the same backend value… kind of annoying. Some examples… “What is your net income last quarter?” (will be negative for companies that aren’t profitable) “What is your net margin?” “What is your earnings per share”, etc.

Cool, I’ll hold off on the zero thing if you think that future release is imminent, being able to capture data when the form is partially complete via autobinding is a nice feature to have.

[zenter]

Trying to work around the comma issue and used the option search which worked fine (except for blowing up with the internal commas in each value). The last hangup was that it seems to pull in a random order, and no sort options appear.

Opted to just write in the values, simplify from $100,000 to $100k, and ditch using the options. Working now

[zenter]

Oh hey, just caught the error… there’s a back button and forward button in a group, I made the group wider and it blew up the button preview rendering:

One bummer I just ran into is no typeahead to narrow the select. I’ve got a US States & Territories dropdown, and it’d be amazing to be able to start typing and then select their state.

[studio.purracchio]

@zenter

Oh hey, just caught the error… there’s a back button and forward button in a group, I made the group wider and it blew up the button preview rendering:

THIS IS NOT A PLUGIN ERROR. Is a render issue of Bubble.

[katiekennedy1234]

@studio.purracchio
I’m working on my responsive design and noticing my button heights are changing. The native bubble button maintains the height and only changes “width” but my MDUI buttons are getting very large when I go into responsive mode. Below are 2 screenshots.

The blue button is the native bubble button and the End Call is MDUI button.

This is in the regular Editor:

This is in responsive mode:

Any ideas why the MDUI button height changes in responsive mode?

Thanks,
Katie

[studio.purracchio]

Hi @katiekennedy1234
I’ve done some tests. It seems to work perfectly. I need to know how can happen. Try to switch on button (look below) in responsive editor to view responsive borders.

Do same in editor

[zenter]

I’ve seen this before in the editor but it works great when actually rendering in the app. Are you seeing weirdness in the app?

[studio.purracchio]

@zenter

Won’t allow negative numbers in number inputs, so for ones where the number can be above or below zero I have to ask two question (positive/negative & then the value)

Released version 2.9.4.

Hi!
Added negative numbers feature in my Material Design UI Kit - Bubble plugin.
https://bubble.io/plugin/mdui-dev-kit-1572777453139x243635964010561540
Bye.

[dev11]

Hi - awesome kit - any chance how I can change the fontsize?

Thx
Dominik

[studio.purracchio]

I’m working for a new rebuild where you can change fonts. However not for now.

Why I decide to make fonts unchangeable !?
Because strictly following Material Design Guide Lines.

In fact, I’m sure, font is not so big as you think. Probably, as many people did, you consider all component’s dimension.

Font is perfectly proportionated to component dimension as Material Design Guide lines specification suggests.

Try to view https://material.io/components/text-fields page in your monitor then if you see same issue …well…I’m right.

Let me know please. Bye.

[tim22]

@studio.purracchio Im fining this error on your date field. how can i fix it? its Quite frustration for clients .

Kind regards

[studio.purracchio]

I will fix it very soon. Be patient, I moved recently and I’m stuck.

[Bubbleboy]

@studio.purracchio You mention at the beginning of the thread back in May 20 you were going to add the range slider… did you implement that? its not on the demo

[studio.purracchio]

I try to reproduce the issue you mentioned without success.
Let me know when that appears.
From where the issue run? (localization may be important)

Next pics is my debug display…

I’m waiting for new details … Bye.