Outerbase Card Plugin: A responsive, editable plugin

A card plugin? Yes, for Outerbase.

Introduction

Before delving into the fascinating world of plugin stories and features, allow me to provide you with a concise introduction to the platform for which this plugin has been tailor-made.

Meet Outerbase, a platform that offers the remarkable service of Database as a Service (DaaS). What truly sets it apart is its groundbreaking concept known as the "Interface for your database." Yes, you read that correctly. Outerbase revolutionizes the way we visualize databases, offering a diverse range of options, including charts, graphs, and bars, all presented in an incredibly user-friendly manner. Gone are the days of struggling to create a separate system solely for enhancing data visualization; Outerbase takes care of this seamlessly. What adds a captivating twist to this tale is the freedom it grants you; you're not confined to Outerbase's provided interface. In fact, you have the power to craft your very own interface and seamlessly integrate it. This is precisely what we'll be exploring in this article. So, fasten your seatbelts as we embark on a journey into the world of Outerbase plugins and the myriad possibilities they offer.

TLDR; WATCH THE DEMO

Outerbase Plugin

Outerbase boasts a plethora of features, but for the purpose of this article, let's zero in on the exciting realm of plugins. Plugins, in essence, are tools or programs that can be seamlessly integrated into the Base table (for clarity, think of the Base as the name for your database in Outerbase). They serve as instrumental additions that bolster functionality, introducing extra features, and enhancing the overall user experience. If you're curious to dive deeper into the concept of plugins, you can find more information here.

In the following sections, I will delve into a particularly useful plugin that I have personally crafted for an Outerbase table. This plugin not only showcases the versatility of Outerbase but also demonstrates how it empowers users to tailor their databases to their specific needs. So, without further ado, let's explore the world of this innovative plugin and its potential to transform your Outerbase experience.

Card Plugin

Card plugins are undeniably appealing and stylish. However, their utility can be significantly enhanced when you have the freedom to edit them just like you would with a conventional database table.

A card plugin is a powerful addition that transforms your database, transitioning it from the traditional tabular format into visually engaging cards, as illustrated in the image below. What sets the card plugin I've developed apart is its unique blend of aesthetics and functionality. It not only delivers the eye-catching card design you desire but also offers full editing capabilities. This means you get the best of both worlds—a visually appealing layout and the flexibility to modify your data seamlessly.

Problem Statement

The case for using this plugin becomes evident when we consider the following key points:

1. Enhanced Visual Appeal: This plugin transforms your database into visually appealing cards, providing a fresh and engaging look that differs from the traditional table format.

2. Seamless Editing: While card layouts look great, changing data often requires a shift back to the standard table view, which can be inconvenient. This plugin allows users to edit their database properties while staying in the card view, simplifying the user experience and improving efficiency.

Features of this card plugin

1. Search Bar: Easily find card items using a built-in search bar.

2. Card Quantity Selector: Choose how many cards you see at once with a simple select list.

3. Edit Cards with Ease: Double-click on images or text within the cards to make quick edits.

4. Navigation Buttons: Navigate through cards effortlessly with next and previous buttons.

5. Sleek Responsive Design: Enjoy a user-friendly and visually appealing layout that adjusts to different screens.

How to use the card plugin

Log in to your Outerbase account. If you don't have one, create an account here.

Connect an existing database or create a new one. It's simple to do. If you want a guide on how to connect/import an external database, then refer to this article here.

Install the plugin as a custom plugin. You can do that on the marketplace page.

After installation, navigate to your Base table where you want to apply the plugin. On the top-left corner Click on the icon with a dropdown, then choose Editable card plugin.

Set your configuration and save.

And welcome to your card layout.🥳

From the above image, you can already see some visible features.
Configure Plugin button: This button provides an interface to configure how your card looks.
Show entries select option: This option allows you to select the number of cards you want to view at a time.
Prev and Next buttons: Use these buttons to navigate between pages. Currently, Outerbase limits the view to 50 rows per page. So, if you have a Base table with more than 50 rows, these buttons will be useful.
Search bar: Use this bar to search for a specific item in the cards or a group of items.

Repo link: To use or test this plugin you can access the source from here: https://github.com/victornwakpa/outerbase-editable-card-plugin

Conclusion

This article serves as a preview and introduction to the plugin, with a more in-depth article about the code architecture coming soon. For those interested in exploring the plugin further, the source code on GitHub is well-documented and designed for ease of understanding.

Outerbase is an incredibly valuable tool, offering a superior, more straightforward, and efficient method for visualizing your database. It empowers you to create custom visuals effortlessly, as exemplified by the development of an editable card plugin.

I'd like to express my heartfelt gratitude to Hashnode for hosting this hackathon and to Outerbase for providing the platform on which I could build this product. Over the past few weeks, my learning has experienced a significant boost, as I needed to acquire additional knowledge to thrive within the Outerbase environment.

I also want to extend my thanks to the Outerbase community for their unwavering support. The Outerbase Discord server has been one of the most welcoming and helpful communities I've had the pleasure of being a part of.