Building a visitor submitted powered Web App

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

In this article, you will learn how to create a web app that allows visitors to login, register and submit web app items.

This article requires a basic understanding of the following areas:

In order to submit a Web App item, a site visitor must be registered and logged into a secure zone before submitting the Web App form.

Creating the Web App

The first step is to create and configure a Web App to accept visitor submission

  1. Select Web Apps > +Add Web App.
  2. Enter a name for the new Web App and select a default template for the app.
  3. From the Customer Permissions for Web App Items section, check the below options:
    • Add New Items
    • Edit Items
    • Delete Items

    Enabling these options means allowing site visitors access to add, edit and delete Web App items in this app.
  4. Un-check the Requires Approval checkbox, and then click Save. For details on the approval workflow for Web App items, see Setting up an approval workflow.

Creating a Secure Zone for item submission

As mentioned above, in order for a site visitor to submit a Web App item, they visitor must be logged in to the site. The best way to do this is to create a specific Secure Zone for Web App item submissions. You can optionally log site visitors into the site with a generic login form (i.e Not into any specific secure zone).

  1. Select Site Manager > Secure Zones and click Add Secure Zone.
  2. Enter a name for the secure zone, and then select a landing page, and click Save

    The landing page is where users land after logging into to the secure zone, so it is best to select a page you will be adding either the Web App items, or the item submission form.

  3. You can either specify the users that you want to access this Secure Zone in the Subscribers tab, or alternatively create a Secure Zone registration form.

Creating the registration form for the Secure Zone

Once you have created the Secure Zone you would like to use for your Web App items, the next step is to create a Web Form that allows users to register to this Secure Zone.

  1. Select Site Manager > Web Forms, and then click Add Web Form.
  2. Give the form a name (example: Registration From)
  3. From the Secure Zone dropdown, select the Secure Zone you created in the previous step.
  4. Click Save 
  5. By default, the form already includes fields for the visitor's title, name and email address. Click the Username and Password options in the left column under the Contacts tab to add the fields to the form.
  6. Click Update.

This has created a basic form that will register users to your Secure Zone. You can add any fields to this Web Form that you would like to collect upon registration. For more details on Forms, see Create and insert a form .

Setting up your pages for the web app forms

To create a visitor contributed Web App, you will need to create three pages:

  • Landing page - A page that will display a list of Web App items
  • Registration page - A page that will contain a secure zone registration form and a secure zone login form
  • Submission page - A page that will contain a Web App item submission form

Create the 3 pages mentioned above by selecting Site Manager > Pages, and then clicking Add Page. Give each page a name of your choice relevant to its purpose (example: landing, submission, registration), then save the page.

You can leave these pages empty for now as we will add the relevant content in the following sections.

Landing page

The landing page is where a site visitor will be redirected to after loggin into the secure zone. Here we will display a list of Web App items assigned to the logged in site visitor.

  1. Select Site Manager > Pages. If you would like to use an existing page, select the page in the tree view. If not, click Add page.
  2. Place the cursor in the content editor where you want to insert the Web App items.
  3. From the Toolbox found on the right of the editor, select Web Apps > List of Submitted Web App Items. 
  4. Select the Web App you created in the first step, then select All Items from the display criteria
  5. Click Insert.
  6. Save and close the landing page.

Registration page

The registration page is where site visitors can sign up to the secure zone and gain access to view, add or edit Web App items. You can also have a Secure Zone login form on this page for existing visitors to log in.

  1. Select Site Manager > Pages. If you would like to use an existing page, select the page in the tree view. If not, click Add page.
  2. Place the cursor in the content editor where you want to insert the registration form.
  3. From the Toolbox found on the right of the editor, select Web Forms.
  4. Select the registration form you created from the list, then click Insert.
  5. Save and close the registration page.

Submission page

The submission page is the page we will insert the Web App item submission form.

  1. Select Site Manager > Pages. If you would like to use an existing page, select the page in the tree view. If not, click Add page.
  2. From the Toolbox found on the right of the editor, select Web Apps > Web Apps Input Form.
  3. Select the Web App you created in the first step, then click Insert.
  4. Save and close the submission page.

Customizing the Web App layout

You can completely customize the way in which Web App items are displayed on the site using tags. For the purpose of this article, we will be customizing the Web App layout to include an Edit button, so that our logged in site visitors can edit items. For more details on customizing Web App layouts, see Displaying and Customizing Web Apps and items.

  1. Select Web Apps, and the select the Web App you created from the list.
  2. Click Edit Web App Settings, then select the Layouts tab.
  3. By default, the list template is selected. As mentioned, you can customize this layout using the tags from the Toolbox on the right. For now, add the tag {tag_edit}
  4. Click Save.

Testing the Web App item submission workflow

Now that you have set up all the relevant aspects of a visitor submitted Web App, you can now go ahead and test this workflow.

  1. Start by opening the Registration page on the live site. You should see the registration form we created. Fill in and submit the registration form, this will register you to the secure zone and if you have set the landing page, should take you to the Web App item landing page. This page will be empty at this stage as you will not have any Web App items assigned to your user yet.
  2. Now that you are registered to the Secure Zone and logged in, open the Submission page on the live site. This should have the Web App item submission form. Fill in and submit this form.
  3. Go back to the Landing page that has a list of Web App items. You should now see the item you have just submitted.
  4. You should also see an Edit link. Click this link and you will be taken to another form (similar to the submission). Update the fields in the form and submit.