Customizing the edit form

When looking at the auto-generated HTML that makes a mobile form, you will see something like this:

<!-- Last edited: November 17 @ 17:49 PST -->
<link rel="stylesheet" href="bootstrap.min.css"/>
<link rel="stylesheet" href="mobiscroll.datetime.css"/>
<link rel="stylesheet" href="form-edit.css"/>
<script src="bootstrap.min.js"></script>
<script src="mobiscroll.datetime.min.js"></script>
<div id="single-row-view">
<ul>

<li>
<div id="some_text" class="value-group">
<label class="name"
>Some Text</label>

<span class="assignment">:</span>

<input type="text" class="value"


></input>


</div>
</li><li>
<div id="some_number" class="value-group">
<label class="name"
>Some Number</label>

<span class="assignment">:</span>

<input type="number" step="1" class="value"


></input>


</div>
</li><li>
<div id="a_picklist" class="value-group">
<label class="name"
>A Picklist</label>

<span class="assignment">:</span>


<select class="value" id="picklist-a_picklist">
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>

</select>



</div>
</li><li>
<div id="the_geometry" class="value-group">
<label class="name"
>The Geometry</label>

<div class="action-btn-group">
<a class="edit-geometry-btn">Edit</a>
</div>

</div>
</li><li>
<div id="amigo_id" class="value-group">
<label class="name"
>amigo_id</label>

<span class="assignment">:</span>

<input type="text" class="value"


></input>


</div>
</li>

</ul>
</div>

Remember that all forms depend on the schema of their parent dataset, so yours won't look exactly like this this one. It will, however, have the same structure and the same important pieces. Let's look at them.

The containing element

<div id="single-row-view">

All forms must be inside a div with id "single-row-view". Our internal script looks for this element to initialize the form.

Field input sections

<div id="amigo_id" class="value-group">

For each field (aka column) on your dataset, you need to have a containing div element whose id is exactly the same as that column's name. In addition to this, the CSS class of this field should be "value-group". That last part can be optional in case you want to override our default CSS.

Protip: If you don't want one of your fields to be editable in the form, simply delete its containing div from the HTML. This won't break the mobile forms, they just won't register any changes for that particular field.

Regular fields input

<label class="name"
>Some Text</label>

<span class="assignment">:</span>

<input type="text" class="value"


></input>

Regular fields have three parts by default: the name, the assignment character and the input element. They have the css classes "name", "assignment" and "value" respectively.

If you want to make your form easier to understand for your users, you can change the text shown in the label. Instead of it being "Some Text" (which is the default display name of the some_text column in this example), you could have it be "Please write your favorite quote of Captain Jack Sparrow" or whatever you like. This can make a form more guided. You can even replace with more complex HTML to completely change the face of your form.

The assignment element is optional, altering it or removing it won't affect functionality.

The input element needs to have class="value" for our internal script to know that changes are happening there.

Things to remember:

• A form should always be inside <div id="single-row-view>
• A field should always be inside <div id="the_field_name" class="value-group>
• As long as the previous two are respected, you can go wild with the rest of the parts.