SoC 2006: AJAX Form Builder

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.

This will be the main list/repository for the AJAX Form Builder project for Summer of Code 2006. The original project outline can be viewed here and Avi Mehta (silence)'s application is here.

The project aims to produce a browser-based form builder for Drupal. Users (e.g., module designers) will be able to create and edit forms and their elements and properties through a browser UI with familiar features like drag and drop reordering. The form builder will read in, modify, and output a Forms API data structure, so that forms built can be saved and used as form-generating code in Drupal modules.

Within the scope of the SoC, the key focus is on building a sound base, rather than a full feature set.

JSON will be used as the data format for Js <> PHP exchanges (unless that proves unwieldy, in which case XML will be explored).

Wherever feasible, the project will draw on and contribute to other Drupal Javascript and AJAX work, e.g., other SoC projects, the jstools package, and Drupal core js.

Strong input from Drupal developers will be key to making this project work. Please wade in with your comments and suggestions, and help Avi as issues come up.

Student: Avi Mehta (silence)
Mentors: Nedjo Rogers (nedjo), Jeff Robbins (jjeff)

molcom's picture

Drop Down List again

Sorry that I post this discussion again but I've see that it is private and I want it public.

I have a module and for a menu link will be displayed a form.
1. In this form I have 2 select element. First element is populated with some authors name. The second select element must be populated with the books for the selected author from the first select element.
2. For each selection in first select element, the option array for the second element must change.
3. I must have a second submit button, or a button and have option to call a function when I press on it.

Read more
silence's picture

Next Steps

Thanks to everyone who tried and tested the formbuilder module. While using it you would have noticed that the functionality of formbuilder is still limited to very simple forms and this is where the next plans come in.

I am here outlining plans that I could think of, If you find something which I stupidly missed out, please add it as a comment.

  1. Add support for trees, parents etc.
  2. Change the way in which the ordering of form widgets is done.(Right now it is done using weights but nedjo suggested that initial ordering should be better done through the order of elements in the $form array. So this has to be changed.)
Read more
nedjo's picture

Form Builder ready for testing!

After a lot of fine work on Avi's part, his formbuilder.module is ready for testing.

The code is in Drupal CVS but needs separate downloading because it includes two external open source but non-GPL libraries: jQuery and PEAR's JSON package.

I've put the latest version for temporary download here.

To test:

  1. Install and enable the module.
  2. Optional--change settings of your sidebar blocks so they don't display at admin/formbuilder. The UI is wide and otherwise, depending on your screen size/resolution, it may not fit.
Read more
silence's picture

Questions

Hi everyone,

I updated the Form Builder module today to give it some improvements. You can get it from the modules>formbuilder folder.

Read more
silence's picture

Update

A update after long time...

The html page is now converted into a module, and can be found here. The js files can be found here: http://www.freewebs.com/socdemocode/js.rar . Put these files into js folder of the module.

Read more
silence's picture

Weekly Update

Hi!

Hopefully you have been to the midweek demo that I had provided a few days back. After that update, I tried to support other widgets. Hence here's the new demo and below is the report:

Read more
silence's picture

26th June - 1st July

In this week (from 26th June to 1st July), one of the primary aims was to develop a framework on client side which implements addWidget(), deleteWidget() etc. The framework should be working directly on the DOM form and JS form object.

Here is a demo of what I am trying to do for the goal.

Read more
silence's picture

Arrays, Serialization, JSON and such....

In the story here, It was finally decided that we will be using JSON for passing the "data" from client to server. As discussed, we'll be storing details in a JS object array in client. Robert had said that it is preferable to convert JS to php on server.

  1. What are the scenarios where serialized JS is prefered over php on server? Basically that answers why we should transfer the data in JS format instead of PHP?
  2. Now, once we have the "data" to transfer, What are the possible ways to transfer this from client to server? Is form POST enough or is thr something else that can be used?
Read more
nedjo's picture

Form structure from Views?

We've talked about future CCK tie-ins to the form builder, and are keeping this in mind as a future add-on.

What about Views?

Views module provides a code-accessible representation of tables, fields, etc. Presumably, on this basis we could pre-populate a draft form array, or provide a data reference for the form builder (default values for fields, etc.).

Read more
silence's picture

Class Structure?

Hi!

As I mentioned in my mail, I had a problem with the design of the page. I'll describe it a bit more here:

A Page has a form and many form elements are created in it. Each of the form element has different properties as described in form API. So basically, I need to keep track of the elements, the properties which correspond to these elements and their values. These need to be organized in some object oriented manner. And I could not find a good way to do it.

Read more
kkaefer's picture

What JavaScript library should we use? (Regardless of licencing issues)

jQuery
69% (86 votes)
Prototype
15% (19 votes)
Other library (specify in comment)
4% (5 votes)
Custom built library
12% (15 votes)
Total votes: 125
silence's picture

Requirements Specifications.

The main aime behind creating this story are:

-- We list all the requirements at one place.
-- We can discuss any shortcomings or anything else that is missing or wrong (So please contribute :).

The requirements as discussed in Meeting 1 are as follows:

Read more
silence's picture

Meeting 1

Date: June 2nd 2006
Participants: nedjo, jeff, me

Proceedings:

  • Introductions
  • Brief followup of what was done till now.
  • Requirements Discussion
  • Discussed Module name :) and where it should be put. - formeditor.module (or something I dont remember but It could be changed later) It will be put as a seperate module.
  • Answered my queries
  • Other Discussions

Well.... the meeting was fine except that my mic did not work. I cant still figure out why :). I'll also be posting another story containing the Req

Read more
silence's picture

Orientation

Ok... So we are 1 and a half week into SoC and here's how the project fared in its first week.

Things I looked into:

  • CVS: Downloaded the repository's initial copy, understood how things work. I have not yet commited there though :(.
  • Form API: Went through the API and saw how it is designed. Thus found out how the form builder needs to give its output.
  • drupal.js: looked at the workings of drupal.js and a sub-module (effects.js).
Read more
nedjo's picture

Templates or XSLT: How to structure data transfers and client-side content generation?

A key AJAX design choice is how we are going to handle client-server data transfers and client-side content rendering.

The two most obvious choices are:

  1. Data exchanges are in XML and content is rendered client-side via XSLT.
  2. Data exchanges are in JSON and content is rendered client-side via templates.

Each has its relative merits, and each will require some development on our part to implement. It might make sense to make a community decision around which of these options to pursue, as then we could pool efforts. For some SoC projects, e.g., the Form Builder, the data and content rendering model is a key early decision that will shape much of how the project is developed.

Read more
Subscribe with RSS Syndicate content

SoC 2006: AJAX Form Builder

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: