Get started with: UI Widgets
Admin panels come in many shapes and sizes, but they all share one thing.
They let you visualize your data in new and improved ways, turning them from simple, disjointed strings into a more cohesive whole.
This is beneficial for both admins and users, the latter in particular needing data presented to them in a more digestible way.
Of course, just visualizing data would not be enough. A simple spreadsheet can do that.
Instead, why not augment it?
Why not visually extend and tailor the functionality of all your different data types?
Need an example?
Here’s an example
Let’s say you’re an HR agency, a technical support team, or a medical facility that needs to keep track of a certain number of users.
This, of course, would include a wide variety of data related to them.
Names and email addresses are fine on their own, but what if you could also visualize profile pictures?
And if they have phone numbers, countries of origin, or salaries, why not visualize that in a better way, too — through area codes, emojis, currency symbols, and more.
All of this and more is possible with widgets — which we call UI Widgets. A UI Widget can also be used to change a column’s name or add a description that appears during editing.
But for all their simplicity and ease of use, there’s a lot of depth when choosing different options.
What’s on offer?
As of the time of writing, we currently support 23 different UI Widgets, with more already on the way, and even more coming down the line.
By the time you read this article, we’ll probably have new ones up.
While some need a few lines of JSON, others don’t require user input and are automatically applied. Please do note that only one UI Widget can be used per field.
Either way, they’re very easy to use, so there’s no need to worry.
Additionally, all the UI Widgets that require user input link directly to our technical documentation, so you’ll never feel lost.
With that in mind, here’s everything you can do on the platform right now.
Default
Every field has a Default component applied to it. While not a UI Widget in itself, Default will determine and apply the most appropriate UI Widget type automatically. This happens by scanning your field, but it all takes place on your end — none of your data gets sent to an external server.
Of course, there are limitations — we can only map standard database types. For example, country codes and phone numbers need to be set up manually in order to be visualized properly.
No user input needed
Foreign_key
Relational databases use foreign keys to link to other tables, but non-relational databases can’t.
In order to simplify this process, the Foreign_key UI Widget allows you to emulate the foreign keys feature and set up connections in the same way.
Readonly
Some fields are sensitive enough that you wouldn’t want a user to mess them up by accident.
For this reason, the Readonly UI Widget lets users only see the information inside a field, but not change it.
No user input needed
Boolean
For our case, a boolean simply refers to a true/ false statement.
This UI Widget creates a Yes/ No question that users will be required to answer before a setting can be saved.
This also appears in the table in the form of a checkmark or a cross denoting your users’ answer.
String
Any piece of text can be stored as a string.
Most of the time, we can automatically detect a string from, say, a number. Sometimes, however, Rocketadmin can incorrectly identify a field.
This UI Widget is primarily used to override а field’s data type in these cases.
No user input needed
Code
Allows you to turn your code snippets, configuration files, and indexes from a simple string to actual code.
Moreover, you can edit them directly, complete with syntax highlight editing, indentations, validation, autocomplete, and more.
For JSON data specifically, we suggest using the dedicated JSON UI Widget below.
JSON
Similar to Code, this UI Widget also features extensive editing options, but equipped specifically for use with JSON.
No user input needed
Select
Allows you to replace a predefined value with another, more user-friendly one.
For example, if you’re managing a set number of rooms in an office building, room “B4” can automatically be turned into “conference room” for each instance in your table.
Additionally, predefining a set number of options allows users to choose between them from a dropdown list.
This is a very powerful feature that allows you to customize your fields and how your users interact with them in a truly meaningful way.
Password
Allows you to hash specific fields — such as passwords — with various different protocols, keeping them safe.
Unlike encryption, fields like passwords or other sensitive data should never actually be decrypted, so a hash is a much better way to make sure no one — not even you — has access to that data.
Image
Headshots, landscapes, promotional material.
Any images can be visualized right in Rocketadmin.
By linking an image’s URL, you can easily display it in your table.
This is one of two UI Widgets that allow you to hide the prefix and only visualize the slug, along with the URL UI Widget below.
Number
Most numbers in a string format would fall under this category.
The Numbers UI Widget also supports units of measurements like length, size, time, and more — without the need to configure them yourself.
This can be configured in the JSON file.
URL
Automatically makes URLs into clickable hyperlinks.
This is one of two UI Widgets that allow you to hide the prefix and only visualize the slug, along with the Image UI Widget above.
Date, Time, and DateTime
These three UI Widgets share the same DNA, so we’ve grouped them together for convenience.
Date provides a simple date picker that displays the selected date in your table.
Time provides a time picker that displays the selected time.
DateTime combines both functionalities of the Date and Time UI Widgets.
All date and time formatting is automatically pulled from your browser’s settings.
You can also set up these UI Widgets to also show an interval from a specific point in time. For example, “two days ago.”
Textarea
Allows you to set a default number of rows for displaying text in a given field.
The text box can be additionally expanded by users by clicking and dragging.
Country
Functions similarly to the Select UI Widget, but with an already populated list of all countries, country codes, etc.
As of the writing of this article, only the ISO 3166-1 alpha-2 standard is supported.
Phone
Parses a string into a phone number, automatically visualizing standards and codes for individual countries.
Money
Converts numbers into a price — complete with currency symbol, choice of decimal placement, and negative values.
Color
This UI Widget includes the visualization of different colors, as well as a color picker.
Currently supports Hex, RGB, and HSL values.
Range
Allows you to set the interval between two values.
For example, you can select a span of 1 to 5, 1 to 10, 1 to 100, or any other pair of endpoints.
This can additionally be interacted with using a slider, and you can even set the amount of steps the slider moves within your set range.
UUID
Only tables which have a primary key associated with them allow you to edit rows.
The UUID UI Widget generates a unique identifier that can be used for your IDs. For example, if your database doesn’t support UUIDs natively, you can use this UI Widget to force UUID functionality.
You have the option to do this on Rocketadmin’s side, or you can generate it inside your own database.
You can change the standard being used, as well as the UUID version. The “namespace” and “name” settings are only relevant for v3 and v5.
Just try one
It really is as straightforward as choosing a column, quickly setting up a UI Widget, and starting to use your admin panel in new, better ways.
UI Widgets are both very simple and very powerful ways to interact with your data and expand its functionality, so we’ve made sure that they’re as approachable as possible.
With UI Widgets, you can enhance not just how your data looks, but what it actively does — all without needing to make changes to your actual database.
By the time you read this, we’ll probably have even more stuff up, so you’ll never run out of ways to interact with your tables.
So, why not give it a try?
Every column you have already uses the Default UI Widget, so if anything in this article catches your eye, we hope you’ll give UI Widgets a shot.
Happy tweaking!