Build Your Admin Panel Without CSS or HTML
5
April
2021
Tutorial

Build Your Admin Panel Without CSS or HTML

Build Your Admin Panel Without CSS or HTML
Adeyinka Adegbenro
0
 minutes ↗
#
javascript
#
html5
#
css
#
tools
Tutorial

An admin panel usually refers to the set of tools available to the administrator of a web application for overseeing the app. The administrator is usually an owner or superuser who has permission to create, edit and delete certain components of a web page normally hidden from a regular user. The admin panel usually provides all the settings and tools used for system administration.

It’s not uncommon for web apps with sophisticated, complex, and beautiful user interfaces to have pretty bland admin panels. This is because the admin panel is hidden from the app's primary users and usually isn’t considered a priority. They’re also not very much fun to build because of the amount of repetitive work that goes into creating one.

In cases like this, developers would benefit from a tool that makes the process of building an admin panel easy without the need to write code. This would of course drastically reduce the amount of time and number of developers needed to work on building the admin panel. This is where Appsmith comes in.

Appsmith is an open-source framework that helps developers build dashboards, workflows, pages, and CRUD apps with little to no code. You can connect to APIs or databases like MongoDB, PostgreSQL, or MYSQL, as well as get access to charts, widgets, and other customization tools for building a UI.

In this article, you’ll learn how to set up Appsmith locally. You’ll create a new application, connect an API to it, and build an example admin panel using widgets and pages.

Getting Started with Appsmith

To begin, you'll need to sign up for Appsmith (it's free!), if you don’t already have an account. You can also deploy a Docker image on a server. For the purposes of this tutorial, you’re going to create a local instance of Appsmith using Docker.

  1. Read the instructions here to set this up for your operating system.
  2. Visit localhost in your browser to see the local version of Appsmith.
  3. Create a local account to log in.
  4. Click Create New to create a new application and name it Posts Admin Panel. This takes you to an empty workspace with a sidebar.
  5. On the sidebar, you should see items like Pages, API, and DB Queries in a folder-like structure. Under Pages, a new page, Page1, already exists. Rename it as All Posts.
Creating an application in Appsmith

Connect to a Data Source

To work with Appsmith, you need a data source. This can be in the form of an API or a database. Appsmith supports MongoDB, MySQL, and PostgreSQL among others.

  1. Make a connection to a database by clicking the plus icon near DB Queries on the sidebar under a page.
  2. Click New Datasource to see a list of different database options.
  3. Select your preferred database option and provide the relevant configuration details required to connect to your database server. As for connecting to APIs from Appsmith, you can hit any REST API endpoint available on the internet.

For the purposes of this guide, we'll connect to a fake API service called JSON Placeholder.

  1. On the sidebar, under All Posts, click on the plus icon near APIs. Click Create New, and you should see a new API page.
  2. On the upper left corner, change the API name from Api1 to all_posts and paste https://jsonplaceholder.typicode.com/posts as the URL.
  3. Click RUN to test run the API. In the Response Body section, you should see some data. This is the data you’ll display on the All Posts page in the coming section.
All Posts API data

Create the First UI View

Go to the previously created page All Posts. On this page, you’ll display a list of posts on a table using the Table Widget.

  1. Add a table to the page by clicking on the plus icon near Widgets.
  2. Drag and drop Table to the page workspace.
  3. Click the gear icon to configure the table.
  4. Change the table name from table1 to post_table.
  5. In the Table Data section, erase the dummy data and paste {{all_posts.data}} into it. This will pull data from the all_posts API you set up in the previous section.

Now you should see all of the posts on the table, with their respective columns and rows. The table comes with filtering, pagination, sorting, and a search bar.

Table with All Posts

Next, add a button that will create a new post. Once the button is clicked, you want it to open a new page that contains a form for creating a new post.

  1. Drag the BUTTON widget to the bottom of the table and label it Add New Post.
  2. Click the gear icon of the button, in the ACTIONS section.
  3. Click the onClick dropdown and choose Navigate to. The Page Name box should appear.
  4. Type in New Post as the page name.
