Formular - Front-end demo of my form-builder app

[007des...@gmail.com]

i've been working on a form-builder type application for a LONG time now.  the biggest headache was definitely the user interface so you can imagine how excited i was when i discovered angular.  after a LOT of work, the application is starting to become usable by people other than myself.  so, i've managed to boil-down the current front-end code into a sort of client-side-only demo.  the full application allows you to design "dynamic" forms to collect arbitrary data and then display and update that data.  the idea is for the system to be as generic as possible and not tied to any single submission-data structure so you could build forms for an e-store, or a survey or literally anything else.

i have posted the demo code on github but have not yet figured out how to host an example page there so, in the meantime, here's a link to a working demo:

http://007design.com/formular/index.html 

and here's the code on github:

https://github.com/007design/Formular

keep in mind that there's a whole backend to this thing as well as some pages that aren't featured in the demo so there's some stuff commented out (extra services, etc).  primarily, i wanted to showcase the "dynamic form configuration" part of the app as well as get it into a configuration which i could present to you guys hoping that you might be able to point out some bugs or just plain bad design ideas.

if you have any questions or comments please reply.  i've put a lot of time into getting this thing into a form i'm willing to show someone else and any helpful ideas you may be able to offer would certainly be appreciated.

thanks,

007

[Marcus]

Hi 007,

This is really fantastic !

I've been hoping someone could show a practical demo that includes so many AngularJS components that are easy to read. Thank you for this contribution.

A couple of questions:

You start with index.html by using: "ng-controller="demoCtrl".  However, I could not find the demoCtrl function anywhere. Is this not used ?

In index.html you set up the tabs with:         <li class="active"><a href="#inputViewTab" data-toggle="tab">Input View</a></li>

				<li><a href="#dashboardViewTab" data-toggle="tab">Dashboard View</a></li>
				<li><a href="#editorTab" data-toggle="tab">View Editor</a></li>

I was wondering if you were going to use an ng-view in any place to load or manage a partial via the $routeProvider ?

Sorry my questions are simple-minded, but this is the first demo that actually shows enough details to understand how AngularJS can become a whole application environment.  I've spent weeks trying to disect the angularjs.org home page, but its all too "geek" for me.

Thanks for your great work !

Marcus

On Tuesday, July 31, 2012 7:39:28 PM UTC+2, 007des...@gmail.com wrote:

http://007design.com/formular/index.html 

and here's the code on github:

https://github.com/007design/Formular

[aaron...@gmail.com]

nice work.  I'm need a much simpler version and learned a lot from your code.

thank you

I did have to edit index.html and change "demoCtrl" to "testController"

-Aaron

[007des...@gmail.com]

i've gotten a couple requests for the back-end that goes with this so i'm putting it on github.  it's written in Java and runs on Tomcat and mySQL.

unfortunately, i got busy with other things so i haven't had time to work on this recently.

if you actually get it to run on your system, please let me know.  i'm not so good with github.

https://github.com/007design/FormulateAngular

thanks,

007

[Selman Halid Kahya]

I also wrote a simple form builder tool, you can check it online here: http://selmanh.github.io/angularjs-form-builder/#/

Source code is on github:

https://github.com/Selmanh/angularjs-form-builder

[Marcus]

Hi Selman,

Well done !

Your complete demo site is great. It proves how you can shrink 100s of lines of HTML into directives.

Would be nice if one could have an "edit me" button next to each form field, so that you can then edit the details of that field right into the JSON data that you generate. This way the administrator could create forms with details on "required", default-select, default date, help-text, etc.

Another idea:

Once I have edited my new form, generate a SQL CREATE TABLE script that can be copied into an SQL editor to create the table you just designed. Add to this a SUBMIT feature in your code, and it could send a REST "PUT" to a server (mongo or sql, for example).

Cheers,

Marcus

[johntom]

The date picker does not seem to work in chrome when testing your example.

John

[Dan71]

Hello Selman,

Cool stuff!! Thanks for sharing!!

On Friday, August 16, 2013 7:14:37 PM UTC+2, Selman Halid Kahya wrote: