DEV Community: Atomic Fusion

How to show only last 4 digits of credit/debit card in Bubble app development

Atomic Fusion — Fri, 07 Oct 2022 11:31:57 +0000

One of the most common setups while building apps/websites is to have payment methods set. But, how does one do this, if the end goals require one to look like the image below:

Here’s How to do it with Mangopay through Bubble API connector

MangoPay provides an endpoint to which you could connect - Card Object endpoint. This Alias parameter will return a partially obfuscated version of the credit card number as a string.

On the design side, you just look it up and display it as in the image itself and can use it in the workflow as something like the result of the step and get the alias :truncate from end to and write it to the current user.

Here’s an example of the UI side: https://atomicfusion.io/asset/text-credit-card-last-4-94100?view=explore

You can also do it with Stripe via the API connector

Stripe does it in a similar way. You could use the API connector to make an API call to Stripe’s Retrieve a Card endpoint. It returns a JSON object containing a field with just the card’s last 4 digits, so you can use them in your UI as required.

It’s way easier to use a plugin that does this for you since it requires you to pass the customerID and the cardID while making this API call.

Here's the link to the thread - https://forum.bubble.io/t/how-to-show-only-last-4-digits-of-credit-debit-card/225139/3

Hope this helped. 🔓

The best way to average out different data fields on Bubble

Atomic Fusion — Wed, 05 Oct 2022 09:46:29 +0000

Have you ever tried to average out different entries from a list in your Bubble app development? This is one of the recently discussed threads on the Forum. Let's take a closer look at the problem statement.

Assume you're making a scorecard with different categories - Math, English, Science, Economics. The goal is to find the average of the scores of these different categories.

Let's see some tried solutions:

One approach could be to add a new field (list of numbers), add each number of the categories to this list, and then average the list.

But, if there are two of the same numbers it would only add that number once, as duplicates can’t be added through Bubble’s “:plus item” operator and this would break the average.

In addition, adding all the different fields one by one to the list can take a long time.

There has to be a better, easier, and quicker solution to do this.

Using the :Group by operator for complex averaging

What if have a list of things with number fields as well as a category field and you want to calculate averages for each category. What do you do then?

Well, it’s actually quite straightforward with the ‘:Group by’ operator. It essentially breaks your list of things into smaller lists based on the Grouping (grouped by ‘myCategory’ here). ‘:Group by’ has an inbuilt option to categorize the list of things being grouped and also run a simple operation like an average or sum on each group that gets generated.

So what it eventually gives you in this case is a list of averages of each category as numbers. It could be quite a bit to grasp the first time, but it’s super handy once you get comfortable with it!

More things that can be tried out

You can try adding a unique identifier with a delimiter and then split out the list by the delimiter when you want to use it (e.g. right before you do your average). This should save you from adding all the different fields to the list one at a time.

Or in case your calculation is getting too complex, you could try the Complex Math Expression Calculator plugin 3

Here's the link to the Thread - https://forum.bubble.io/t/average-different-fields/225320/5

Hope it helped. 🔓

Display a list of things in Repeating Group in groups - Bubble Development

Atomic Fusion — Wed, 28 Sep 2022 18:18:41 +0000

One of the interesting discussions that popped up was the around the need to display a list of users in groups on an RG. Some Bubblers were having trouble getting this to work - displaying ‘each cell’s thing’s list of users: each item’s name’ led to the list of names appearing as a comma separated list.

Have you ever experienced a similar situation in your bubble development? If not, do you know the solution for this?

First, let's first understand the problem statement deeper

Consider the case where you are creating a feature that allows users to create their own groups and you want to show all group members in a list. When you try to do this in your repeating group, all the members are displayed together in a single text element. But, you want to show each member in its own cell.

How can one do this? Let's see some solutions!

Solution! 🔓

Here ‘Equipos’ is the group and ‘miembros’ is members.

All we need in the first repeating group to find the equipo’s and the second repeating group to display each miembro within that equipo.

A quick mock up of this (image taken from the Bubble Forum thread):

You could simply create a Repeating Group with the type ‘Equipos’ and add another Repeating Group with data type Miembro in each cell that displays current cell’s Equipo’s Miembros (users).

Alternatively, you could use Bubble’s :grouped by functionality. This lets you organize a list of things into groups based on the properties of each thing. In this case, it would be a list of Miembros (users) :grouped by Equipos. The Field to group by would be ‘Equipos’ with type of grouping ‘Exact’.

In the example below, Orders are being grouped by City.

With the aggregation property, you could also retrieve the count, sim, product or any other basic mathematical calculation on a field of the list of things within each group.

Summarizing how grouping works:
[List] ——group by—→ [Group1’s List] [Group2’s List] [Group3’s List] …

With that, you’ll have a list of users displayed on Repeating Group without showing them together! 💃

For Further reading:

Case insensitive input for search in Bubble app development

Forum Thread 🪄

Hope this helped. 🔓

Case insensitive input for search in Bubble app development

Atomic Fusion — Mon, 26 Sep 2022 13:11:01 +0000

The Bubble has secured one of the finest names when it comes to no-code development. However, from time to time users face certain blockers, and to address such issues we've begun this series of short articles called 'Solutions for Bubble'.

One such issue is the inability to run a case-insensitive database search during bubble development which was also one of the many topics that popped up in the Bubble Forum.

Let's dig deeper into the problem statement

When you want to search for a value using “Do a search for” the filters you set are always case sensitive. Because of this, it cannot find all possible values that share the same characters.

Scenario:

Suppose a user has a Data Type that has a Company Name field. If Microsoft already exists in an entry, then the user would want to disallow anyone from adding duplicate records with the same Company Name.

It is therefore imperative that all variations of the case that a user types into an input field ("microsoft", "MICROSOFT", "MicRosoft") match the value already in the database ("Microsoft").

But how will the user do that? Let's look at the solutions

Leveraging Instant Text plugin ⚡

Instead of waiting for a delay in the standard input, the Instant Text plugin offers immediate feedback to the users and updates the value on the state in real time.

We know storing data in multiple places can put you off but here it really is the easiest way. ⏩

How does it work? 🤔

This solution stores the value in two fields, one for the original display and one that is always lowercase.

But, I don't want to store two values!

If you really don’t want to store two values, you could do the lowercase comparison in an advanced - ':filter operation'. But that would require downloading all of your usernames to the client, which could be problematic.

Note - you can’t do lowercase (or uppercase) comparisons using a search constraint, but you can do it in an advanced :filtered operation. If you want to go that route, we have an upcoming post coming on the same.

Hope this helped. 🔓

Here's the link to the forum thread

Brand-new Style Guides on Bubble

Atomic Fusion — Wed, 21 Sep 2022 06:28:32 +0000

No-code has paved the way without coding for businesses and we're all aware of the shift it has brought to the new age developments.

As innovations occur, the way people perceive technology changes, and the power of using the right tools has gained the importance it has always deserved.

As Freeman Dyson quotes -
“There is great satisfaction in building good tools for other people to use."

Bubble is one of the most powerful no-code platforms for developing digital products, to ease and accelerate development Atomic Fusion will help bubble developers organize what they build. 🚀

What is Atomic Fusion

Atomic Fusion is a chrome extension and a solution that helps you to create, save and share styles, designs, and code snippets with other visual developers easily on Bubble. ⚡

If you develop your application with Bubble, this is one tool you must know about. Among it’s various other features, this article will focus on the newly added feature - ‘Style Guides’.

Let's take a close look at the advantages it brings to the table and how you can use it to accelerate your Bubble development process.

Exploring the Style Guides

Exactly as they sound, Style Guides are a collection of Styles and Components that help you set your Bubble App up according to the chosen Style Guideline. 🥳

