Share My Creation [BANanoVMDesign] Drag n Drop WYSIWYG Web Form Designer


2020-03-19 : This is now part of the BANanoVueMaterial open source library.

This project is based on a functional BANanoVueMaterial library I am working on. An extension of the BANanoVue project I explored here.

Ever since I started working on the PDFDesign project for generating PDF documents I have been wanting to complete it with a more enhanced interface with drag and drop functionality. Something in the lines of what is depicted below.

I am working on a couple of projects with VueMaterial, a HTML5 framework that uses VueJS as the base framework. So when I have time on weekends besides attending to the bambinos, I explore some of my bucket list things some more. So the plan is to make the PDFDesign project intergrated into this for a one single point of call for BANano project helpers that include reporting.

As a newbie to VueJS, if anyone is skilled, please if you can shout as I need to iron out a few things here and need help.

So far the following components are drag and drop possible for Phase 1

  • Button
  • IconButton
  • SpeedDial
  • Icon
  • Input (email, tel, email, password)
  • DatePicker
  • Upload
  • Radio
  • Select
  • Slider
  • Switch
  • Label (p, h1-h6)
This is basic to get a UI up and running in no time for BANanoVueMaterial

Reproduction (if you'd like to check this out)

1. Create a MySQL database with the attached .sql file.
2. Update the .php file to connect to your MySQL db. These are my connection settings.

const DB_HOST = 'localhost';
const DB_USER = 'root';
const DB_PASS = '';
const DB_NAME = 'vmdesigner';

3. Run the project from your web server. The component definitions are saved on the MySQL db as JSON strings and regenerate the components from there.

Update: Using the render function now enables compilation of templates in realtime without page reloads.

Constructive criticism is welcome.


Related Links

Last edited: