21
August
2020
Product

One Open Source Project for Admin Panels, CRUD Apps, and Internal tools

2
 minutes
One Open Source Project for Admin Panels, CRUD Apps, and Internal tools
đź“Ť
Blog
/
Product

We’ve all spent time on building internal tools which could be CRUD apps, admin panels, or complex workflows. These kind of internal tools are used for:

  1. Analytics and reporting
  2. Customer data views for sales & support teams
  3. Configuration managers for client-visible UI used by technical and non-technical people
  4. Multi-step data workflows which involve multiple participants(like content moderation tools or customer KYC at fin-tech startups)

These tools often aren’t very interesting to build because of the repetitive work involved like building UI, writing CRUD APIs, setting up authentication, & managing deployments.

Creating Admin Panels, CRUD Apps, and Internal tools quickly!

I decided to create Appsmith because I couldn’t find a project which did most of the work for me and also easily customizable.

How does Appsmith work?

1. First setup Appsmith using Docker. Read instructions here for a 2 min setup process.(docs.appsmith.com/quick-start#docker). Or try our online sandbox

2. Go to localhost or your machine’s public IP to see the login page. online sandbox.

3. Create a new application and name it.

Create an application

4. Connect to a database or API. Today MySQL, Mongo, Postgres, and REST apis are supported. The gif below shows me connecting to an API.

API creation

5. Go to the canvas section and choose a UI widget. Appsmith ships with 16 components like tables, different charts, map viewer, forms, etc. In the example below I’ve used a table component.

6. Modify the table property to display your query results by writing {{queryname.data}}. You can code in JS and use Lodash functions inside {{ }}.


7. Trigger an action through events like onClick, onTextchange, onSelectedrow, etc for CRUD operations.

Event trigger

1. Click deploy to see your app in a URL. (You can set up a custom domain in the setup script)

Deploy


2.Invite users after assigning them a role. They can sign up via a form login or with their Google/Github accounts. Make your app publicly viewable to allow access without a login.

Share & invite


So this is how you build a simple app in less than 10mins. Access an app I built on Appsmith here.

Appsmith is the first open source project to build internal tools. If you like the project, please star our GitHub project.

What features should we add to Appsmith?

TL;DR: Appsmith is an open source framework to build apps for analytics, workflows or CRUD operations. Replace all your internal tools with one project. See GitHub repo or try an example app here.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format

‍

Static and dynamic content editing

  • dcdsdfd
  • dfdfvddf
  1. vdfgdgd
  2. gjgjg

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

‍

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Square
Try Appsmith
Our New JS Snippets Feature Helps You Write JavaScript in the Appsmith Platform
18
October
2021
Announcement

Our New JS Snippets Feature Helps You Write JavaScript in the Appsmith Platform

Our New JS Snippets Feature Helps You Write JavaScript in the Appsmith Platform
Vihar Kurama
5
 minutes ↗
#
announcement
#
beginners
#
applications
#
app-development
#
features
Announcement