vwiki

User Tools

Site Tools

Trace:
myformiodemo

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
myformiodemo [2023/10/23 12:11] – kalaschnikowmyformiodemo [2023/10/23 12:22] (current) – [UI elements] kalaschnikow
Line 1: Line 1:
 +====== myFormioDemo ======
 +
 +My project to learn to use the form.io renderer and builder components.
 +
 +This project was previously named [[ngFormBuilder]]. But the target of the project is to learn all available "free to use" Form.io components. Not only the builder, but also the renderer and maybe PDF. 
 +
 +
 +The IntelliJ project is placed in ''/mnt/sda4/development/workspaces.new/myFormioDemo''.
 +
 +
 +  * Angular Form.io Demo
 +    * [[https://formio.github.io/angular-demo/#/forms/renderer|Form.io Renderer]]
 +    * [[https://formio.github.io/angular-demo/#/forms/builder|Form.io Builder]]
 +
 +
 +===== UI elements =====
 +
 +Here is the list of all UI-elements which are implemented by surveylib (but not necessarily by the Avril app => check?):
 +  * Button 
 +    * Form.io
 +      * "type": "button"
 +  * Checkbox 
 +    * Form.io
 +      * "type": "checkbox"
 +  * Component 
 +    * Form.io
 +      * Layout/Content? 
 +      * Data/Container?
 +  * Content
 +    * Form.io
 +      * "type": "content"
 +  * Currency 
 +    * Form.io
 +      * "type": "currency"
 +  * DateTime 
 +    * Form.io
 +      * "type": "datetime"
 +  * Day 
 +    * Form.io
 +      * "type": "day"
 +  * EditGrid 
 +    * Form.io
 +      * "type": "textarea" ?
 +  * FieldSet
 +    * Form.io
 +      *  "type": "fieldset"
 +    * it can contain nested elements => not really necessary to implement in the first version
 +  * File
 +    * Form.io
 +      * "type": "file"
 +  * HtmlElement 
 +    * Form.io
 +      * "type": "htmlelement" ?
 +  * Number 
 +    * Form.io
 +      * "type": "number"
 +  * Panel 
 +    * Form.io
 +      * "type": "panel"
 +    * can contain embedded elements 
 +    * => it is not really necessary to implement it now
 +  * PhoneNumber
 +    * Form.io
 +      * "type": "phoneNumber"
 +  * Photo
 +    * Form.io
 +      * form.io have it only in non-free commercial version
 +    * => it should be implemented by my own 
 +  * Radio
 +    * "type": "radio"
 +  * Resource
 +    * Form.io
 +      * not available ?
 +  * Select
 +    * Form.io
 +      * "type": "select"
 +  * Selectboxes
 +    * Form.io
 +      * "type": "selectboxes"
 +  * Signature
 +    * Form.io
 +      * "type": "signature"
 +  * TextArea 
 +    * Form.io
 +      * "type": "textarea"
 +  * TextField
 +    * Form.io
 +      * "type": "textfield"
 +  * Time
 +    * Form.io
 +      * "type": "time"
 +
 +
 +The surveylib  defines following elements which can be used:
 +
 +  * Checkbox
 +  * Content
 +  * DateTime
 +  * Day
 +  * EditGrid
 +  * HtmlElement
 +  * Number
 +  * Photo
 +  * Radio
 +  * Signature
 +  * TextArea
 +  * TextField
 +  * Time
 +
 +
 +So currently not available are:
 +  * Button
 +  * Component
 +  * Currency
 +  * FieldSet
 +  * File
 +  * Panel
 +  * PhoneNumber
 +  * Resource
 +  * Select
 +  * Selectboxes
 +
 +===== form.io form builder =====
 +
 +  * https://github.com/formio/formio.js - Github project of "Vanilla JS" form.io 
 +    * [[https://formio.github.io/formio.js/app/examples|Examples]]
 +      * [[https://formio.github.io/formio.js/app/builder| Builder Demo]]
 +      * [[https://formio.github.io/formio.js/app/examples/pdf.html|PDF]] (-> use Chrome for it)
 +
 +  * https://github.com/formio/angular - Github project of form.io for Angular
 +
 +
 +  * Developer Docs
 +    * https://help.form.io/developers/introduction
 +    * https://help.form.io/developers/form-development/form-builder
 +
 +==== Older form.io projects ====
 +
 +  * https://github.com/formio/ngFormBuilder - Builder
 +    * Drag and Drop Angular.js(!)-based form builder
 +    * Creates JSON, which describes the survey form
 +    * [[https://formio.github.io/ngFormBuilder/|Demo]]
 +
 +  * https://github.com/formio/ngFormio - Renderer
 +
 +
 +===== Competition =====
 +
 +  * [[https://github.com/kevinchappell/formBuilder|FormBuilder]]
 +    * [[https://formBuilder.online|formBuilder.online]] - Demo
 +    * jQuery plugin
 +  * [[http://www.alpacajs.org/|Alpaca Forms]] - Easy Forms for jQuery ([[http://www.alpacajs.org/demos/form-builder/form-builder.html|Form Builder Demo]])
 +    * nice
 +    * js only
 +    * seems to be outdated 
 +      * latest version 2019?
 +  * [[https://jsonforms.io|JSONForms]]
 +    * Angular or React renderers possible
 +    * https://github.com/eclipsesource/jsonforms-editor -> [[https://jsonforms-editor.netlify.app/|JSONForms Editor Demo]]
 +  * [[https://github.com/shalotelli/form_builder|shalotelli/form_builder]] 
 +    * latest version from 2014
 +  * https://formtools.org/ 
 +    * nice, but PHP/MySQL script
 +  * [[https://openbase.io/packages/top-angular-forms-libraries|Best Angular Forms libraries]] - a list
 +  * [[https://ourcodeworld.com/articles/read/610/top-5-best-drag-and-drop-form-builders-plugins-for-javascript-and-jquery|Top 5 best drag and drop form builders plugins for JavaScript and jQuery]] - a list
 +  * [[https://budibase.com/blog/open-source-form-builder/|5 best open source form builder apps (tried and tested)]]
 +
 +==== Lists of form builder libs / components ====
 +
 +  * [[https://products.containerize.com/form/|Best Free and Open Source Web Form Generator]]
 +    * Form.io
 +      * https://github.com/formio/formio
 +    * Orbeon
 +      * https://github.com/orbeon/orbeon-forms
 +    * OhMyForm
 +      * https://github.com/ohmyform/ohmyform
 +    * Webiny
 +      * https://github.com/webiny/webiny-js
 +    * FormTools
 +      * https://github.com/formtools/core
 +    * FormBuilder
 +      * https://github.com/kevinchappell/formBuilder
 +      * https://formbuilder.online/
 +    * Alpaca Forms
 +      * https://github.com/gitana/alpaca
 +      * http://www.alpacajs.org/
 +