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.

Note: To make this example code work, add another line of code (can be at the beginning or end, it doesn't matter where you add this code) using the Html command with a single parameter "< ? FormExample ? >" (without the spaces between angle brackets and question marks).

Code
Example

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.

Note: To make this example code work, add another line of code (can be at the beginning or end, it doesn't matter where you add this code) using the Html command with a single parameter "< ? TableExample ? >" (without the spaces between angle brackets and question marks).

Code
Example

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 Name	Last Name	MemTab Person Age
Person	1	1
Person	2	2
Person	3	3

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.

Note: To make this example code work, add another line of code (can be at the beginning or end, it doesn't matter where you add this code) using the Html command with a single parameter "< ? CustomExample ? >" (without the spaces between angle brackets and question marks).

Code
Example

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

Alerts

Alerts are an extremely important part of every application and Moxie.Build makes it extremely easy to place custom alerts anywhere you want. In this example, we trigger alerts using the HtmlAlert and HtmlErr commands We also utilize the HtmlButton and HtmlAButton commands as additional ways to trigger dynamic alerts.

Note: To make this example code work, begin each of the four lines within the Rem 'Set up our form and alert template areas block with Html " and end them with ".

Code
Example

Rem 'Set up our form and alert template areas
    <? FormAlerts ?>
    <? AlertForm ?>
    <? AlertAButton ?>
    <? AlertButton ?>
EndRem

Rem 'Create our form
    Reset
    NewFields           "Username Password"
    SetNew              "Username#Label", "`Username"
    SetNew              "Password#Label", "`Password"
    HtmlForm            "AlertForm", "<? i log-in ?> Trigger HtmlAlert", "?Action=TriggerFormAlerts#AlertCode"
EndRem

Rem 'Create some additional ways to trigger Alerts
    HtmlAButton         "AlertAButton", "<? i home ?> Trigger HtmlErr", "?Action=TriggerMainErrorAlerts#AlertCode"
    HtmlButton          "AlertButton", "<? i trash ?> Trigger All Alerts", "?Action=TriggerAllAlerts#AlertCode"
EndRem

Rem 'Apply alerts based on the last Request
    [Pull] Action Req.IsPost Req.IsGet
    If Req.IsPost : And Action = "TriggerFormAlerts" 
        HtmlAlert           "FormAlerts", "&success", "<b>Success:</b> Something good just happened."
        HtmlAlert           "FormAlerts", "&danger", "<b>Error:</b> Please provide a valid email address."
        HtmlAlert           "FormAlerts", "&info", "<b>Important:</b> A subtle alert box to provide non critical information."
        HtmlAlert           "FormAlerts", "&warning", "<b>Warning:</b> You need to be careful about this."
    ElseIf Req.IsGet : And Action = "TriggerMainErrorAlerts"
        HtmlErr             "<b>Error:</b> You used the HtmlErr command and this alert appeared in the MainErrors template."
    ElseIf Req.IsPost : And Action = "TriggerAllAlerts"
        HtmlErr             "<b>Error:</b> You used the HtmlErr command and this alert appeared in the MainErrors template."
        HtmlAlert           "FormAlerts", "&success", "<b>Success:</b> Something good just happened."
        HtmlAlert           "FormAlerts", "&danger", "<b>Error:</b> Please provide a valid email address."
        HtmlAlert           "FormAlerts", "&info", "<b>Important:</b> A subtle alert box to provide non critical information."
        HtmlAlert           "FormAlerts", "&warning", "<b>Warning:</b> You need to be careful about this."
    End If
EndRem

Trigger HtmlErr