How to make a web based drag and drop form builder? - javascript

I wanted a general direction on what tools/technologies to use to build a simple web-based form builder (I have seen the jquery post, that's not what I'm looking for). I was thinking reactjs/vuejs but I need to know if it's possible before I commit to one toolset as opposed to another.
Just to reiterate, my requirement is "build a web-based form builder, people can use it to build forms (like banks/DMVs) and share them with their clients so they can be filled online and printed or printed and filled offline". How would I start implementing it? (already settled on django for backend, I just need recommendations for implementing that functionality in the frontend) Thanks :)

https://shopify.github.io/draggable/ looks like a good, modern library. And it is developed/supported by Shopify, so there is some credibility behind it.

Related

Best JS Libraries for Checkbox/Faceted Search

I'm looking to re-create a checkbox/faceted search for a website and I was hoping to get some advice on what libraries to use.
The site is developed in .NET and sits on an Umbraco solution.
The site currently uses Knockout.js and Ajax to call the server with multiple requests, but I want to add routing (Knockout has none) so that the URL can be shared.
I plan on ripping out Knockout and starting from scratch. So does anyone know the best libraries to create a search which requires the following?
URL can be copied which contains data relevant to the selected filters
Multiple filters can be selected
Upon selecting a filter, it automatically updates the view with relevant data
Allows pagination
Any recommendations would be appreciated!
EDIT: Sorry I forgot to mention, I'm looking for front-end solutions as I'm currently searching with Examine on the server.
You can try different options -
1) You can go for Elastic. It calls facets "aggregates" but supports some fairly detailed logic around them. It is pretty simple to understand and the documentation is so far good. There are several c# libraries you can use with it, I've tried NEST: NEST
2) Another option would be to store content in RavenDB and uses facets on that: https://ravendb.net/docs/article-page/3.5/csharp/client-api/commands/querying/how-to-work-with-facet-query
3) You can also try BOBO faceted search which is managed using Umbraco category. Faceted search with BOBO
4) Some more options for you could be -
Xuntos Faceted Search (XFS)
Solr is another option for you. Below are some links -
http://www.slideshare.net/e2-marketing/we-want-a-corporate-umbraco-platforms-errr-surecode-garden15-session
http://www.eduserv.org.uk/blog/2011/09/26/faceted-search-using-solr-what-it-is-and-what-benefits-does-it-provide/
http://www.alpha-solutions.us/products/umbraco-search-solution
Solis Search
Hope these are helpful. Thanks!

How do I add a full site search to a website in Javascript/jQuery?

I am creating a HTML5 website and I need to create a site search box that
displays results in a results page with description and photo.
How would I go about this.
I have looked alot and only see google search and thats not what im after.
Can this be done without PHP or RAILS?
Looking for purely JS and html5 and css and jquery.
Thanks and a point i the correct direction would be great.
Example is this Wordpress sites search http://agroamerica.com/
I dont want to use WP but hand code it.
Any help is great.
Your best bet, given that you don't want to implement a third party indexing service, would be to set an indexing function on your server's back end to handle search requests. You mentioned Rails, and there are some pretty great gems for this.
One point of trouble you will have with this question is that, in my experience, full site search functionality without a back end / database to query is not a very useful solution for any applications I've seen.
However, given that you want to keep it JS, you might look into the MEAN stack (MongoDB, Express.js, Angular.js, Node.js) which does some pretty sweet things like two-way data binding. It's a pure Javascript solution (albeit not a purely-front end solution).
Honestly, it sounds like you might be taking too big of bites to start off with. Try working through a scripting language on a site like Code Academy and learning about basic web application setups like MVC (a common way to handle different parts of a web application (used by the aforementioned Rails)). Stack Overflow users can be pretty brutal when you ask questions about advanced functionality without some understanding of the functionality's underlying elements or functional requirements, and search engines from the ground up have historically been the thing of doctoral dissertations.
Good luck!

