The Mobile Impact Platform lets designers handle multiple events, such as when a field gets data, within script code. This article illustrates how to handle events that may be triggered by multiple user actions.

As an example, let's assume a form that has the following fields:

• City
• State
• Zipcode
• Quantity
• Cost
• Total

And let's assume that when a user enters a zipcode, we want to programatically set the City & State fields. To do so, we'd first click on the AfterSetData event in the right hand side, which would insert code that looks like this:

// Triggered when a field's value changes
function EH_AfterSetData(fieldName) {
    
}

Note that this event handler is passed a parameter named fieldName. This parameter is going to be set to the name of the field who's data has been set. This means that we want to check this parameter in order to take appropriate action. First, we'll add code for the zipcode handling. This would look something like the following:

// Triggered when a field's value changes
function EH_AfterSetData(fieldName) 
{
    if (fieldName == "Zipcode")
    {
        populateCityAndState();
    }
}

Now, when the user enters a quantity we want to also calculate the total field. If we click on the AfterSetData event again, you'll note that your cursor is navigated to the already existing code snippet. It does not create another function. If you are copy and pasting code, you may be tempted to create code that looks something like this:

// Triggered when a field's value changes
function EH_AfterSetData(fieldName) 
{
    if (fieldName == "Zipcode")
    {
        populateCityAndState();
    }
}

// Triggered when a field's value changes
function EH_AfterSetData(fieldName) 
{
    if (fieldName == "Quantity")
    {
        calculateTotal();
    }
}

If you're just skimming, the code shown above is incorrect!

But, this is not how script code executes. Mi-Apps will look for the single function named EH_AfterSetData, and therefore your code should be structured as follows:

// Triggered when a field's value changes
function EH_AfterSetData(fieldName) 
{
    if (fieldName == "Zipcode")
    {
        populateCityAndState();
    }
    else if (fieldName == "Quantity")
    {
        calculateTotal();
    }
}

Of course, in reality, we'd also want to calculate this total not just when the quantity changes, but also when the cost changes. This can be handled with a simple "or" expression and the final code would look like this:

// Triggered when a field's value changes
function EH_AfterSetData(fieldName) 
{
    if (fieldName == "Zipcode")
    {
        populateCityAndState();
    }
    else if (fieldName == "Quantity" || fieldName == "Cost")
    {
        calculateTotal();
    }
}

This same methodology applies to all events, so for example if you have two hotspots on the form as follows:

• Save
• Cancel

Your code would look similar to this:

// Triggered when a hotspot is pressed
function EH_HotspotPressed(fieldName) 
{
    if (fieldName == "Save")
    {
        handleSave();
    }    
    else if (fieldName == "Cancel")
    {
        handleCancel();
    }
}