Index

🙏 Welcome

You have made a good decision by choosing Sparkadmin to build your next admin panel.

What is Spark Admin?

Spark Admin provides you all common tasks involved in development of an admin panel like CRUD operations, customize form layouts, form fields mapping, roles management, even create an APIs in seconds. This lets every developer create an admin panel for your next project in minutes not hours.


Features available

SparkAdmin is a perfect blend of features which are required to build an admin panel.

  • Admins/Roles Management
  • Database CRUD Management
  • Forms Customization: Specific type of fields like WYSIWYG, Required, File uploads, Relationships etc.
  • Forms Layout Management
  • Detail Page Management
  • Menu Management
  • Data view filters
  • CSV Import/Export
  • Email Templates
  • Automatic API generation
  • and much more....

How to install

Installation of SparkAdmin is simple and can be done easily using the following steps.

  1. Upload the SparkAdmin files on your webserver via FTP, SFTP etc.
  2. Get ready with your existing or new database credentials.
    • Database Hostname (usually `localhost`)
    • Database username
    • Database password
    • Database name
  3. Once the files are uploaded, go to your browser and enter the installation URL (e.g: http://{where ever you uploaded the files})
  4. SparkAdmin will automatically redirect you to the installation page.
  5. On the installation page, enter your database credentials.
  6. After filling your database credentials, create your first admin account. Enter your name, email and password.
  7. Hit the Start Installation button and wait for some seconds.
  8. That’s it! Your Spark admin installation is complete.
  9. Click "Go to Panel" link to login and start creatin your next admin panel.


Admin Management

With Spark Admin, you can create any number of admins, create new roles and set roles for each admin.

Manage Admins

  1. To manage admins, simply go to Manage admins from your account menu.
  2. On the Administrators tab, to create a new admin account, fill up the form on the right side. Enter name, email, password and choose a role
  3. To edit an existing admin account, just click the edit icon on the table view and it will show admin information on edit form on the right side.

Manage Roles

  1. To create/edit roles click on the Roles & permissions tab on the top.
  2. This page lists all the roles setup in SparkAdmin, you may create more roles based on your requirements.
  3. To create a new role, fill the form on the right. Choose the options based on your requirements.

Database Management

With Spark Admin, you can create database tables, columns and perform other actions without using any MySQL tool like PHPmyadmin, adminer. We have to tried to put all basic operations in itself.

How to create a table

  1. To create a new table, go to Database menu from Developer Zone menu.
  2. On the Database management page, click the Add Table button to create a new table.
  3. Clicking the Add table button will open a Add Table modal.
  4. After filling the form, hit save and it will redirect you to the newly created table to create columns.

How to create table columns

  1. Creating a table column is easy. Choose a table from the left tables list and click the + Add Column button
  2. A new modal will appear on your screen to enter information about newly created field
  3. Enter name for your column e.g:, brand_name, choose type: (varchar, int, enum etc.), choose after which column you want to add the column, whether the column can be null etc.
  4. Press Add Column button once you have filled up the form. The column will be added to your table list. If any error occurs, you can choose SQL Query option to alter your table with your own queries.

How to use SQL Query

  1. Already have table schema? Don't want to add columns one by one. You can use SQL Query to add bulk tables or columns. Click the SQL Query button on the top
  2. On Clicking the button, Perform SQL Query modal will open, input your SQL query and click Perform SQL button
  3. Your SQL Query will be executed. Make sure to use it wisely.

Other Database Operations

  1. There are other table operations which you can perform from the Database management page.
  2. Rename table: Spelled wrong or want to change table name? Click the pencil edit icon next to the table name to edit it.
  3. Truncate table: Remove all the records from the table. *Use it wisely
  4. Drop table: Drops the table from the database. *Use it wisely
  5. Maintenance queries You can use other maintenance table queries for each table like: Analyze, Checksum, Flush, Optimize, Defragment.

Form Fields Management

You can customize your form fields very easily with Spark Admin, You can turn any database table into nice looking forms.

How to customize a field

  1. To manage and customize your database table columns in form views. Just click the form fields menu in the Developer Zone.
  2. A full list of customizable options for any field is available on the left side list. You can turn any field like email, required, date, color picker, star rating, range slider etc.
  3. To customize any field, choose a table name on the form on right side and choose table columns. For example in the screenshot below, description and brand_description are converted into Rich Editor fields.
  4. Many of the options are easy to customize where you just have to choose the table and select your columns and its good to go. But some may require extra settings explained below.

File Uploads

We can easily convert into column into an file/image upload file. Below are the steps to convert any column into image/file upload field.

  1. On the Customize a form field form, first choose the table name. (e.g: companies)
  2. Select field name, which you want to customize, (e.g: logo)
  3. Choose Upload Type: Image/File
  4. After choosing upload type, it will ask to choose file formats to accept like (.png, .jpg, .jpeg, .docx, .doc, .pdf etc.) to choose from
  5. Currently the system supports own hosted images/files. In Future, we are planning to add AWS/Google Storage features.
  6. Choose a folder or create a new folder. The system will create folders in /uploads directory in the root of the project.
  7. Click Add button

Table Relationships

With SparkAdmin, we have tried to make table relationships easier. Use the following steps to create a relationship between tables. Steps below explained based on the screenshot. In the example below, we have connected user_id with users table to show user name on the companies table created by that user.

  1. Choose a Main Table whose column you want to connect with. (e.g: `companies`)
  2. Choose Main Field (field you want to connect) from Main Table (e.g: `companies`.`user_id`)
  3. Choose a Secondary Table (table which you want to connect) (e.g. `users`)
  4. Choose a Secondary Field (e.g. `users`.`name`). For any connection data from this column will show on table views.
  5. Choose a Secondary Field Value (e.g. `users`.`id`). For any form, the value of field will be passed to database.

Range Sliders

A range slider is an input field that one can use to select a numeric value within a given range (minimum and maximum values).

  1. On the Customize a form field, choose table (e.g: jobs)
  2. Select field name, which you want to customize, (e.g: positions_open)
  3. Set Min (e.g: 1)
  4. Set Max (e.g: 10), Max cannot be lesser than Min.
  5. Set Step (e.g: 2), Step cannot be lesser than min.

Layout Management

SparkAdmin, is not just a CRUD admin panel, but it gives you lot of customization options to create custom forms, layouts for each table you create in database.

Form Layout Management

  1. By default, all the forms will be shown with all table columns available in the database table. If you want to create different sections for your forms, you will have to follow the steps below to create nice looking forms.
  2. From Developer Zone, click Form layouts menu.
  3. By default, every add/edit form is set col-12 flex format.
  4. To change the page layout, you can choose page layout options and create 2 columns accordingly.
  5. Click on + Add Section in each column to create new section. (e.g: Basic Information).
  6. You can move the section to other columns by clicking (Move column to 1/2)
  7. Drag and drop the sections to change positions
  8. To add columns/fields to the section, click on + Add Field to open a popover of list of fields available. Click on a field and it will added to the section.
  9. Once you have created all your sections and fields, your layout will look like this below on add/edit forms.
  10. Here's your final view of add/edit form. Isn't it great?

Detail View Management

  1. By default, the layout of detail page is simple, which has primary key value as the title of the page, showing all the content from the table in the left column. But its very easy to customize all of this in minutes.
  2. To change the page header, click on the Set Custom Header (refresh icon) and choose the column name from database table to show its value. (e.g., job_title)
  3. You're ready with new header now.
  4. The left section on the detail page, shows all the column values by default, but you can also create separate sections for this too.
  5. Click on `+ Add a section` on the left column and Create section modal will open up.
  6. Name your section and choose the columns you want to show in the section.
  7. Once you have created enough sections, your left column will look something like this.
  8. On the right side section, it has the option of showing related data from connected tables using fields customizer. To create a new section click on `+ Add a section`.
  9. On Create section modal, enter your section title (e.g, Job Applications), and choose the connected table, select columns to show in datatable and use some queries to show some specific data and click Save! Your new section will be added to detail page.
  10. Here's your updated detail view page. Looks promising?

Table View Management

With this feature your data table view for every database table.

Default table view

This is how your table will look like without any customization. If there are more columns, it will look too ugly. So to make it look better, lets customize as per our needs.

  1. To customize the table view, click the Table view menu from the Developer Zone
  2. Then you will see all the options available to customize your table view.

Show columns on table

  1. Select the columns you want to show on the table view

Use columns as filters

  1. Select the columns, which you want to use as filters on the table view.

Quick Add

If your table has lesser number of columns in the database table, its always better to have a quick add form on the right side of the table view.

Enabling it, will add a form like this on the table view


Restrict Entry

If you dont want to have Add/edit form for any particular table, you can turn it off by checking this option.


CSV Import/Export

Choose this option to enable CSV Import/Export feature for your table view.

Enabling it, will add buttons like this on table view.

Clicking import button, will show a popup like this, where you can input your csv file to import data. It's always better to export csv before import.


Final look after customization

This is how your table view will look like with the customization.


Quick Add Filters

This is how you can add filters quickly without going to the table view management page.


Email Management

Emails, email templates are a very important requirement for any project. With SparkAdmin you can easily create smtp settings, templates and send emails to your users.

SMTP Settings

  1. To create or manage SMTP settings, click on Email menu from Developer menu
  2. On this page you will see the list of created SMTP settings.
  3. To add a new setting, click on `+ Add SMTP` button. A modal will appear to fill on SMTP settings.
    • Enter SMTP hostname, usually IP or domain name
    • Enter SMTP PORT: usually 587 or 25
    • Enter SMTP Email or username
    • Enter SMTP Password
    • Enter From email. Make sure this matches with your sender email.
    • Toggle Set as default if want to use this SMTP for sending emails.
  4. You can turn on default SMTP from the table view page too.

Email Templates

An email template is a preformatted and/or prewritten email that you can use to replace with your own content so that you can quickly and easily write and create emails.

  1. To view the list of the email templates, click the Email templates tab on the left.
  2. You can preview an existing template by clicking the Preview button
  3. You can copy an existing template by clicking the copy button left to the edit icon.
  4. Create a new email template
    • To create a new template, click `+ Add Template` button
    • Add Email template modal will appear to fill in the information
    • Enter template title
    • Design your email in the Rich Editor provided
    • You can also use the <> code icon in the editor to paste your existing HTML.
    • Create shortcodes: Shortcodes are a great way to pass data into email template from code.
      • To create a new shortcode, click on the `+ Add Short Code`
      • Enter the variable name
      • Click on `+` button to add the shortcode variable to add to the Rich Editor above
    • Click Save button to save the template

Send Email

  1. To send an email to someone click on the send email tab on the left.
  2. Choose an email template (optional). If you choose a template and there are shortcodes, the shortcodes will be appear on the right side of the Rich editor to fill in values.
  3. Enter email address (in commas if multiple)
  4. Enter email subject
  5. Enter your message in the Rich Editor field.
  6. Want to attach a file? Upload it using `Attach a file` field.
  7. Click Send button to send email. Default SMTP Settings will be used to send email.

Settings Management

Every web/app development needs some settings and kept separate and use it globally. This section allows you to create unlimited settings.

Admin Settings

  1. To view all the settings created, click the Settings panel menu from Developer Zone
  2. On this page you will see the list of admin settings
  3. By default, there are some settings attached to the system for `admin`.
    • Site name: You can change the site name
    • Timezone: Change the admin panel timezone
    • Admin Theme: You can change the admin theme if you have multiple themes available
    • Primary Color: You can change the color of the admin panel as per your requirement using Color Picker tool.
    • Admin Logo: Upload the admin panel logo or use it anywhere you want like email templates, content pages etc.
    • and more more settings...

How to create new settings

  1. To create a new setting, choose an existing new section or create a new one

  2. Enter setting name
  3. Choose a data field type. There are many field types available.
    • Simple text field
    • Simple number field
    • Select option (Dropdown, where you will have to enter selection options)
    • Upload Image
    • Simple textarea
    • Rich Text Area
    • Date Picker
    • Date + Time Picker
    • Boolean Switch
    • Color Picker
  4. Hit submit button and your new setting will be saved.
  5. You can sort the positions of the settings by dragging them vertically.
  6. You can delete single or all settings in a section except admin settings.

API Management

An application programming interface is a connection between computers or between computer programs. It is a type of software interface, offering a service to other pieces of software. A document or standard that describes how to build or use such a connection or interface is called an API specification.

How to use it?

  1. APIs are automatically generated whenever you create or update your database tables.
  2. How to access API Management
  3. After clicking the API menu you will be taken to the API Management page
  4. There are two types of API managements available in the system
    • Core: Automatically created from database tables
    • Custom: Self created or custom api development
    • All the tables are shown on the left side
    • You can copy the endpoint of the API by clicking the Copy button
    • To view a public API documentation, click the Docs button next to Copy button.

API Routes

  1. As described above, all the routes are automatically created from database tables. By default all the routes are publicly available and dont require any authorization.
  2. By default the system comes with 5 pre created routes.
    • GET /{tableName}: Fetches the records from the table in pagination format. You can send conditions as well. To know how click on the route to view url,request, post body parameters
    • GET /{tableName}/{recordId}: To get single record from the table
    • POST /{tableName}: To add new record in the system.
    • PUT /{tableName}/{recordId}: To edit an existing record in the table
    • DELETE /{tableName}/{recordId}: To delete a record from the table
  3. If you want to turn off any routes, you can simple do it via clicking the eye icon on the right side
  4. If you want that only app_users logged in users can access the APIs, just press the lock icon on the right, it will require Basic Authorization while accessing API.

Dashboard Management

The dashboard is the front page of the Administration UI. It provides convenient shortcuts for common management tasks, charts, counters.

How to create a chart

  1. To create a chart, click on the `+ Add Chart` button on the top right of the dashboard page.
  2. Enter chart title
  3. Choose a chart type: Available options: Pie Chart, Donut Chart, Line Chart, Bar Chart
  4. Select table from which you get data
  5. Choose a column for group by: it will sort data based on the column for example: Get all data based on the Gender (Male/Female?)
  6. Create aggregate function, An aggregate function in SQL performs a calculation on multiple values and returns a single value. Available options are : COUNT and SUM
  7. Choose column name which is used for calculation
  8. Enter alias name for this aggregation function: e.g: total_males
  9. You can also pass conditions if you want to put specific data.
  10. Hit save button and your graph will show up on dashboard

How to create a counter

  1. To create a chart, click on the `+ Add Counter` button on the top right of the dashboard page.
  2. Enter Counter text (e.g. Total users)
  3. Choose icon to be used
  4. Choose Counter aggregate function: Available options (COUNT, SUM, MAX, MIN, AVG)
  5. Enter Prefix if needed. Useful to add signs like $,€ etc.
  6. Select table for which you want to create the counter.
  7. Select column to be used for aggregate function.
  8. You can also pass conditions if you want to put specific data.
  9. Hit save button and your counter will show up on dashboard

How to create a section

  1. To create a section, click on the `+ Add Section` button on the top right of the dashboard page.
  2. Enter section title: (e.g: Inactive users)
  3. Select columns from table to used shown.
  4. Set data limit
  5. Order data by some column
  6. Order in ASC or DESC
  7. You can also pass conditions if you want to put specific data.
  8. Hit save button and your section will show up on dashboard