Placing a button under a table in Appsmith


Create the Second UI View

In this section, you’ll create a New Post page.

  1. Create a new page and rename it New Post.
  2. Go back to the All Posts page. You should notice that clicking the Add New Post button takes you to the New Post page. On this page, you’ll create a form that can be used for adding new posts.
  3. Drag the Form widget to the workspace.
  4. Rename the form text Create Post.
  5. Click the gear icon on the form and change the name from form1 to new_post_form.
  6. Add a Text widget and label it User ID:.
  7. Drag the Input widget in front of it and change its name from input1 to user_id.
  8. Set the data type as Number and toggle the Required checkbox as checked.
  9. On the next row, add a Text widget and label it Title:.
  10. Drag the *Input widget in front of it and rename it title.
  11. On the next row, add a Text widget and label it Body:.
  12. Drag the Rich Text Editor widget in front of it and rename it body.
A completed form on Appsmith

CRUD Records in UI

In this section, you'll see how to configure the application to add and delete records using the fake API.

Adding Records

The form has two buttons at the bottom that controls how the form works:

  • Reset clears the form of filled-in data.
  • Submit is meant to handle the submission of the form.

To configure Submit to submit the form data, follow these steps:

  1. Click the gear icon on Submit.
  2. Go to the Actions section.
  3. Select onClick and choose the action Call an API.
  4. Select Create API. This takes you to the API interface.

Define the API that adds posts in this section by doing the following:

  1. Change the API name from Api1 to create_post.
  2. Change the method from GET to POST and paste the URL https://jsonplaceholder.typicode.com/posts.
  3. On the Body tab, define the JSON that will be sent to the fake API:
{
"userId": "{{new_post_form.data.user_id}}",
"title": "{{new_post_form.data.title}}",
"body": "{{new_post_form.data.body}}"
}

In the above sample, new_post_form refers to the form you created in the New Post page, while .data refers to the form's filled-in values.

Appsmith allows you to access all the data on the form by referring to the widget's unique name. To see the data being sent:

  1. Go to the new_post_form, fill in the table with data, and submit it.
  2. Navigate to _New Post > APIs > createpost on the sidebar.
  3. Click the Request tab. You should see the last sent request body and how the data variables previously defined are now substituted with the real values you just entered when you submitted the form.


A create_post request

You've now configured the form's Submit button to call the create_post API when the form is submitted. You can also define the action to take after submission. To do this:

  1. Go to the New Post page and click the gear icon on the Submit button.
  2. Click onSuccess.
  3. Select the action Navigate to.
  4. In the page box, type in All Posts. This means that when the form submission is successful, you want the page to redirect to the All Posts Page.
  5. Test this by filling in the form with data and submitting it. The page should redirect to the All Posts page.
Settings for the Submit button

Delete Records

To demonstrate how to delete a post using the Appsmith tools, go to the All Posts page and add a Delete button to the last column of the post_table:

  1. Click the table's gear icon and click Add a new column.
  2. Rename the column Action.
  3. Click the gear for the new column and change the Column Type to Button. Rename the button label as Delete.
  4. Change the button colour to Red.

Let's define a new API called delete_post.

  1. On the sidebar, under All Posts, create a new API and name it delete_post.
  2. Change the API method to DELETE and paste the URL as https://jsonplaceholder.typicode.com/posts/{{post_table.selectedRow.id}}. {{post_table.selectedRow.id}} refers to the post_table on the All Posts page, while selectedRow.id refers to id of the selected row about to be deleted from the table.
  3. Go back to the post_table settings and click the gear icon for the column Action.
  4. In the onClick section, select the Call an API action from the dropdown and select the delete_post API.
  5. In the onSuccess section, select the action Show message, then type in Post Successfully deleted! in the message box.
  6. Choose Success as the type.
  7. In the onError section, select the action Show message, then type in Failed to delete Post! in the message box.
  8. Choose Error as the type.
The Delete button settings

Clicking the Delete button would send an API request using delete_post and then show the success message.

Of course, the selected post does not really delete since we’re using a fake API. But it does demonstrate how you would configure deletion with a real API on an admin panel.

The delete_post API

Conclusion

You've seen how easy it is to build an application on Appsmith, specifically an admin panel. This guide covered how to create an application and connect it to a database, as well as how to add and delete data. You learned how to build interactive pages, work with widgets, and customize them for your purposes.

Building an admin panel with Appsmith is a fast way to build admin tools. Check it out if you’d like to save your developers time and get internal tools launched faster.


Author Bio: Adeyinka is a software engineer based in Lagos, Nigeria, currently at BriteCore. She loves researching and writing in-depth technical content.

Why You Should be Using Low-Code Apps to Build Internal Tools
30
March
2021

Why You Should be Using Low-Code Apps to Build Internal Tools

Why You Should be Using Low-Code Apps to Build Internal Tools
James Konik
0
 minutes ↗
#
javascript
#
code
#
tools
#
apps

You’ve probably heard the story of the enthusiastic developer who worked night and day for two weeks on a shiny new internal tool, only to find Bob in accounts had built pretty much the same thing in thirty minutes with a no-code app builder or a massive, macro-filled Excel spreadsheet. Bob’s software may not have been as stable, scalable, or pretty, but it was delivered quickly and cheaply.

Situations like these leave developers asking some important questions like, when is the best time to actually build software?

Today you’re going to find out why you should be using low-code apps to build internal tools. By leveraging the speed and cost benefits of the new range of low and no-code tools available, you can use your expertise to deliver applications faster than ever before.

As a developer, low-code apps may seem to take away a lot of the legwork and ownership of your applications. After all, you can’t beat the feeling of building an app from scratch, crafting every feature yourself.

But, the positive side of that is that they can handle the repetitive coding you don’t like, enabling you to focus entirely on refining and delivering your vision as quickly as possible.

Understanding these tools and knowing when to use them will help you to deliver value to your clients and co-workers. It will level up your game.

Today, I’ll tell you what “low-code platforms” are and discuss the pros and cons of using them for internal application development. After reading, I hope you are inspired to try some of them and learn for yourself what they have to offer.

What is a Low-Code Platform (LCP)?

You may have heard the terms low-code and no-code floating around and pictured them as something similar. That’s a mistake. Low-code is not the same as no-code.

No-code apps let you develop applications with no coding whatsoever. That’s great for people with no development skills at all, but it means you’re strictly limited to the features provided for you, usually in the form of a drag and drop interface.

Low-code development still requires code but handles the bulk of the application for you, enabling you to concentrate on implementing the task-specific logic you need. With low-code, you can rely on the platform to deal with common tasks that you don’t need to customize and focus your efforts on the core functionality or differentiated business logic.

What are Internal Applications?

Internal applications are the apps you use within your organization for everyday business. There are all kinds of these. You may have apps for planning your office schedule, tallying marketing costs, or tracking leads and sales.

Studies suggest an average of eight apps are used by a typical enterprise employee every day. In larger organizations, there can be hundreds of internal tools used by various departments.

In the US alone, companies spend around $300 billion per year on internal apps. Building and maintaining those is a lot of work, so anything you can do to make it quicker is a plus.

Reasons to use Low-Code in Internal Applications

There are many advantages to using low-code apps for your internal tools and applications.

Speed

First, it’s typically faster to develop low-code applications than traditional software. With much of the application built quickly using visual tools, and common features added at the touch of a button, it takes much less time to get up and running. Research suggests a 50-90% decrease in development time compared to traditional applications.

Tools like UI Bakery have a whole set of templates you can use to get started, so your app gets some structure from the beginning. You just have to adjust it according to your specific needs.

Cost

Since low-code apps are quicker to develop, they are usually cheaper because the biggest cost of a software project is developer time. While you may pay a monthly fee to the toolmaker, it rarely eclipses the thousands of dollars per month that each developer on your team is paid. This cost argument is especially helpful if your management team needs persuading. Show them the figures and see their faces light up.

An Appsmith screenshot, showing a database query and some code guidance

Maintenance

The built-in features that low-code apps include will be updated along with the platform. That saves you from having to do maintenance. If you need a security fix or need to accommodate an API change, you can just build your app using the latest iteration of the software, and all should be good.

Being able to integrate quickly with other platforms is also a big plus. Many low-code apps let you quickly share data with other software. This could include Zapier, Airtable, Discord, or a whole host of other applications. Integrating with these yourself can take time, so being able to do it with a few clicks can save you a lot of headaches.

Rapid Iteration

Returning to the speed point, if you’re not sure which service to work with, low-code apps can let you make changes so quickly it becomes cost-effective to experiment until you find a service that fits what you are trying to build.

This rapid iteration allows you to take risks and improve your app through trial and error on a scale that would be much more expensive with traditional development.

It also makes low-code solutions ideal for prototyping. You can test out the basic functionality of a new idea, then shift to building a full application if you like it, and want to take full control.

Building things, using them, and improving them is a virtuous circle and participating in it is its own reward. If you like making things, you can do so quicker with low-code applications.

Support

If you do get stuck while building a low-code application, you can take advantage of their support offerings. While these vary depending on which tool you choose, most platforms will at least offer support forums that are more focused and friendlier than Stack Overflow.

The level of guidance can also make low-code perfect for newer developers. If your senior developers are all working on customer-facing products, you might be able to deploy some of your more junior engineers to work on low-code apps meant for internal applications.

Fun

Finally, developing low-code apps quickly is a lot of fun. Most developers look forward to building and crafting their ideas and are less keen on the accompanying drudge work involved in many long-term software projects.

"I'm having a lot of fun playing with @roamhacker's smartblocks

A low-code tool in my second brain 🥳
— Samuel Bars 𐃏 (@samuelbars) December 11, 2020

Low-code applications let you focus on the core experience. If you really want to customize the rest, there’s nothing stopping you from using what you’ve built as a starting point for a full project in another language.

Happy developers can realize their ideas quickly and can learn more in the process. The big picture experience that comes through working on multiple projects can also be acquired faster.

Limitations of Low-Code Platforms

So, how about the drawbacks? There are a few, and you need to be aware of them when picking a technology to use.

Limited Scope

The key limitation with low-code platforms is that they can’t do everything you can with regular code. Having things done for you is great, but if you want to deviate from what’s offered, you might not always be able to.

You’re effectively working in a box. It may be a nice box, but there’s only so much you can do inside it. As low-code tools improve though, the boxes are getting bigger and better.

Generic Feel

Drag and drop components might look great but have a cookie-cutter feel. If you want to make your UI look distinct or offer functionality that is tailored to your needs, not all low-code tools will work.

The same goes for integrations with other tools and platforms. You’ll get a fixed set of available options, which can be added quickly and easily. When you want to move beyond those, you might not have the option, or you might have to build the integration yourself.

Cost

The cost was in the positives too, but you also need to check the cost before making a decision. The goal is to save money, after all.

That can add up quickly if you have a large team and could start to outweigh the cost of building a small app yourself.

Just because low-code is potentially cheaper doesn’t mean you can ignore the business side of things altogether, so weigh your options carefully. Don’t assume it’s cheaper in every situation.

Final Notes

The creativity and problem-solving abilities developers possess can be turbocharged by using low-code apps effectively. If you’re new to this booming area, take a look. You might find yourself hooked. You might also find yourself delivering value to your customers at a rate you didn’t previously think possible.

Appsmith screenshot showing visual controls and colourful animated shapes

A great option if you want to dip your toe in the water is Appsmith. You can sign up in a few seconds, and the tutorial will show you the ropes in a few minutes. After that, you have a drag and drop interface letting you add UI elements quickly, and, of course, you can alter the core behaviour via its code.

Play around with it and see for yourself what these tools can do. The gap between an idea and its realization is getting smaller every day. Take your first steps on the journey. Who knows where it will take you?


Author Bio: James Konik, Uncertain if he's a coder who writes or a writer who codes, James tries to funnel as much of this existential tension as possible into both of his passions but finds it of more benefit to his writing than his software. When occasionally hopping out from behind his keyboard, he can be found jogging and cycling around suburban Japan.

Cover Photo by Luke Chesser on Unsplash

Building an Admin Panel with MongoDB using Appsmith
24
March
2021
Tutorial

Building an Admin Panel with MongoDB using Appsmith

Building an Admin Panel with MongoDB using Appsmith
Vihar Kurama
0
 minutes ↗
#
javascript
#
dashboard
#
mongodb
#
tools
#
code
Tutorial

Many companies and organizations rely on internal dashboards or admin panels that are connected with different data sources. In this guide, you’ll learn how to integrate a MongoDB data source with Appsmith and build creative dashboards.

Building an Admin Panel with MongoDB

Usually, building an admin interface over MongoDB is a time taking process and a lot of configuration has to be made. Also, for database management, schemas and queries have to be maintained on a different platform. While the UI client would be needing one more server. But with Appsmith, you can have everything under one roof and you can build UI within no time. Let’s see how by connecting to MongoDB on Appsmith. Below is a screenshot of how our dashboard is going to look like:

Screenshot

If you prefer a video tutorial, check out our video on How to Build a MongoDB Admin Panel in 5 Minutes!

Connecting to a MongoDB Data Source

Usually, MongoDB clusters are hosted on the cloud. Now let’s connect to one of the example clusters that’s on MongoDB cloud and list out all the data that’s present inside the database.

"The database we’ve worked on is a collection of product and sales information. You can find the finished admin panel app here."
  • First, you’ll have to create a new application on Appsmith.
  • A new application opens up an application titled Untitled Application 1; you can rename it by double-clicking on the existing one.
  • Now click on the DB Queries and create a New Data Source button. Since we’ll be using MongoDB, select the MongoDB option listed there. Below is a screenshot of how the settings look like:
mondog.png
  • You’ll also have to white-list Appsmith on the Mongo Server if you had any IP restrictions on your Mongo instance.
  • Next, set the Connection mode to Read/Write, Connection Type to Replica set.
  • Now you can add the host address, you can find this under your MongoDB cluster settings. In this guide, we’ll be using cluster0.d8mtn.mongodb.net
  • Next, click on the Test button to verify if the credentials are configured correctly or not. Once verified you can save the data source and then start working on your queries.
  • Finally, we’ll create a new query to fetch items from the product collections by clicking on Create Query. Use the following code snippet to fetch products from the products collection:
{
"find": "products",
}
  • Let’s name this query get_products and hit run to view the query response.

Displaying the Data onto UI

You have your data-source connected, and also a query that can fetch all the product items for you. Now, let’s put these on a table and render all the data. To do this, you’ll have to navigate to the Page, find the Table Component under the Widgets section, drag and drop it to the canvas. Next, open the table’s property pane by clicking on the cog-wheel on the table. Now under the Table Data property, add the following snippet:

{{get_products.data}}

Here, you’re using the get_products DB query and rendering the data from it onto a table.

"Appsmith allows us to parse javascript using the moustache syntax {{ }}."

Update an Item on MongoDB with Appsmith

Not just reading data, with Appsith you can perform all CRUD operations on the MongoDB. Now on our dashboard/page let’s create a form that allows us to update any selected value on the table.

  1. First, search for a Form widget that will house the input fields.
  2. Next, add some Text fields to visually indicate the product being updated (we can optionally display product image).
  3. A Number input to update product quantity.
  4. A Date input to update the product expiry date.

To build this form, we’ll need to drag over a form widget, a bunch of text widgets, an input widget, and a date picker widget to the canvas. The form should look like this after setting up the UI:

2.png

Once we have the form setup, we would need to link the form to the table so that when a product is clicked on the table, the corresponding information is pre-filled on the form.

Appsmith provides us with an easy way to hook into a widget’s state. You can configure the text widget to show the name of the product selected on the table by setting its Text property to:

{{Table1.selectedRow.name}}

You can do the same for the date picker and input widget so that the default text is set based on the item clicked on the products table. For example:

{{Table1.selectedRow.quantity}}

