Front-end Submit

 Last Edited: Jul 02, 2019

When you make a new WebApp, a front-end form file is automatically generated within your WebApp, in a folder called `form`. It automatically contains all fields from your WebApp. You can view this folder using Code Editor, it is next to the `detail` and `list` folders for your WebApp.

Syntax

Output your WebApp form on a page

{%- include 'webapp_form', id: 'custom_webapp_1' -%}

Toolbox has support for WebApp input forms, and the following options will be given in the modal, or you can set them yourself:

  • enabled - default is false - Boolean - Determines if items are auto-enabled or not

  • expiry_date - default is never expires - Timestamp - When the new item will expire

  • release_date - default is as soon as the form is submitted - Timestamp - When the new item will be released

  • upload_dir - String - default is documents/form_uploads/webapp_1/ Where uploaded files will be stored. Must follow this format - 'folder/optional_folder/'

Standard Fields

Some fields are required for the form to be able to set up the WebApp items correctly. These fields are for 'enabled', 'expiry_date', 'release_date', 'upload_dir', and 'slug'. They stay the same each form, and don't have a WebApp specific ID attached to them.

<input class="form-control" name="{{ form_builder.fields.properties.enabled.name }}" value="{{_enabled}}" type="hidden"> <input class="form-control" name="{{ form_builder.fields.properties.expiry_date.name }}" value="{{_expiry_date}}" type="hidden"> <input class="form-control" name="{{ form_builder.fields.properties.release_date.name }}" value="{{_release_date}}" type="hidden"> <input class="form-control upload_dir" value="{{_upload_dir}}" type="hidden"> <input class="form-control" name="{{ form_builder.fields.properties.slug.name }}" type="hidden">

All forms should be wrapped in a Liquid form tag:


{% form -%}{% endform -%}

All forms need a submission button:

<button onClick="formSubmit(this,'webapp_1')">Submit</button>