Making a field required

There are times when you would like a field to act required, but still allow null values in the database. Sometimes this happens when you have existing data with a field that was not populated correctly, but in the future, you want to make sure the field is always populated. 

To do this, you can add a little bit of javascript and css to the mobile form in order to highlight the field as required.

Step 1: Set the initial state of the style

First, set the field as invalid if there is no default value.  If you have one, the field will automatically be populated with the default value and there is no need to change any of the html attributes to highlight the field when the form is opened.

If you need to set at is invalid, find the field in your form and add the class "input-error" to the style. Here is an example with a datetime field: 

Before: 

<li>
   <div id="pseudo_required_date" class="value-group">
      <label class="name">pseudo_required_date</label>
      <span class="assignment">:</span>
      <input type="text" class="value datetime" readonly="true" data-date-format="YYYY-MM-DD HH:mm:ss"></input>
   </div>
</li>

After: 

<li>
   <div id="pseudo_required_date" class="value-group">
      <label class="name">pseudo_required_date</label>
      <span class="assignment">:</span>
      <input type="text" class="value datetime input-error" readonly="true" data-date-format="YYYY-MM-DD HH:mm:ss"></input>
   </div>
</li>

Step 2: Change style as it is edited

At the top of the form, add this javascript to remove the input-error class when the field has a value set. In this small script, we are locating the <div> tag by it's id. In this case it is "pseudo_required_decimal" and then looking for a descendant of type "<input>" Then we check to see if it has a value or not. If it doesn't we add the input-error, and if it does, then we remove it. 

Javascript: 

<script>
    $("#pseudo_required_decimal input").keyup("ready", function () {
    if (!$(this).val()) {
        $(this).addClass('input-error');
    } else {
        $(this).removeClass('input-error');
    }
});
</script> 

HTML:
<li>
   <div id="pseudo_required_decimal" class="value-group">
       <label class="name">pseudo_required_decimal</label>
       <span class="assignment">:</span>
       <input type="number" step="0.001" pattern="[0-9]+([\.][0-9]+)?" class="value input-error"></input>
   </div>
</li>

for more information on jQuery selectors see their documentation. 

Step 3: Prevent the form from being saved 

The forms are able to communicate with the mobile device using callback functions. One of the callback functions is the set state function. 

AmigoPlatform.setState(

        JSON.stringify({

              ... parameters ... 

        })
    );

The set state function takes some parameters, converts them to json and sends it to the mobile device. Then the mobile device will change the ui around the form to show/hide buttons according to what you wanted. 

The following parameters are used: 

formType  - this is the type of form that it is currently on. Valid values are 'edit_block' for the edit form, 'create_block' for the create form, and 'table_block' for the table form.

saveBtn - This is a boolean that indicates whether or not the save button will be shown. The save button is located on the create and edit forms. This is the button we want to change in this example. 

deleteBtn - This is a boolean that indicates whether or not the delete button will be shown. The delete button is located on the edit, and table forms. This should be true for those forms and false for the create form. 

checkBtn - This is a boolean that indicates whether or not to save related records. It is shown on the table form, but only when you are selecting records to be related to an existing record. Normally, this will be false.

relationshipDeleteBtn - This is a boolean that indicates whether or not to delete the relationship or the relationship and the row. It is used to change the UI when you have composite or non composite relationships. It is only available on the table form when looking at a related dataset. It depends on the type of relationship as to whether it is true or false. On create and edit forms it should be false. 

data - This is the data the form is displaying. For edit forms and create forms, set it to Amigo.currentRow. For the table forms set it to Amigo.currentTableRows . 

currentDatasetId - This is the current dataset's id. Set it to Amigo.currentDatasetId

Here are some examples: 

A function disabling the save on a create form: 

function disableSaveButton(){
    AmigoPlatform.setState(
        JSON.stringify({
            formType: 'create_block',
            saveBtn: false,
            deleteBtn: false,
            checkBtn: false,
            relationshipDeleteBtn: false,
            data:Amigo.currentRow,
            currentDatasetId: Amigo.currentDatasetId
        })
    );
}

A function enabling the save button on a create form: 

function enableSaveButton(){
    AmigoPlatform.setState(
        JSON.stringify({
            formType: 'create_block',
            saveBtn: true,
            deleteBtn: false,
            checkBtn: false,
            relationshipDeleteBtn: false,
            data:Amigo.currentRow,
            currentDatasetId: Amigo.currentDatasetId
        })
    );
}

Disabling the save button on an edit form:

function disableSaveButton(){
    AmigoPlatform.setState(
        JSON.stringify({
            formType: 'edit_block',
            saveBtn: false,
            deleteBtn: true,
            checkBtn: false,
            relationshipDeleteBtn: false,
            data:Amigo.currentRow,
            currentDatasetId: Amigo.currentDatasetId
        })
    );
}

Enabling the save button on an edit form: 

function enableSaveButton(){
    AmigoPlatform.setState(
        JSON.stringify({
            formType: 'edit_block',
            saveBtn: true,
            deleteBtn: true,
            checkBtn: false,
            relationshipDeleteBtn: false,
            data:Amigo.currentRow,
            currentDatasetId: Amigo.currentDatasetId
        })
    );
}

These functions can be added to your script tag and you can add calls to these functions in your event handler to add/remove the save button as people edit the field: 

<script>
   $("#pseudo_required_decimal input").keyup("ready", function () {
   if (!$(this).val()) {
       $(this).addClass('input-error');
       disableSaveButton();
   } else {
       $(this).removeClass('input-error');
       enableSaveButton();
   }
});
</script> 

Step 4: Disable save button when form opens 

In the case where you do not have a default value, the state of the field is invalid when the form opens. This is common with the create form, not so common with the edit form. 

In order to disable the save button when the form loads you can use some javascript and jQuery to check to see if the form has finished loading and switch the state. 

var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
        disableSaveButton();
    }
}, 10);