Simplifying web form creation – KISS

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.

When you click the Save button above, your input will be collected, and displayed in a modal widget, resembling the following.

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.

  • [micro.widgets.wizard-form]
  • [micro.form.serialize]

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.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s