Any idea how this can be displayed?
3 Likes
The “25” could be a text element referring to an object holding the value and the “+” and “-” could be individual buttons that increment and decrement the value, respectively. Style each component accordingly.
1 Like
The number could also be inside of an input element, to allow the User to manually enter a number as well as use the buttons. I’d place those elements within the same group - then you can set up a custom state on the Input (such as “Number”, type: Number). Have the Input’s initial content be “Input’s Number”.
Then you would need three workflows:
- When “Inputs value is changed”
Element Actions --> Set State: Input, Custom State: Number, Value: Input’s value
Then, Reset Group A (to set the input’s value back to the custom states value)
2.When “+” is clicked
Element Actions --> Set State: Input, Custom State: Number, Value: Input’s value + 1
Then, Reset Group A
3.When “-” is clicked and Input’s Number > 0 (to ensure no negative values)
Element Actions --> Set State: Input, Custom State: Number, Value: Input’s value - 1
Then, Reset Group A
4 Likes
I have just made the control for you;
run: https://dave-auld-demo-stuff.bubbleapps.io/version-test/custom_controls
or edit:
https://bubble.io/page?type=page&name=custom_controls&id=dave-auld-demo-stuff&tab=tabs-1
You can then extend this to put limits on the input element or the upDown buttons as @fayewatson says or pretty much tweak as you wish. Then package it up as a reusable element if you want the functionality on re-usable. You would probable want to do a on page load to set the state to 0.
7 Likes
I like it. I like it a lot.
But can this be inside of a repeating group?
Or otherwise to assist in creating an “itiniary” with multiple legs of a flight?
Don’t see why it wont go in a RG.
1 Like
Sure, if it was a repeating group of legs of a flight - then you can enable auto-binding for the input (Field to Modify: Passengers). Then instead of having the plus and minus buttons modify a custom state, you could just have them adjust the Current Cell’s Passenger’s value.
2 Likes
Yes, as per other thread. RG with autobinding would seem like a good way to go here.
1 Like
Thanks @DaveA and @fayewatson i’ll give it a go. Have never worked with inputs in a repeating group or auto binding on a thing.
2 Likes
One bonus of using autobinding is that it won’t cost you any workflows, only the + and - buttons will. Just make sure you set up a privacy role to specify which Users are allowed to use autobinding for the Passengers field. Then test in run mode as a User with permissions. For example, if only User’s whose type is “Admin” are given permission, the privacy role could be:
What if standard web browsers are creating these though? How can I autobind and set permissions/privacy roles for people who are not logged in?
Right now i’ve just left no permission but opened it up completely to everyone else to auto bind. Is this correct?
Both the runtime and editor links are in the post above.
1 Like
Overlooked it. thanks.
1 Like
Yes, that will allow anyone to use autobinding
1 Like
Every time i move the ‘date picker’ inside of the repeating group it breaks something and the issue checker triggers.
But doesn’t identify what is wrong:
I’m having two issues:
-
Once I move the “ticker” inside the repeating group I can’t set the state on page load of it anymore for some reason
-
I also can’t auto bind this ‘ticker’ because it’s an integer it seems although the field type is number.
On page load, set the value of a group outside of the repeating group. For the “ticker” inside the repeating group, set its data/custom state by referencing the group outside of the repeating group. Depending on exactly what you’re trying to do with custom states on the “ticker”, this may or may not be a viable alternative.
Does the parent group of the input of the “ticker” contain the object you are trying to modify (i.e. does the parent group contain the single “thing”)?
1 Like
I’ve done this but for some reason as soon as I click on auto binding I lose the custom states + / - buttons.
Has anyone managed to auto-bind an input based on a click in another element?
I want to set an upvote counter and due to the volume of potential upvotes from 1000 users I would rather avoid workflows 
I was hoping to hide the input or mark it as disabled to avoid people tampering with the number, but I’m not able to modify it’s value via auto-binding when clicking on an icon.