One of the things I have spent a lot of energy on in the latest release of Micro, is simplifying the creation of web forms. When you want to gather input from the user, you can use checkboxes, radio buttons, select dropdown lists, textareas, and text input elements. Most web forms use these same elements, and have a lot of common traits. For instance, both a textbox input element and a checkbox element normally have a label associated with it. By extracting these commonalities, and creating a way to more easily declare your web forms – I have made it possible to declare a rich web form, with a handful of lines of Hyperlambda.
In the video below I am demonstrating how to create a rich web form to gather input from the user. The end result will resemble the following screenshot.
The code I am using, can be found below.
create-widget class:container oninit p5.web.include-css-file:@MICRO/media/main.css p5.web.include-css-file:@MICRO/media/skins/sea-breeze.css widgets div class:row widgets div class:col-70 widgets div class:bg shaded rounded air-inner widgets micro.widgets.wizard-form:my-form h3 innerValue:Please supply data text info:Some textbox .data-field:text checkbox info:Check me .data-field:check checked br label innerValue:Textarea widget textarea info:Textarea widget ... .data-field:textarea radio-group .data-field:radio options Radio 1 .data-value:radio-1 Radio 2 .data-value:radio-2 checked Radio 3 .data-value:radio-3 select info:Select dropdown .data-field:select options Option 1:option-1 Option 2:option-2 selected div class:right widgets button innerValue:Save onclick micro.form.serialize:my-form eval-x:x:/+/**/pre/*/innerValue create-widgets micro.widgets.modal class:micro-modal widgets h3 innerValue:Result pre innerValue:x:/@micro.form.serialize
If you wish to test the above constructs, make sure you create a new lambda CMS page using System42, and set its “template” to “empty”. This is to avoid inclusion of Bootstrap CSS on your page, which will interfere with Micro. Below is a YouTube video guiding you through all the gory details.
The above code uses two important features of the latest Micro release.
The wizard form extension widget, takes a set of arguments, which allows you to declare what type of data you wish to collect. This implies that you don’t have to manually create the widget hierarchy yourself, and significantly simplifies the creation of your end DOM result.
The [micro.form.serialize] Active Event, recursively fetches all form element values from some given widget ID, and return to the caller with the [.data-field] being the structural data-field name for the property.
Further creating more rich functionality, adding the above data into a MySQL database or something, would be a no-brainer, requiring roughly 5 lines of additional code.