Storing user input data in HTML5

A (possible) client has a multipart questionnaire that they want coded in HTML5 (for responsiveness). I was thinking Bootstrap 3, combined with HTML and a bit o' javascript. However, I don't know what their options are regarding tracking the answers.
I'm new to HTML5, coming from the Flash world. What are my options? It seems a job for a backend DB, and I know enough Django to get into trouble, so perhaps that would be the best bet? I have done basic Django sites, but when something goes wrong, oh, it's a bit of a pain! (I haven't found Django as user friendly as I might like)
Is there anything new and funky in HTML5 (I'm not sure how they'd get the data out of local storage)? I'm good at HTML, but don't know all the tricky tricks in HTML5.
Thanks
Use ViewModel with Knockout.js for responsiveness. Its pretty fast.
You can see this sample Knockout.js project here.
Have you taken a look at the Django HTML5 Boilerplate (DH5BP) project1 on GitHub?
From the Readme.md
The Django HTML5 Boilerplate...incorporat[es] the HTML5 Boilerplate (H5BP) project into an easy to consume Django-friendly Python package.
Find out...about HTML5 Boilerplate at https://github.com/h5bp/html5-boilerplate
This project differentiates itself from other H5BP to Django ports, by
including Fabric scripts that automatically convert new versions of
H5BP into a Django-friendly Python module. Ideally, this will make
keeping up-to-date with the latest version of H5BP trivial.
Your best bet is probably to work with a CMS. It would greatly reduce your development time and it would help you avoid common pit-falls.
I would recommend using WordPress with some sort of plugin as in my experience it has been the easiest to work with for small projects.
HTML5 has some new elements and a simplified syntax. Some elements have had their definitions changed (what the tags intended usage is).
Update:
Four years later, WordPress now has a REST API. A good way to store user input could be to check if they are logged in and then post information via AJAX to the API.

JavaScript to generate/render dynamic HTML form from JSON or similar data?

I would like to offer viewers a contact form that is modified according to the user's input. An example of such a form is on the Ext JS site.
I have not looked into the product, but I would like to know if there are any other programs/functions that generate such a form dynamically? I found only samples on adding other input elements to existing forms.
Here are some other implementations:
http://neyeon.com/p/jquery.dform/ (depends on jQuery)
http://neyric.github.com/inputex/ (depends on YUI)
http://robla.net/jsonwidget/
I also plan to add this functionality to my own js-forms library, which would also handle validation.
You can always create whatever DOM structure you like using JavaScript. Be it additional inputs or even additional FORM elements. It then depends of course what you use on the server side to process form data and how you do that.
Maybe I haven't understood the nature of your problem because you haven't explained yourself too good.
ExtJS is a JavaScript library that does everything on the client side. It also provides the ability to rapidly create user interface by providing Javascript configuration objects that will result in rich widget creation.
You can do lots with jQuery (and jQueryUI) as well, but it's up to you how to do it. ExtJS just has these very functionally rich and visually consistent set of client controls/widgets that you can use out of the box without much additional development (not to mention bug killing that comes along custom development).
For instance: When writing an Asp.net MVC application it's very easy to issue an Ajax call that would return HTML of so called partial view with complete HTML of your form that you can then easily display in a modal dialog for instance.
If you do need all that functionality to create a desktop-like application I suggest you do take a plunge into ExtJS because it is definitely a very good product. I've used it about 3 years ago (version 2) on some project and I was amazed by the work they've done with it. It's very feature rich product that makes it really easy to create desktop like web applications.
But if you're after a usual web site then a desktop-like experience is probably not what you should give to your visitors.

Reflective Web Application (WebIDE)

Preamble
So, this question has already been answered, but as it was my first question for this project, I'm going to continue to reference it in other questions I ask for this project.
For anyone who came from another question, here is the basic idea: Create a web app that can make it much easier to create other web applications or websites. To do this, you would basically create a modular site with "widgets" and then combine them into the final display pages. Each widget would likely have its own set of functions combined in a Class if you use Prototype or .prototype.fn otherwise.
Currently
I am working on getting the basics down: editing CSS, creating user JavaScript functions and dynamically finding their names/inputs, and other critical technical aspects of the project. Soon I will create a rough timeline of the features I wish to create. Soon after I do this, I intent to create a Blog of sorts to keep everyone informed of the project's status.
Original Question
Hello all, I am currently trying to formalize an idea I have for a personal project (which may turn into a professional one later on). The concept is a reflective web application. In other words, a web application that can build other web applications and is actively used to build and improve itself. Think of it as sort of a webapp IDE for creating webapps.
So before I start explaining it further, my question to all of you is this: What do you think would be some of the hardest challenges along the way and where would be the best place to start?
Now let me try to explain some of the aspects of this concept briefly here. I want this application to be as close to a WYSIWYG as possible, in that you have a display area which shows all or part of the website as it would appear. You should be free to browse it to get to the areas you want to work on and use a JavaScript debugger/console to ask "what would happen if...?" questions.
I intend for the webapps to be built up via components. In other words, the result would be a very modular webapp so that you can tweak things on a small or large scale with a fair amount of ease (generally it should be better than hand coding everything in <insert editor of choice>).
Once the website/webapp is done, this webapp should be able to produce all the code necessary to install and run the created website/webapp (so CSS, JavaScript, PHP, and PHP installer for the database).
Here are the few major challenges I've come up with so far:
Changing CSS on the fly
Implementing reflection in JavaScript
Accurate and brief DOM tree viewer
Allowing users to choose JavaScript libraries (i.e. Prototype, jQuery, Dojo, extJS, etc.)
Any other comments and suggestions are also welcome.
Edit 1: I really like the idea of AppJet and I will check it out in detail when I get the time this weekend. However, my only concern is that this is supposed to create code that can go onto others webservers, so while AppJet might be a great way for me to develop this app more rapidly, I still think I will have to generate PHP code for my users to put on their servers.
Also, when I feel this is ready for beta testers, I will certainly release it for free for everyone on this site. But I was thinking that out of beta I should follow a scheme similar to that of git: Free for open source apps, costs money for private/proprietary apps.
Conceptually, you would be building widgets, a widget factory, and a factory making factory.
So, you would have to find all the different types of interactions that could be possible in making a widget, between widgets, within a factory, and between multiple widget making factories to get an idea.
Something to keep on top of how far would be too far to abstract?
**I think you would need to be able to abstract a few layers completely for the application space itself. Then you'd have to build some management tool for it all. **
- Presentation, Workflow and the Data tier.
Presentation: You are either receiving feedback, or putting in input. Usually as a result of clicking, or entering something. A simple example is making dynamic web forms in a database. What would you have to store in a database about where it comes/goes from? This would probably make up the presentation layer. This would probably be the best exercise to start with to get a feel for what you may need to go with.
Workflow: it would be wise to build a simple workflow engine. I built one modeled on Windows Workflow that I had up and running in 2 days. It could set the initial event that should be run, etc. From a designer perspective, I would imagine a visio type program to link these events. The events in the workflow would then drive the presentation tier.
Data: You would have to store the data about the application as much as the data in the application. So, form, event, data structures could possibly be done by storing xml docs depending on whether you need to work with any of the data in the forms or not. The data of the application could also be stored in empty xml templates that you fill in, or in actual tables. At that point you'd have to create a table creation routine that would maintain a table for an app to the spec. Google has something like this with their google DB online.
Hope that helps. Share what you end up coming up with.
Why use PHP?
Appjet does something really similar using 100% Javascript on the client and server side with rhino.
This makes it easier for programmers to use your service, and easier for you to deploy. In fact even their data storage technique uses Javascript (simple native objects), which is a really powerful idea.

Categories

Resources