View controls may be configured to trigger a “command” in their corresponding Synchro module. The kind of action that may be configured to trigger a command varies based on the control, and can be anything from a button being pushed, to a text control be edited, to location services being detected.

In the example below, when the button is pushed, the onSubmit command will be called. The actual implementation of the command runs in the context of the Synchro app module on the Synchro Server. The viewModel passed to the command will always reflect the current state of the ViewModel on the client.

Note that we have also bound the enabled attribute of the button to the userName, such that the button will only be enabled when the userName has a value.

Module: hello4.js - View on GitHub


exports.InitializeViewModel = function(context, session)
{
    return {
        userName: "Jane Smith"
    };
}

exports.View = {
    title: "Hello World 4",
    elements: [
        { control: "edit", binding: "userName", placeholder: "enter name" },
        { control: "text", value: "Hello {userName}", visibility: "{userName}" },
        { control: "button", caption: "Submit", binding: "onSubmit", enabled: "{userName}" }
    ]
};

exports.Commands =
{
    onSubmit: function(context, session, viewModel)
    {
        Synchro.showMessage(context, {
            title: "Hello World",
            message: "User name: " + viewModel.userName
        });
    }
}

The module will look like this on mobile client (the Hello message and “Submit” button state will reflect the contents of the user name in real-time):

Hello 4

When the “Submit” button is clicked, you will see a platform-specific form of message box, as below:

Hello 4a

Next - Hello 5: View with value conversion