And here ya go: In case it wasn’t obvious what I’m talking about (though it should be). Here’s a dropdown with dynamic values where we are designing the Option Caption. As in any text expression box (the contents of a text element would be another example), we can write all sorts of interesting expressions and render their results as text. Have a look:
Our choices here are sourced from an API call (to Rebrand.ly). This call returns a bunch of info about one’s Rebrandly domains. Let’s imagine that we want to select one of the domains for whatever reason.
The Option caption field could be boring of course and just give us the name of the domain. That would be the first part here:
Current option's fullname: This expression returns the value stored in the “fullname” field that the API call returns. It’s just the name of the domain, formatted like “go.grupz.com”.
But we can display other useful info as well. In total, there are 4 expressions here (the one I describe above, followed by a text pipe character [that’s just text that I typed], followed by 3 more expressions). The remaining three are these:
Current option's https:formatted as text: What is this? Well, “https” is a boolean value (what Bubble calls a yes/no value) that represents whether the domain in question supports https. So writing: “Current option’s https” will, by default, return one of two strings (text values): It will return “yes” if https is yes/true and “no” if https is no/false.
So we’d get a menu item that looks like: “go.grupz.com | yes”
This wouldn’t be super-helpful would it? That’s why we add the “:formatted as text” operator. This lets us control how “yes” and “no” values are presented. So for example, we could render “yes” as “HTTPS Active” and we could render “no” as “HTTPS not supported”.
Again, that’s overly verbose for a dropdown menu, so perhaps we’d just throw up an emoji like the lock icon. And that’s what I did here.
Drilling down into the expression (clicking the “:formatted as text” part), we see:
And you can see that I render “http is yes” as the lock emoji followed by a space and a pipe character.
For “http is no” I left the field blank (so it’s the return value is just going to be null, nothing, empty, nada, zilch, zip… it won’t take up any space).
Moving on, there are two more expressions like this – both of them are boolean expressions followed by the “formatted as text” operator:
Current option's active:formatted as text: This is just like example 1. And what i did is just return thumbs up emoji for yes and thumbs down emoji for no.
Current option's type is "USER":formatted as text: This is a little more interesting. The “type” value returned from this API is a string with various values. If the domain is a user-created one, it has the value “USER”. If the domain is a built-in one, it has the value “SYSTEM”. There may be other values as well. (Who knows? Not me. Who cares? Not us… this is just an example.)
Now, a string (“text” in Bubble parlance) isn’t a boolean value of course. But a text can be used in a boolean expression. The expression Current option's type is "USER" evaluates to a boolean value. (Duh, right? The string object type contains some string value. If that value is “USER”, this expression will evaluate to yes. If that value is anything other than “USER”, this expression will evaluate to no.)
So now we have another yes/no thing that we can reformat to our liking using :formatted as text.
HERE’S THE INTERESTING PART: You can nest :formatted as text operators inside of these Boolean Formatting dialogs. So we can do this:
Now, if type has the value “USER”, we are going to print out the “user”/“silhouette” emoji. If type DOES NOT contain “USER”, we are going to evaluate YET ANOTHER condition:
Current option's type is "SERVICE"
… and by appending the :formatted as text operator, I have access to yet another Boolean Formatting dialog. By clicking here (red circle):
… we get a place where we can define what should happen if type is “SERVICE” and also what should happen if type IS NOT “SERVICE”:
… and you can see that we will return the gear emoji for “SERVICE” and the big red question mark emoji is the value isn’t “SERVICE”. We could have just as easily chosen to return some other text expression, like Current option's type (that is, if the type is neither USER nor SERVICE, just print out the value itself). Further, I could have gone deeper down the rabbit hole and evaluated for other known values of type, but I think you get the idea.
What all of this does is as follows: In run mode, here’s how my dropdown options look:
We see the domain name, an icon indicating whether the domain supports https (all of them do), an icon indicating whether the domain is active (all of them are), and what type of domain this is (2 “user” domains, 1 “service” domain).
This is just an example. And again, this technique is not specific to dropdown options. You can (and should) use this type of expression evaluation in any expression field where you can put a text.