Also, don’t forget to set the Data Type of the input widget to Number.

Lastly, you’ll need to write a query that grabs data from the form and updates the product selected on the table when the submit button is clicked. To set this up, click on the cogwheel on the submit button. Then set the onClick to execute a DB query and then click on create a query:

Let’s call this query update_product and configure it this way:

{
{
  "update": "products",
  "updates": [
    {
      "q": {
        "_id": ObjectId("{{Table1.selectedRow._id}}")
      },
      "u": {
        "$set": {
          "quantity": "{{Input1.text}}",
          "expires_at": "{{DatePicker1.selectedDate}}"
        }
      }
    }
  ]
}

The update_product query shown above updates the item with _id selected on the table with quantity and expires_at gotten from the input and date picker widgets. Clicking the submit button on the form triggers this query.

You’ll now have a functional dashboard that displays product information with a form that allows us to update an individual product.

Displaying Data in a Chart Widget

Additionally, you can display data using charts. We have a sales collection that lists sales data of a particular product. It’s a good idea to display this data in a chart.

To build this functionality, we need to go back to the table widget and configure the onRowSelected action to execute a DB query and then, click on create a new query.

Let’s name this query get_product_sales and configure it like this:

{
  "find": "sales",
    "filter": {
    "product": ObjectId("{{Table1.selectedRow._id}}")
  },
}

The above query filters sales information on the sales collection for the product with the _id selected on the table. Also, this query will run whenever a row is selected on the table.

Lastly, we need to display the data from this query in a chart widget. So drag in a chart widget and configure the Chart Data to be:

{{ 
getproductsales.data.map(s => ({y: s.quantity, x: moment(s.date).format("MMM Do")}))
}}

And we can see the chart widget re-rendered with the sales data for the selected product on the table. You can go ahead and tweak the widget as you see fit.

Deploying the MongoDB Admin Panel

To deploy the admin panel, hit the deploy button at the top right corner. You can share the admin panel by clicking the share button and toggling the switch to make it public or only invite people you want to have access to the app (i.e people in your organization) via email.

Kudos! Your admin panel is now up and running!

with inputs from Confidence Okoghenun

How to Build a User Waitlist Manager on Appsmith
28
December
2020
Tutorial

How to Build a User Waitlist Manager on Appsmith

How to Build a User Waitlist Manager on Appsmith
Ravi Vyas
0
 minutes ↗
#
guide
#
applications
#
tools
#
tutorial
Tutorial

Waitlists are a powerful way to test your app or feature with a small group of users.

In this guide, we’ll build a waitlist manager that integrates with a SQL DB to provide access control. If you are new to Appsmith, read about Appsmith's core concepts before following this guide.

Features of the waitlist manager

Our app will access data from a MySQL DB that stores all user data.

  • Add or edit users on a waitlist.
  • Turn on beta features by version number
  • Enable/disable logging.
  • Provide a few KPIs, like the number of users by version

The application consists of 3 pages: A dashboard that lists a few useful metrics, an Add users page, and a Manage Users page. The 3 pages will be powered by 7 queries.

This guide will walk you through the structure of the database & the queries used. It won’t dive deeper into how the product will access this data. We assume your product can already talk to your backend, if not you can build APIs using solutions like PostgREST or build your own with NodeJS, Express & Sequelize.

Requirements

Database

This uses a Mysql DB with a single table, Users, as described below.

Column NameTypeDescription
Email IDtextUser’s identifier in our product
NametextUser’s full name
Unique_idintUnique identifier for each user
Enable_BetaBooleanA value that is 1 for users with access to beta and 0 for the rest
From_Version_codeIntThe version number when the user got access
LoggingBooleanA boolean that enables logging for the user
created_atDateUser Creation Date
updated_atDateDate User was last updated

Queries

This application requires seven queries listed below.

List All users Rather than running a select(*) we are listing all columns with human-friendly names. Query:

SELECT id as ID,
  name as name,
  email as Email,
  logging as Logging_Enabled,
  from_version_code as From_Version,
  enable_beta as Enabled_Beta,
  created_at as Created_on,
  updated_at as Last_Updated
FROM waitlist_manager

Add User

This insert query adds users to the waitlist and sets enable_beta & logging to false. The function NOW() set Created_at & Updated_at to the current date. You can modify this behavior if needed.

INSERT INTO waitlist_manager (
    name,
    email,
    logging,
    enable_beta,
    created_at,
    updated_at
  )
VALUES (
    '{{ input_name.text }}',
    '{{ Input_email.text }}',
    false,
    false,
    NOW(),
    NOW()
  );

Update User

This query updates all the properties of the user based on the update form. This dynamic query sets the status of from_version_code to the given value if enabled_beta is set to true, else from_version_code is set to null. The updated_at column is set to NOW() to capture the date of the update.

UPDATE waitlist_manager
SET enable_beta = { { Dropdown_enable_beta.selectedOptionValue } },
  from_version_code = { { Dropdown_enable_beta.selectedOptionValue == = "true" ? Input_version_code.text :null } },
  email = '{{Input_email.text}}',
  logging = { { Dropdown_logging.selectedOptionValue } },
  updated_at = NOW()
WHERE id = '{{ text_user_id.text }}';

List Users By Version

This query provides the number of users per beta version

SELECT from_version_code as Version,
  count(id)
from waitlist_manager
where from_version_code is not null
group by 1

Dashboard Queries

This set of 3 queries will help us build a set of KPIs to monitor:

Total Users Query

SELECT count(id) as count FROM waitlist_manager

Beta Enabled Users

SELECT count(id) as count FROM waitlist_manager where enable_beta = true

Logging Enabled User

SELECT count(id) as count FROM waitlist_manager where logging = true

Interface

Add Users Page

This page is a form with two input fields, for the user’s name and email address. On submit, we add the user to our database using the Add_User query.

image1.png

To make sure the user is entering a valid email, we set the field type to email.

image3.png

Manage Users Page

This page is the workhorse of this application. The table widget lists all the users and the form updates the user details & permissions for the selected user.

image6.png


The page is dynamically modified based on certain states.

1. To provide a better user experience, The form is hidden when the table does not have a row selected. To hide the form, set the Visible JS property to

{{table_users.selectedRow.ID > 0}}
image10.png

2. The “Beta Enabled” dropdown disables the “Beta Version” field when set to No.

To achieve this, set the Disabled JS property to

{{Dropdown_enable_beta.selectedOptionValue === "false"}}

as shown below.

image9.png

Finally, we connect the update button to the update_user query.

image5.png

Set the onSuccess property of the form to run the All_users query to refresh the table on any modifications.

Quick Dashboard Page

This page provides the following metrics.

  • Total users
  • Users who have beta enabled
  • Users who have logging enabled
  • Count of users by beta version.
image8.png

For the three metrics, connect the three labels to the three aggregation queries listed above. Unlike a table, setting a label to the result of the query needs to point to a single value rather than an Array. Here it is set to {{kpi_count.data[0].count}} as the queries will always return a single row and a single column named count.

image4.png

Finally, add a table and connect it to the List Users By Version query described above.

This completes the application. You can deploy the application by clicking on the deploy link on the top right. Once deployed, it will be visible to everyone in your organization.

For more details on sharing, you can refer to the Access control documentation.

You can play around with it using the link provided below. A few possible extensions are also listed below for you to try out.

Demo Application

You can try the application out here.

Possible Enhancements

As an exercise, you can clone the application and try to extend it. Here are some possible directions you can take.

Add more Features to the current application.

Control more features by adding more columns. For example add an Enable_Premium column, to give the user access to premium features.

Separate Features table

A possible larger refactor of this application is moving the features out of the Users table. The sample table diagram below shows a possible structure.

image7.png


This enables the addition of another form to add new features if needed.

Add More Charts

Since we are capturing the creation date of users, you can add a chart that shows the number of new users added each day.

Create a Public User Submission page.

Making the Add users form public allows users to direct join the waitlist. The best way to do this would be to create a separate application with just the Add users form.