Search Results for

    Show / Hide Table of Contents

    Component: Form management - Receipt form

    Introduction

    The receipt form is used to displayed after the end user submits the form. A receipt form is a digital paper of message proving that information has been submitted successfully.

    The receipt forms are displayed on the list with information like: Name, Status, Description, Last published time, Last modified time, Last modified by, and Active status.

    image-20230608142245813

    You can add, edit, delete the receipt forms. You can also clone new receipt form from an existing one, publish forms, import forms from JSON file, and export it to a JSON file.

    Guideline

    Add receipt form

    image-20230608153927617

    By clicking on the Add button, the Add new receipt form dialog will be opened.

    image-20230608154305565

    The dialog includes General tab with the following fields:

    • Name

      • This field is required.
      • Name of the receipt form must be unique.
    • Description

      • This field is optional.
      • You can describe more information of the receipt form.
    • Active

      • By default, the receipt form is active. You can deactivate it by unticking the checkbox.
      • An inactive receipt form will not be available in the Receipt page configuration in the Action configuration of Form.
    • Status

      • The default status of a new receipt form is Draft.
      • A form can has one of these status: Draft, and Published.
        • Draft: A receipt form has Draft status when it is newly created, or it is edited after being published.
        • Published: A receipt form has Published status after it is published successfully.

    Edit receipt form

    image-20230608154333692

    The Edit receipt form dialog will be opened after a new form is created successfully or via the Edit button,

    The Edit receipt form dialog includes 3 tabs: General, Design, and Preview.

    General

    This tab displays all saved general information of the receipt form, like: Name, Description, Active, and Status. These fields are available to update.

    image-20230608154550426

    Design

    image-20230608154829019

    The Design tab includes 2 sections: fields list, and form design area.

    The fields list includes 2 types of field: layout fields from Form.io, and fields from form data source.

    Similar to the Form design, you must select the form data sources, then drag and drop the fields to design the receipt form. You can explore more in this article Component: Form Management - Forms

    Preview

    image-20230608155452371

    After completing designing, you must save the changes before going to the Preview tab to preview the rendered form and publish it.

    In preview mode, you can view how the designed form displays after being published. The receipt form is a read-only form, so all fields in preview mode are also in read-only mode.

    Besides previewing the designed receipt form, you can publish the form with the Public button.

    image-20230608155532779

    By clicking on the Public button, a confirmation dialog will be opened.

    image-20230608155615407

    If you selects the Yes button, the receipt form will be published immediately. If you selects the No button, the publication will be cancelled.

    Delete receipt form

    image-20230608155635845

    The Delete button is only enabled after a receipt form is selected.

    By clicking on the Delete button, the deletion confirmation dialog will be opened.

    image-20230608155730882

    If you selects the No button, the deletion will be cancelled.

    If you selects the Yes button, the receipt form will be deleted immediately if it is not used for any form. If the receipt form is already in use, the deletion is disallowed. After the deletion process has completed, the deleted receipt form will no longer be accessible in public site.

    Other actions

    Clone new receipt form

    image-20230608155847995

    The Clone button is only enabled after an item on the list of receipt forms is selected.

    By clicking on the Clone button, a confirmation dialog for cloning will be opened.

    image-20230608155936861

    If you select the No button, the cloning process will be cancelled. If you select the Yes button, the cloning process will be started, and it will take a while to complete.

    After the cloning process has completed, the new receipt form dialog will be opened. Name of the new form includes name of the original form and the suffix. Status of the new receipt form is Draft by default.

    image-20230608161024828

    The new receipt form inherits the form design and all configurations of the original receipt form.

    Publish receipt form

    Besides publishing form in the Edit receipt form dialog, you can also publish a form, multiple forms or all forms but does not have to open each form to publish it.

    • Publish a receipt form
      • You can select a form then clicks on the Publish button, the selected form will be published immediately.

    image-20230608161549977

    • Publish multiple receipt forms
      • You can select multiple forms then clicks on the Publish button, the selected forms will be published immediately.

    image-20230608161638790

    • Publish all receipt forms

      image-20230608161750064

      • By clicking on the Publish all button, a confirmation dialog of publication will be opened. If you select the Yes button, all receipt forms of which status is Draft will be published immediately. If you select the No button, the publication will be cancelled.

    image-20230608161842659

    Import receipt forms

    image-20230608162100177

    Besides creating receipt forms manually, you can import a list of receipt forms from a JSON file.

    By clicking on the Import button, the Import form actions dialog will be opened. You can select a JSON file and upload it via the File upload field.

    image-20230608162202137

    The imported receipt forms will be displayed on the Receipt forms list after the import process finishes.

    Export receipt forms

    image-20230608162110698

    By clicking on the Export button, the list of receipt forms will be exported immediately as JSON file. You can also export one or multiple forms instead of whole list by selecting the receipt forms, then clicking on the Export button.

    Next section

    Component: Form Management - Form Actions

    In This Article
    Back to top Generated by DocFX