Formbuilder UI and Structure

This is a test project, do not post a proposal to this.

1. Everything built in Javascript and an HTML file and supporting files are the deliverable.

2. 3rd Party libraries are allowed but must be approved. (JQuery, bootstrap are fine)

3. Need a drag and drop interface similar to [login to view URL]

3. There will be 3 windows in the interface "Form Objects", "Stage", "Staged Object"

4. Form Object - Contains the list of objects that are available to drag and drop onto the stage. similar to formbuilder.online. For this example you will create 3 objects to be able to be dragged onto the stage. The 3 objects are described later.

5. Stage - This is the located where object can be dragged onto. When an object is hovered over a small tool tip (similar to [login to view URL]) appears. When the edit button on the tool tip is selected then an edit popup window appears (not like [login to view URL]). Copy and Delete options are available. A move icon that allows the object to be reordered should also be in the tool tip.

6. Stage Object - This is a list of all the objects that are currently on the stage. Next to the Name of the object will be mini delete, edit, copy icons.

7. Edit Popup - The popup edit will hold two properties to start, Type & Name. Type is the type of object (Textbox) and name is the unique name of the object. Name will automatically be populated by a counter so if a Textbox is dragged onto the stage then it is Textbox1, second one is Textbox2. Name is editable and must be unique.

8. Textbox Object - This is a textbox similar to [login to view URL]

9. Button object - This is a button similar to formbuilder online

10. Columns object - This object when dragged to the stage splits the stage into two sections. In the popup window there is a second tab on this object called Columns. In that tab. This tab allows the user to add a new column and specify the width. At the top of the tab is a radio control asking if the column width is in percentage or pixels. When the stage has multiple columns then any form object can be dragged into any either columns

11. Export & Import button Above the Form object window is an import and an export button. The Export button exports a JSON object that defines the current form and all its properties so that the import button can reload the form.

12. Code button will appear next to import/export. This button will show the HTML rendered to show the form.

13. Preview button will appear next to code button. This will hide all the controls on the screen and show the form as it appears by itself. a ghosted X button to exit preview mode.

14. A document describing the project and each file in the project must be supporting.

15. Comments on top of each function are required.

16. The project must be architected in a way that each control is its own js file.

17. The project must be architected in a way that adding an available control a straight forward process and be documented in the document.

18. The project must be architected in a way that there is a default list of properties for a control and then the custom properties for each individual control. Meaning that I shouldn't have to define Name and Type (and others) for each control because they are on every control.

19. In your proposal to me you must include the wording "Cubs win 2016" so that I know you have read all this information. Without the words "Cubs win 2016" you proposal will not be considered.

20. this is just phase 1 prototype. More changes to this project will be coming to create all the future controls (~20 in total)

JavaScript

Prosjekt-ID: #15084196

Om prosjektet