Incorporating Data Input Checks into Management Screens

This tutorial offers an example designed to show how you can utilize client-side scripts to incorporate data-input checking mechanisms into your Management Screen and thereby improve the interactive experience for the users of your Screen. Often when inputting data to a Management Screen or a Dynamic Form, it's very helpful to be able to check and validate this data as the user is navigating through the Screen and inputting data. This is by no means a replacement for validating the data when it is received by the Snippet used by a Screen, however it can help the user's understanding of the Screen and save the user's time by avoiding data input errors before they are sent.

There are three steps to complete in this example that shows you how to incorporate a time-constrained search box into a Screen:

Step 1. Set up a Basic Management Screen and Snippet

If you are not clear on how to do this, please review the Working with Dynamic Forms page in our main GameSparks Learn site to understand how to do this.

Step 2. Add Basic HTML

In this example, we're going to set up a time-constrained search box. This can useful as a client-side check for data input and can be applied to many other situations. First, we create a Snippet called search-snippet. Then, we need some basic elements to work from:

JavaScript Code

Spark.setScriptData("view", snippetProcessor(Spark.getData().scriptData));
function snippetProcessor(data) {
    return {};
}

Basic HTML Code

<gs-row>
    <gs-col width="3">
        <input type="text" name="name" id="name" />
    </gs-col>
    <gs-col width="3">

        <!-- Active From Search Box -->
        <input type="text" name="activeFrom" class="datepicker" id="activeFrom" />
    </gs-col>
    <gs-col width="3">

        <!-- Active Until Search Box -->
        <input type="text" name="activeUntil" class="datepicker" id="activeUntil" />
    </gs-col>
    <gs-col width="3">

        <!-- Submit Button -->
        <gs-submit></gs-submit>
    </gs-col>
</gs-row>
<script>
    $('.datepicker').datepicker();
</script>

Step 3. Referencing the HTML in jQuery

Once we have the base HTML setup for the Snippet, we can add the jQuery script that will check data input values as they are changed. Notice that we've added the gs-form and the gs-title-block tags:

HTML Code

<gs-title-block title="Search">
    <gs-row>
        <gs-form snippet="search-snippet" target="target">
            <gs-col width="3">
                <input type="text" name="name" id="name" />
            </gs-col>

            <gs-col width="3">
                <!-- Active From Search Box -->
                <input type="text" name="activeFrom" class="datepicker" id="activeFrom" />
            </gs-col>

            <gs-col width="3">
                <!-- Active Until Search Box -->
                <input type="text" name="activeUntil" class="datepicker" id="activeUntil" />
            </gs-col>

            <gs-col width="3">
                <!-- Submit Button -->
                <gs-submit></gs-submit>
            </gs-col>
        </gs-form>
    </gs-row>
</gs-title-block>

<script>
    $('.datepicker').datepicker();
    $("#activeFrom").on("change", function () { dateCheck(); });
    $("#activeUntil").on("change", function () { dateCheck(); });

    function dateCheck() {

        // Check the From date is before Now
        if (new Date($("#activeFrom").val()) < new Date())
            $("#activeFrom").val(getDate(new Date()));

        // Check Until is greater than From
        if (new Date($("#activeUntil").val()) < new Date($("#activeFrom").val()))
            $("#activeUntil").val($("#activeFrom").val());
    }


    function getDate(date) {

        var month = date.getMonth()+1
        if (month < 10) month = "0" + month;
        return month + "/" + date.getDate() + "/" + date.getFullYear();
    }
</script>

Did this page help you? Please enter your feedback below.