Part 5: Create a Web Form

From AgileApps Support Wiki
Revision as of 14:24, 11 December 2022 by Wikieditor (talk | contribs)

In this part of the exercise, you define a Web Form for Orders for use in on an external site.

  1. Because a Web Form is meant for external customers, it requires two additional fields which you need to create first:
    1. Go to the Configuration page, under the Customization tile, click Objects. Navigate to Orders > Fields.
    2. Create two new fields: From Name (Text Field) and From Address (Email Address).
  2. Go to the Configuration page, under the Customization tile click Objects. Navigate to Orders > Forms > Default Layout.
  3. Click Clone Layout.

    Objects Orders Forms FormDefaultLayout CloneLayout.png

  4. For the Name, type WebOrderLayout, and then select the Web Forms option.

    Clone Layout.png

    Accept the note that some fields are mandatory for the selected layout and click Save.
  5. Add a Form Control of type Section to the top of the Form, named Submitter Information.
  6. As the From Name and From Address fields already appear in the Basic Information section by default, move them to the new Submitter Information section.
  7. Moreover, add Field Subject from the Elements panel to the Submitter Information section.
    Note: All mandatory fields as mentioned in the note above now belong to your Web Form.

    Form WebOrderLayout.png

  8. Click Save Changes. 
  9. Moreover, edit the properties of the fields From Name, From Address, Subject, and Description to make them all Required fields.

    Change Field Properties.png

  10. Go to the Configuration page, under the Customization tile, click Objects. Navigate to Orders > Web Forms and click New Web Form.
  11. Fill-in the fields as shown in the following screenshot:
    Choose MyWebForm as Title and provide a Description. For the Generate option, the Case Form Link setting means that you will be given a URL link for the Web Form. Select your WebOrderLayout Form from the drop-down and provide your own User Profile.

    New Web Form MyWebForm.PNG

  12. Click Save.
  13. A Link box opens with instructions for copying and pasting the provided script:

    Web Form Script.PNG

    Follow the “alternative directions” by copying and pasting the provided URL into a new Web browser tab to see your resulting Web Form:

    Web Form Browser.PNG

  14. Optionally, edit the Web Form to generate customizable HTML instead:
    1. Go to the Configuration page, under the Customization tile, click Objects. Navigate to Orders > Web Forms.
    2. Edit the Web Form MyWebForm as shown, specifying Customizable HTML for the Generate option and selecting the highlighted fields:

      Objects Orders Web Forms MyWebForm.png

    3. Click Save.
    4. Click Generate HTML.

      Customizable Web Form Generate HTML.PNG

    5. Copy and paste the provided code into a Text editor, such as Notepad. Save the file with an HTML extension (for example, MyWebOrder.html).
    6. Double-click on the HTML file saved above to open it in a new Web browser tab:

      MyOrder Web Form.png

  15. Housekeeping: Remove fields From Name and From Address from the Default Layout form of the Orders object as they are only required on the Web Form:
    1. Go to the Configuration page, under the Customization tile, click Objects. Navigate to Orders > Forms.
    2. Select Default Layout. Remove fields From Name and From Address from the section Basic Information.
    3. Click Save Changes.

Taking It Further

To extend what you learned in this exercise, use the AgileApps Cloud wiki pages (http://agileappscloud.info/) to learn how to implement Form Scripts in your AgileApps application.