It is now easy to bring a website's vision to life with Atomic Fusion. By taking care of the variety of aesthetics, Style Guides will have something for everyone.

Among many, the very first featured style guide is Monochrome. Let's explore further the guide and how you can use it on your website.

Monochrome

The first Style Guide in the Library is ‘Monochrome’ - A sleek black & white style to make your App look elegant and minimalist. 🤌

Here's a sneak peek of the look and feel of Monochrome ⬇️

Also, in addition to Style guides, users have the Block Components section of the extension. You can find components that follow each Style Guide and copy/paste them into your own apps.

if you’re wondering how to use these components, we have a detailed guide ready for you.

Building Bubble Pages in minutes with Block Components

How to use Style Guides

You can use the Monochrome Style Guide in 2 simple steps. Make sure to have Atomic Fusion's extension before you start executing the steps:

In the Chrome Extension, navigate to Library and click Style Guides. Now open a Style Guide and click 'Fork as Repository'. This will appear under the 'Repos' section in the My Forks section of your Extension. ✅
The Style Guide preview page with all the elements set up can now be copied into your App from Repos in My Forks and can be used as needed. ✅

With that, you’ll have the chic Monochrome design in your toolset. 💃

Making your dream WebApp aesthetic a reality is now way easier with a style guide. 🤌

Enhance your Bubble development experience with the Atomic Fusion extension. 🚀 Here’s a video explaining this feature:

Introduction to Style Guides - Rapid Bubble App development

Accelerate your Bubble Development

Atomic Fusion is the Bubble Developer Hub to create, save and share styles, designs, and code snippets with other visual developers easily. Sign up to accelerate and enhance your Bubble development.

Count me in

Until next time, keep building! 👨‍💻

How to use Styles in Bubble.io

Atomic Fusion — Tue, 06 Sep 2022 12:53:36 +0000

Visual developers would know that designing a customized Bubble app can be a long and tedious process. But don’t worry, it doesn’t necessarily have to be that time-consuming!

By simply pre-setting styles in your Bubble app, you can automatically apply your global design choices to elements while you put them on your pages.

Let’s look at how you could go about doing that.
Part 1: How do Styles in Bubble help With Faster App Development?
Part 2: Pre-setting Styles in Bubble
Part 3: Using Styles Step by Step
Part 4: Final Guideline!

Let's begin! 🚀

Part 1: How do Styles in Bubble help With Faster App Development?👩‍💻

Bubble lets you set some general styles for your elements, which leads to a faster design process. It’s very easy to use and makes your app development way faster.

If you’ve noticed, each new Bubble application you start comes with a set of default pre-set styles.

But, we all know Bubble’s default styles aren’t the best, but there’s a nice way to modify them globally and apply them to all your elements. Pre-setting styles will let you organize your app design more cleanly.

You’ll only need to modify the style once for all the elements to be restyled accordingly. The good part is that it can also save some space in your app, which leads to more quick loads as the styling data is shared by all elements that use a similar style.

Part 2: Pre-setting Styles in Bubble 💭
The Styles tab is where you can edit the various global styles in your app. Editing styles are very similar to editing element formatting from the Property Editor — only here, you only need to do it once.

You can define as many styles as you want and apply more different styles to different instances of the same type of element.

When you name them in a way that’s easy to read, you can pick the style that you need for each element quickly.

➡️For example, in case you’re setting up multiple CTA Buttons in your app, you can set the CTA Button style in your Style tab and just assign it to a button element each time you want to create a CTA Button. Easy!

You can define a style in the Styles list by clicking on ‘New Style' or from the style dropdown on an element’s property editor itself.

📝 Note - Remember that when you do so from an element, the current properties of that element will be used as a base for all of the newly created styles. This is particularly useful in visual development when you find yourself using the same design for a few elements but haven’t thought about setting a style yet.

Finally, there are some important things to know about applying & removing styles -
On one hand, as you apply a style to an element, its current properties will be deleted. On the other hand, as you remove a style from an element, the original properties of the style will be copied to that element.

Therefore, when you remove a style from a button for example, you can modify it’s appearance, without affecting the style. To revert back to the earlier style, simply assign it from the dropdown in the property editor. This is very effective and you can always undo such changes.

Where to find good Style options 🤔
If you’re looking for Styles to apply in your Bubble app, I would recommend checking out the Public Styles on Atomic Fusion — these are Styles created and shared by members of our community.

Using Conditions
Don’t worry about the conflict between conditions anymore! It’s possible for you to overwrite a condition that is included in a style at the element level. If the same property is modified, between a style’s condition and an element’s condition, the condition at the element level will win.

Keep in mind that styles are just for the appearance of the element which also includes any appearance changes that happen under conditions. So, you can add conditions to styles but, they’re only related to appearance properties. Nothing involving elements, input values, or workflows.

Part 3: Using Styles Step by Step🪜
Anytime you add an element to the page, the Bubble usually applies a default style that comes with your application. It’s typically labeled as “Standard Button” or “Standard Text”. You can easily change the style from the Styles dropdown on the element’s property editor.

There you can see the Bubble app presets and access/assign any styles that you create -

1. Remove the Default Style 🛑
You can create styles in a couple of different ways. First, you’ll need to remove the default that has been applied or if another style of yours has been applied. Then, the property editor understands that you want to assign ‘inline’ or individual styles to that element and a couple of more styling options will normally appear for you.

Now, you can change the color, font size, text format, etc. You can also search by name to find and edit an existing style. Simply type the name of an existing style, such as “Standard Alert,” in the Styles dropdown to find and edit it.

2. Apply Theme 🧑‍💻
Secondly, you can add a visual identity to your application. Bubble offers some themes to choose from including Standard, Dark Theme, Material Design, TODC Bootstrap, Twitter Bootstrap, or Dark, Flat, or Rounded UI.

Applying one of these themes to your app will overwrite your bubble app’s predefined styles with various colors, angles, etc. It will help you find a visual identity for your visual development.

3. Choose The Element Type
Choose a type from the dropdown list, like Alert, Group, or Repeating Group. So that you can return the existing styles for that element later.

4. Make This Style The Default 👯
When you create a new style, any new elements of this type will automatically come up with this style rather than the predefined styles that come with your app if you select this. You can assign a default style for each type of element.

5. Add a Style 💃
When you finished designing your new style, you can go back to the style dropdown at the very bottom of the element’s property editor and create a new style right from there. Remember to give it a name that is as descriptive as possible so you know exactly what you’re selecting.

Moreover, when you’re creating a style, you can even change elements that would be applied.

You’ll need to choose a name and element type, such as “Custom Alert” for “Alerts.” Once you define this style’s properties, you can simply apply this style throughout your bubble app in that element’s property editor section. You can also copy styles and inline formatting from existing elements on your page and set them to other elements.

If you’re using Atomic Fusion, you can even copy styles from your Repositories or Forked Styles and paste them right into your Styles tab. That’s a great way to organize Styles across projects.

Part 4: Final Guideline!🗒️
Of course, you have your entire style section of your editor to manage everything from all styles to all element types. I highly recommend you use styles in your visual development.

Not only it will make your app cleaner and more optimized on while rendering but it also keeps you moving through your design a lot faster.

You are giving bubble app less work to do by applying single styles to multiple elements rather than giving every single thing its own inline appearance properties. It will keep your application more uniform and consistent, while allowing you to easily make styling changes to the UI across your app. 💃

We hope this helps you build your application faster! 🚀

Check out Atomic Fusion- The Bubble Developer Hub to create, save and share styles, designs and code snippets with other visual developers easily.

Coming up next - How To Turn Your Bubble io no code App into a Mobile App in Less Than 5 Minutes