Is there a way to display basic fractions as symbols? I have an input asking for ingredient quantities, so when the user types in 1/4, I would like it to show up on the output screen as ¼.
Re-upping this for decimals. If I have a data field with a number type, and that number is a decimal, what is the best way to format it as a fraction?
Let Me Clarify:
I have an app where users can scale quantities of ingredients. So there’s a base quantity (i.e. serves 4), and each ingredient has a quantity (i.e. 2 cups). I want the user to be able to scale the ingredients, so if they want to now serve 5, the new quantity would be 2.25 cups. On the page, my formula looks like Current cell’s quantity * input quantity / base quantity or 2 * 5 / 4. I’m looking for a way to display this result as a fraction, like 2 ¼. I guess this could be done with an option set and find & replace. However, if I end up with a repeating decimal like 0.333, or a decimal not in my option set, I would need a way to round to a “nice” fraction like 1/3.
You could create a simple plugin that uses the fraction.js library to handle the conversion as shown below.
This assumes you defined a field named “decimal” and a result value named “fraction” as shown below:
There are other ways (possibly simpler to do this conversion in JS) however I wanted to at least offer one solution.
If you need further help I (or someone else here) might be able to make time to release this as a simple free plugin.
1 Like
Hey there,
Thanks for you help! I played around with the fraction.js library some yesterday. I think it could help in a lot of situations, but I’m not sure if it’s the best solution for my use case. Perhaps you will have a better suggestion on implementation.
Because my texts are in a (nested) repeating group, I scheduled an API workflow to run when the page servings was updated. I have two fields on my database. The first is the numeric placeholder (the decimal), which I keep to run mathematical operation on. The second is the numeric display (the fraction), which is displayed as a text. Thus, when the number of servings on the page changes, I schedule a recursive workflow on the list of ingredients. The plugin runs on the decimal * page servings / base quantity, and I save this value as the numeric display for page viewing. While this does get the job done, I’m not sure if this is the ideal solution, because it can take a while for the recursive workflow to work through the list.
(Aside: I don’t think I can use a custom state here to keep this client side. I can’t simply set the list of fractions result to a custom state and access the item # via current cell’s index, because it is in a nested repeating group. The only workaround I see would be to create another field on the data type for “Display”. )
I did try one other method to get a more instantaneous result, but came up just short here. So, any input on this front would to be appreciated. Rather than convert via a plugin, I created an option set with five fractions that I thought sufficient to display. Each option has a minimum and maximum corresponding to a decimal, and a text symbol to display.
On the page itself, I have the ingredient:find & replace. I search for the numeric placeholder, which is part of the ingredient. I replace it in two parts: first, I round the number down to get the integer. Next, I search my option set to find the option whose decimal range contains the current cell’s decimal.
Now this should work, except I can’t figure out a way to extract the decimal from the whole number. So, in my example above, if my numeric placeholder is 2.67, it is currently filtering by 2.67, when I want it to filter by 0.67. Because it is formatted as a number, :truncate from, :find & replace, :extract with Regex, etc. are not available. Argh! Any suggestions on how to search only by the decimal?
(PS: wouldn’t it be great to have a :formatted as fraction option for numbers, as percentage and currency are currently available?)
I understand your problem better now. It sounds like the search example should work for a well known set of fractions as you listed. It might be that you need to try to filter using the “Get an Option” and then select “All Options” from your option set. Then you can filter or intersect with your users’ input.
Alternatively a more, robust solution would be to use the js Toolbox plugin (I use this plugin in almost every Bubble app).
Using the run javascript with jsToBubble element you can run a JS function that will give you a fraction (similar to fraction.js).
It is a bit trickier within a repeating group but there is a great example of how to do that in the plugin documentation editor found here: toolbox-example | Bubble Editor
I hope one of those solutions will get you moving forward on your journey!
1 Like
So I think I have a working solution. This solution works if you are trying to format decimals as fractions and you have a finite amount of fractions that you’re willing to show. If you want to simplify any fraction you come across, I suggest the fraction.js library. Solution posted below in case anyone else is trying to accomplish the same:
-
Create an option set with the fractions you want to show.
-
On each option, add a minimum and maximum decimal value for the fraction. Essentially you’re creating a range of values that you want the fraction to encompass.
-
Add a text field on each option where you will paste the fraction symbol.
-
In the editor, on the text field you want to show a fraction, add :find&replace to the dynamic text. Find the number you are searching for, and replace it with two expressions:
Parent group’s number:floor
Get An Option (Your Option Set) :filtered by (Parent group’s number ← modulo → 1 >= this option’s minimum and Parent group’s number ← modulo → 1 < this option’s maximum ) :first item’s symbol.
By doing parent group’s number:floor, you’re rounding down the number. When you do modulo → 1, you’re returning only the decimal portion of a number. So, if you’re number is 4.25, you’re returning only the 0.25 with the modulo. This allows you to handle numbers greater than 1.
If you want the number to round up or down rather than display a fraction at a certain decimal range, just add a conditional and replace with just Parent group’s number:floor or Parent group’s number:ceiling.
1 Like
Thanks for the solution, I modified it a little and essentially got it to work for my usecase. I have one more question, that you might be able to answer. What do you do with numbers < 1 where parent group’s number:floor would return 0? I don’t want the 0 to show, just the fraction.
I’d set a conditional on the text element, when Parent group’s number < 0, replace with Get an Option only. So rather than showing both the parent group’s number:floor and Get an Option, you’re only showing the fraction part.
1 Like
Thanks for the reply, that solution definitely works! As I already had two conditionals on the element I found another solution that also worked for me without having to use a conditional. If anyone ever comes across a similar problem, here is what I did:
Instead of Parent group’s number:floor I used Parent group’s number:floor is “0” formatted as text. For formatting as yes I put nothing in and for formatting when no, I put Parent group’s number:floor.
1 Like