Aiki forms 2

From Aikiframework wiki

Aiki Forms do exist, but they are not user friendly and not very stable. We need a complete update/rewrite of these forms to work for more humans This document must interpreted as a guideline to implements new form. Perhaps some feature will not be available in first version

+This section is incomplete. You can help by expanding it.

Contents 1 Specification 2 Ideas 3 markup 3.1 form 3.1.1 Description of a form 3.1.2 Description of a controls 3.1.3 Notes 3.1.4 Comments 3.1.5 Conclusion

Specification

+This section is incomplete. You can help by expanding it.

Ideas

• Improve Dynamic Select Box functionality
  • Currently, using Aiki Forms, it's possible to generate a select box in the form that contains values that have been pulled from the db. To do this, in the back-end of the Aiki Form, you enter something like the following for the field & give it a type of 'selection':

usergroup|SystemGOD:User Group:aiki_users_groups:id:name:where id = (1)

• Connected forms - you insert one form and then another one with id from that first one, and it will insert data to 2 tables that are with relationship.
  • Ajaxable forms - multi forms added via ajax not via submit - they will be faster, but should work without javascript too -- Jcubic 10:00, 8 March 2012 (UTC)

• PostProcessing and PreProcessing values - we need to distinguish values that came from aiki markup and values that will be processed before they are inserted into database - like filters or values taken from other fields. -- Jcubic 10:00, 8 March 2012 (UTC)

• Need syntax for validators - that will not allow to enter sertain characters or validate input with javascript or in post processing -- Jcubic 10:11, 8 March 2012 (UTC) (I think that we can skip javascript validators because they can be added to existed form by user using <script>)

• Notice the conditional statement in the above example. If you wanted to make that equal to a string rather than a number (say, where name == '(!(1)!)' or where name == "brad") the Aiki Form breaks as soon as you save that form with your changes. I'd really like to be able to also compare strings. I'm assuming the quotes are breaking the parsing of the Aiki Form. -- Bradphillips 06:46, 9 February 2012 (UTC)

• There will be a way to make a entire forms, and only a input-user-control. This can be useful in forms that can't be implemented in standard way

markup

form

 (form(
   {"table": "foo_users",   "pkeyfield" : "user_id",   "pkey" "102",  "id": "f_edit_user",  "action": "user/save"  "layout": "table"},
    
   { "type":"fieldset", "legend:", "User data", "id": "user-data"}
   { "name":"username" ,"label": "User name", "type": "string", "process": "strip_tags(_self)", "size": 60},
   { "name":"gender"   ,"label": "Gender", "type": "gender"  },
   { "name": "user_birtday", "label": "Birtday", "type": data  , "aditional": "fill, and we send you a present"},
    
   { "type":"fieldset", "legend:", "User status", "id": "user-status"}
   { "name": "user_active", "label": "Is active", "type": "checkbox" },
   { "name": "user_type"   , "label": "Type", "type": "radios" , "list": { 0:"normal", 1:"advanced",2:"master"}},
   { "name": "user_groups" . "label": "Group", "type": "select", "list": "SELECT group_id, group_name FROM table_name"}
     
   )form)

Description of a form

• table - tablename to save/insert data and to load them if not SQL fields is provided
• SQL - optional. SQL statement to load data. Use it when you want show data from two tables, but only insert in one.
• pkeyfield - primary key fields
• pkey - a existing id for edit or false to add. You can use aikimarkup for example: id: (!(2)!),

• layout - one on this table,dl, div, p-br, p,..and set how code html tags

HTML attributes of form (all optional):

• id .Form id. If not given aiki will add a automatic id beginning with "f_", to avoid duplicate id fields.
• class .Form class
• 'actionform attribute.</strike> - automatic url of the form - forms are not front-end only
• onsubmit
• onreset
• method
• enctype

Description of a controls

• _self - will be the value of the field it can be $ it will be inside post-process field inside function
• select - string (mean sql - first field will be value) or object <option value="key">value</option>
• process - process field before inserting into database should be NOTE: the value should not be posted into value atribute but taken from form (should be any expression like _self+1 or 'user_' + to_acsii(_self) ) or can be function without argument like datetime() or timestamp() - we should also alow extensions here.
• size will limit field in javascript or html and validate on server side.

• name
• label: text before 'input'
• aditional: text after input.
• access: condition required to see the field. For example, when adding, the id field or last change will be hidden.
• type:
  • output. raw html output.
  • number integer should not be restricted to min and max it should only have size, if precision is set then it will be float like precision="3" it will give 3 numbers after comma.
  • what about float with precision="3" and integer and without number?
  • spiner - number and up/down arrows it can have from="10" and to="20" if presition is set then it will be float (Maybe we should use only one type "number" as a spiner)
  • checkbox
  • gender
  • date, date-future,date-past.
  • hidden
  • password
  • email, url this kind of thing can be implemented as validators and have valiadotr on client side too (they can use html5 or javascript) - if we have this then we will need to create lots of other input fields, forms should be mininal the same as markup.
  • text
    • Attributes: size, maxlenght (like html)
  • textarea
    • Attributes: cols, rows, editor
    • editor: code-mirror, (for text with a wysiwyg editor)
  • file - ajax upload as option
  • select
  • radio
  • image - can be ajax upload as option and show image preview
  • time only timer
  • datetime - datepicker and timer (maybe we should have only 2 types)

Common attributes for all field:

• • class
  • id.

We need to put other only if they have different interface (like dateicker which I just added).

Notes

• All html5 tag plus user-friendly for most common input: gender,date-past,date-future,code (a text with codemirro),rich-text....?
• use html name for fields and attributes (more easy to learn, so text,textarea)
• I prefer type="integer" [precision="1"] from="1" to="10"
• validate should be regex for validation.
• 90% of users can't edit text field with raw HTML tag. They needed a WYSWYG editor (like jwysiwyg,small,faster,very lightweight) and we should allow for code editor as well (using codemirror)

With type "select" and "radios" a attribute list must be given as there must be "select" value wich must be string (sql) or object (key/values pairs). * string with comas separated values.

• sql statements. "SQL:.."
• json array.

Other: There will be a option for auto generate a form from database, - I don't like autogenerate I prefer to show users help in Admin Panel -- Jcubic 10:00, 8 March 2012 (UTC)

Comments

Some comments: Christopher Adams 06:57, 23 March 2012 (UTC)

• The "process": field is exactly what I have been looking for! In addition to calling functions, is there a way to apply logic? There would seem to be a need both for the ability to process the input with a function, but also to run some true/false test on it before inserting into the database. Maybe there should be two fields, "process": and "validation": ?

I also want to see more about how to load and insert form values from/to multiple tables.

• the "placeholder" - I would like to have this field. If browsers don't support it, Aiki does not have to do anything. Site designers have the choice of using a placeholder polyfill if they want, but there is no reason to bake that into Aiki.

• in addition I would like a way to disable a form element. To do that you need to add class="disabled" and disabled="" to the <input>

• the "layout": - I want to know more about this

If I am using a CSS framework to design a site, I often need my forms to follow the framework's form markup. At this point my only solution is to use JavaScript to rewrite the form before the page loads.

There's no way for Aiki forms engine to support every kind of form markup.

I wonder if instead the Aiki forms markup could allow us to interleave HTML and aiki markup.

{ "type":"custom" }

Conclusion

• forms can be re-written as widget markup.
• flexible: all attributes must be optional