App Forms for Adding and Editing App Items

Some apps allow you to setup forms that you can use on your public website to allow visitors to add or edit app items. The General App, for example, provides a way for you to allow visitors to add apps items and optionally edit them. The Members app takes a different approach and allows visitors to register for membership and then be able to edit their member profile. Both of those apps use App Forms as the mechanism to build and manage those form types.

When you create a new 'add item' or 'edit item' App Form the system will automatically create form fields based on the attributes that you've already setup for the app item. 

You cannot create new fields for these types of App Forms as they are meant to be a direct representation of the available attributes for that app item. You can, however, edit the field properties and enable/disable form fields if you don't want to use them in your forms.

If you add a new attribute or edit the available values for an attribute the app forms will not automatically get those changes. You simply need to edit the App Form and save it to make the attribute changes reflected in the form fields. Whenever an 'add item' or 'edit item' App Form is edited the system automatically compares the form fields to the app item's attributes and makes any necessary adjustments.

Editing App Items with Image and File Upload Fields

For the most part you would use App Form fields when editing an app item the same as you would in any other form.  The exception to that is image and file upload fields. 

The way that saving app item attributes work is that if you submit a form and either don't include a particular attribute field or the field's value is empty then that attribute value is removed from the app item. With image and file upload fields the normal way that you submit a value is to actually upload an image or file. Well, that would be impractical to do every time you edit an app item.

The approach that we take is that if an image or file attribute has a value then the field is presented as a hidden form field. At minimum this ensures that if you just loop through the form fields in your template then when the form is submitted the existing image/file value will be submitted and it won't be lost. If, however, the image or file attribute does not have a value then the normal upload field type will be used.

Because of this approach there is a little bit extra work that you need to do to allow someone to upload a new file or image when editing. 

  1. First see if there is a value for the field. If so then we're going to have to a bit extra. You can test for this by seeing if the field type is "hidden", which would mean that the field will be outputted as a hidden form field. You will need to manually build the file upload field. You can also optionally show the image or file that was already uploaded.
  2. If there is no existing value for the field then you can simply output it and the file upload field will be shown.

Here is an example for a file upload field. In this case the layout key for the field is "file".

{if #form.fields.file.type == 'hidden'}
    {** The form field type is "hidden", which means that a file was uploaded previously. **}

    {** Show the uploaded file **}
    <p>The file you uploaded already is: {#form.fields.file.value}.</p>

    {** Output the hidden field **}
    {#form.fields.file.tag}

    {** Manually build the file upload field **}
    <input type="file" name="{#form.fields.file.name}" id="{#form.fields.file.id}">
{else}
    {** No file has been uploaded yet. Show the file upload field. **}
    {#form.fields.file.tag}
{/if}

Here is a similar example for an image upload field. In this case the layout key for the field is "image".

{if #form.fields.image.type == 'hidden'}
    {** The form field type is "hidden", which means that an image was uploaded previously. **}

    {** Show the uploaded image **}
    <p><img src="{#form.fields.image.value}" alt=""></p>

    {** Output the hidden field **}
    {#form.fields.image.tag}

    {** Manually build the file upload field **}
    <input type="file" name="{#form.fields.image.name}" id="{#form.fields.image.id}">
{else}
    {** No image has been uploaded yet. Show the file upload field. **}
    {#form.fields.image.tag}
{/if}