Learn More about Frontend Development

Prerequisites: This tutorial assumes that you have already set up a Category and Procedure if necessary. This page covers some of the basics that are involved in Front End development using the MOX language.

Forms

One of the most powerful commands in Moxie is the HtmlForm command. This command will generate a dynamic form based off of the fields and field attributes that are currently present in the Work Query. This allows you to easily create elaborate forms with input types such as DatePickers, MarkDown, HTML and many more very quickly and easily.

Example: A Simple form displaying the use of the [Placeholder], [DatePicker], [MHtml] field attributes


NewFields            "Name Email DOB Signature"
GetFieldDefs

WorkWith            "Name#"
    Set                "Label",         "`Full Name"
    Set                "Attr",          "`[Placeholder] John Doe"

WorkWith            "Email#"
    Set                "Label",         "`Email Address"
    Set                "Attr",          "`[Placeholder] [email protected]"

WorkWith            "DOB#"
    Set                "Label",         "`Date of Birth"
    Set                "Attr",          ("`[DatePicker]" & $I & "[Placeholder] Select a Date") 'Note: $I is used to separate Field Attributes when there is more than 1
    
WorkWith            "Signature#"
    Set                "Label",         "`Signature"
    Set                "Attr",          "`[MHtml]"
End WorkWith    
    
HtmlForm            "FormExample", "Submit", "?"



Tables

 Another very powerful command is the HtmlTable command. This command will output the entire Work Query in a table format. HtmlTable is a very useful debugging tool, but it can also be used as a way to build simple user interfaces by shaping the table to our needs.

Example: Here, we create a dynamic fieldas our delete button inside of an HtmlTablecommand


LoadTable        "MemTab.Person"
NewFields        "Delete"
Build        "", "Delete",                   "`<a href='?Action=DeletePerson&PersonAlias=", "MemTab.Person.Alias", "'><i class='glyphicon glyphicon-remove'></i></a>", ""

DeleteFields     "MemTab.Person.Alias"
HtmlTable        "TableExample", "Replace", "table table-hover"

First NameLast NameMemTab Person AgeDelete
Person11
Person22
Person33

Custom HTML

Often times, we need to write custom HTML apart from Forms and Tables. The HtmlBlock and HtmlBlocks commands provide an easy way to create completely custom HTML with the ability to input any data that may reside in our Work Query or Top Query.

Example: Creating a dynamic tab structure using Twitter's Bootstrap 3 based off of the data in our Work Query


Rem 'Get our data
    LoadTable   "MemTab.Person"
    NewFields   "activeClass"
    SetFirst    "activeClass", "`active"
EndRem

Rem 'Build a custom Tab Structure
    HtmlBlock "CustomExample"
        <ul class="nav nav-tabs">
    End HtmlBlock

        HtmlBlocks "CustomExample"
              <li role="presentation" class="{{activeClass}}"><a data-toggle="tab" href="#{{MemTab.Person.Alias}}">{{MemTab.Person.FirstName}} {{MemTab.Person.LastName}}</a></li>
        End HtmlBlocks

    HtmlBlock "CustomExample"
        </ul>
        <div class="tab-content">
    End HtmlBlock

        HtmlBlocks "CustomExample"
            <div id="{{MemTab.Person.Alias}}" class="tab-pane fade in {{activeClass}}">
              <h3>{{MemTab.Person.FirstName}} {{MemTab.Person.LastName}}</h3>
              <p>Age: {{MemTab.Person.Age}}</p>
            </div>
        End HtmlBlocks
      
     HtmlBlock "CustomExample"
        </div>
    End HtmlBlock
EndRem

Person 1

Age: 1

Person 2

Age: 2

Person 3

Age: 3