Migrating Web Apps from one site to another

Updated on 27-March-2018 at 3:27 PM

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

This article provides step-by-step instructions to migrate your custom Web Apps from one site to a new site. If you are migrating your entire site, please make sure you have followed the initial steps outlined in the main Site migration article. Use this guide to copy your Web Apps functionality that you have implemented and also to copy across Web App items. For the purposes of this article, the site you are migrating from is called the source site while the site you are migrating to is called the destination site.

Web App functionality migration is a manual process that requires you to copy and paste your HTML layouts and your Web App settings, as well as use the Import function. There four major steps are outlined below.

Re-creating the Web App

First you'll need to open both your source site and the destination site in different browser windows or tabs and click on the 'Add a Web App' button in the WebApps menu for both. This will take you to the interface for looking at the settings and structure of Web Apps in the source site and allow you to replicate it in the destination site.

 

Web App settings

Create a new Web-App in your Destination site. You'll need replicate your Web-app Settings in your Destination site in accordance with what's in your Source site. Give the Web-App the same:

  • Name - copy and paste from source to destination
  • Customer Permissions - tick the same boxes in the destination web-app that have been ticked in the source web-app
  • Web App Options - tick the same boxes in the destination web-app as the source web-app. Make sure you use the same templates and upload folders as well.

Now save this on the destination web-app and move to the next step for both source and destination.

 

Web App fields

This is where you'll need to replicate the source web-app schema in the destination web-app. Make sure you re-create each field in order. For each field you'll need to:

  • Copy and Paste the Field name
  • Field type - choose the one that matches the source
  • Copy and Paste the Field List Items if the type is a dropdown, checkbox or radio buttons.
  • Tick the mandatory box if the field is mandatory in the source web-app.

Do this in order from top to bottom. You must keep the same order for the fields otherwise you won't be able to export data from the source and re-import it into the destination.

 After you've replicated all the Web-App fields in the same order and with the same details, move to the next step.

Web App Layouts

Now that we've got the Web-App settings and fields to match in both the source and the destination web-apps you'll need to move the customized layouts from the source site to the destination site. Open the editor in HTML mode for both source and destination layouts, select all and copy from the source then paste into the destination and save.

Repeat this process for:

  • List Template
  • Alternate List Template 
  • Detailed Template

Do not copy and paste the HTML for the Edit Template. The HTML in the source edit template will contain specific references to database fields in the source site.

For the edit template you will need to click the 'Reset To Original' to get the same form as the source web-app. If you have manually edited the HTML in the source site you will have to manually make these edits in the destination HTML.

That completes your Web-App replication from source site to destination site.

Export Source Web App Items

Now you to move your web-app items from source to destination. The first step to take here is simply to export the source web-app items by going to WebApps on your source site, selecting the Web-App and then clicking on the Export. Save the file to your desktop or a temporary folder on your local machine.

Import Web App Items to Destination Site

Now we need to re-import the web-app items into the destination site. Go to Web Apps and click on Import Items. This takes you to the import screen where you'll need to

  1. Choose the destination web app
  2. Browse for the exported file from source Web-App on local machine
  3. Tick the 'First Row' checkbox because the exported file contains headers on the 1st row
  4. Click Next

Go through the confirmation step to make sure everything matches and your Web-App Items will be uploaded into your destination site.

Integrating the replicated Web App with the destination site

The Web-App has been migrated from the source site to the destination site but it won't display properly yet. That's because all the Web-App tags that were imported along with the pages from the source site contain references to the source Web-App. You'll need to go through all the pages on the destination site to re-insert the Web-App modules so they display the migrated Web-App items and allow the user to upload more.

Editing the page with a Web App

On your destination site, locate the page with the Web App listing and open it in edit mode. Go to Toolbox  and expand the Web Apps section. You have four main options to insert onto your web pages:

  1. List of Web App Items
  2. Input Form for Customers
  3. Web App Search Form
  4. Web App Search Results

In this example, you'll insert the List of Web App Items. You'll need to repeat the process for all four Web App sub-modules.

Insert the Web-App Module

Once you've found the web-app tag on the page you need to replace, you'll need to click on the module manager to configure the web-app tag you'll replace it with so the parameters are the same. In the example shown I'm inserting a list of Web-App items ordered by Latest Item's first. In your web-app you might have a different setting like sorting by alphabetical order. Configure the module and click Insert.

Now you should have a web-app tag in your destination page that has the same format as the source page but the web app number will be different as the new web app tag refers to a database that is connected to the destination site.

Return to main site migration article

To learn more, see the main Site migration article.