Custom Personal Background Page

📚 Part of the series Application Building Phase II: The Slate-hosted Application

In the default Slate-Hosted Application, the personal background page (identified by the part ID per) consists of a pre-made module that allows students to enter their name, addresses, contact information, and biographical details.

This article covers the creation of a custom personal background page in the Slate-Hosted Application using a Slate-Hosted Application Page-scoped form.

Before you begin

There are four main steps to recreating the personal information page in the Slate-hosted application:

1. Create a Personal Background form with the scope Slate-hosted Application Page. This form will contain the personal background questions and a special Address widget that opens a popup where the applicant can add multiple addresses.

2. Create another form that stores contains the Address widget.

3. Add the Address widget form to the host form, as well as any other fields with which you want to collect personal information.

4. In the Application Editor, add the Slate-hosted Application Page-scoped form to an application.

If you don’t feel like doing all that, or if you just want a finished product to work from, you can import our example personal background page form and customize it as needed.

Try an example with Suitcase 💼

Use Suitcase to import our ready-made example personal background page form. Open and re-save each form field to break caching from the suitcase import.

This suitcase contains:

• Slate-hosted Personal Background page

• The address widget form

547028c0-5602-4dfc-a916-3aaeac21442a:slate-examples

Step 1: Creating the Personal Background Slate-hosted application page

In addition to hosting the address widget, this form will include the rest of the personal background form fields applicants will complete. To create the Slate-hosted application page:

1. Go to Forms.

2. Select New Form.

3. Configure the following settings:

   • Page Title: The page title will display to an applicant as the name of the page. Enter something like Personal Background.

   • Folder: Keep organized by saving application pages within a clear folder structure.

   • Status: Set the status to  Confirmed/Active.

4. Select Save.

5. Select Edit Form.

6. Select Edit Properties.

7. In the Edit Properties popup, configure the following:

   • General Settings: From the Scope list, select Slate-Hosted Application Page.

   • Merge Fields: Add any desired exports that should pulled into the form.

8. Select Save.

9. With the exception of the address block, add the form fields to collect all the personal information required from your applicants.

🔔 Important!

You must collect the personal information page’s address information with another, embedded form that uses the Address widget, which we’ll cover in the next section. If you use a Street Address or Location form field widget to collect address information on a Slate-hosted application page, you run the risk that submitted address data loses its region value.

Step 2: Creating an Address Information form

The Address widget lets the user submit more than one address. It is stored on its own form with the widget scope. We’ll embed this form onto your original Slate-hosted application form later on.

To create the form that stores the Address widget:

1. Go to Forms.

2. Select New Form.

3. Configure the following settings:

   • Page Title: Give the form a name, like Custom Address Widget (Personal Background Page).

   • Status: Confirmed/Active

   • Folder: Add the form to an existing folder, or select  Other to create a new one.

4. Select Save.

5. Select Edit Form.

6. Select Edit Properties.

7. Configure the following settings:

   • Scope: Select Address Widget from the Page Construction Widgets section.

   • Custom List Fields: Add exports, filters and sorts as needed to present the applicant's submitted information on the application page. For example, you could create a Location subquery export that builds a full location (with conditional comma) out of the address parts that exist:                          

     The example Location subquery export, expanded:                        

8. Select Save.

9. Configure the widget with the form fields applicants should complete.

📝 Note

Map all fields in the widget to system fields of the same scope. Any custom fields created to be used in the widget should match the scope of the widget.

Step 3: Embedding the Custom Address Widget form on the Personal Background form with a Widget Table

Now, we’ll add the Address widget to the first form we made.

1. Return to the Personal Background form you made earlier.

2. From the form builder palette, drag in a Widget Table.

3. From the Widget Form list, select the widget form created in the previous section.

   

4. Select Save.

5. Add any additional fields or instructions to the form.

Step 4: Adding the host form to a Slate application

1. Go to Database → Application Editor.

2. Select the /apply/ link for the application base to which you want to add the new page.

   NOTE: If only one application base exists, only /apply/ will appear.

3. Select Edit Menu.

4. Select Add Link.

5. Configure the following settings:

   • Type: Custom Form Page

   • Subtype: Select the Slate-Hosted-Application-Page-scoped form you created.

   • Label: Enter the name to display as the page link in the application navigation.

6. Select Save. The new form appears at the bottom of the application menu.

7. Drag this page to where it belongs in the application page order.

   

The application form widget is now active in the application. Be sure to test that data entered into the widget is saving back to the appropriate table on the Profile tab of the Person record.

⭐Best Practice: Auto-PDF

Application form widgets, and by extension the custom application pages that use them, lack some compatibility with the Slate Auto PDF feature, which converts application data into automatically generated PDFs. When Slate converts the application data, the questions asked in a form page appear, but submitted widget information will not. To get the most out of your Slate-hosted application, we suggest migrating your reading process from Auto PDF to a custom portal dashboard that supports all new widget functionality.

Region values are missing from application address entry

If you’re collecting applicant address information on the personal background page directly with an Address form field, you might find that region data is being dropped from submissions. You can fix this on an existing personal background page by following steps to create an address form and embed that form on the Personal Background form with a Widget Table.

Further customization

If you’re looking to collect applicants’ birth address information or use their supplied citizenship data to conditionally display other parts of the personal background page form, see Customizing Additional Details on the Personal Background Page.