Managing UI Widgets

To create a widget

1. Sign in to your Rocketadmin account.

2. In the Dashboard click on a connection to open it:

   

3. Click on and then on UI Widgets:

   

4. On the subsequent screen click on Create UI Widget:

   

5. From the UI Widgets settings you can:

   • select a Field (table column)

     ---

     

   • based on the database type of the field, choose the appropriate Display type:

     ---

     

   • provide additional information (in case the settings are required):

     ---

     

   • assign a different or more descriptive Display name to the field:

     ---

     

   • include further information (Display Description) to be visible on mouse over:

     ---

     

6. Save your changes.

7. You can review the new settings once you open a record to edit:

   ---

   

   ---

   Moving the mouse over will display the description:

   ---

   

Widgets with required settings

The following field types provide additional options that you can configure:

Boolean

// Display "Yes/No" buttons and specify "allow_null" in field structure:
// Use "false" to require that one of the buttons is selected
// Use "true" if the field might be left unspecified

{
	"structure": {
		"allow_null": false
	}
}

Example:

---

---

Textarea

You have the option to restrict the text visibility to a specified number of rows (lines). The remaining text can be reviewed by scrolling down.

// provide number of strings to show.
{
  "rows": 2
}

Example:

---

---

Select

You can connect column values to specific words (and/or add emojis) that hold more meaning, allowing you to imitate a selection from the available choices.

// provide array of options to map database value (key 'value') in human readable value (key 'label');
// for example:
// AK => Alaska,
// CA => California

{
  "allow_null": false,
  "options": [
    {
      "value": "FR",
      "label": "🇫🇷 French"
    },
    {
      "value": "IT",
      "label": "🇮🇹 Italian"
    },
    {
      "value": "DE",
      "label": "🇩🇪 German"
    }
  ]
}

Example:

Before applying the Select widget:

---

After the widget is configured:

---

---

---

Password

Using this widget, you can encrypt your password fields and conceal them with asterisks.

// provide algorithm to encrypt your password, one of:
//sha1, sha3, sha224, sha256, sha512, sha384, bcrypt, scrypt, argon2, pbkdf2.
// example:

{
  "algorithm": "sha224"
}

Example:

Before applying the Password widget:

---

After the widget is configured:

---

---

In edit mode the password remains hidden (it simply shows as an empty field). In case you want to delete it, mark the option Clear password:

---

Code

You can highlight and indent your source code fields with the help of this widget.

// provide language of code to highlight: 'html', 'css', 'typescript', 'yaml', 'markdown'
// example:
{
  "language": "php"
}

Example:

Before applying the Code widget:

---

After the widget is configured:

---

---

Image

The Image widget enables you to see a preview of the pictures whose URLs are kept in specific table fields. Additionally, you can configure the pictures height:

// provide image height in px to dispaly in table
// example:
{
  "height": 100
}

Example:

Before applying the Image widget:

---

After the widget is configured:

---

---

Foreign key

This widget is designed to help you mimic the Foreign key concept for non-relational databases. You need to add the values of the following parameters - column_name of the first table which you want to link to the referenced_column_name of the second table (or the referenced_table_name):

// Provide settings for foreign key widget
{
  "column_name": "Artist_id", // copy the name of the column you selected
  "referenced_column_name": "Artist_id",
  "referenced_table_name": "Artists"
}

Example:

Two NoSQL tables - Artists and Paintings, are supposed to be "linked" by the column Artist_id:

---

However, in Rocketadmin this relationship is not established automatically and therefore you cannot display the related record by clicking on an Artist_id:

---

You need to configure the Foreign key widget for the Paintings table as follows:

---

After that, you will be able to click on an Artist_id value and review the linked record on the right side panel:

---

To delete widgets

You can remove a single widget by clicking on the icon next to it or delete all the widgets at once by clicking on Clear All:

---