--- title: "Custom Reference Page" slug: "custom-reference-page" description: "Create a custom reference page in Slate to enhance recommendation requests with conditional logic and customization options." tags: ["Applications", "Recommendations", "Slate-Hosted Application", "Widgets"] updated: 2026-04-02T20:15:02Z published: 2026-04-02T20:15:02Z --- > ## Documentation Index > Fetch the complete documentation index at: https://knowledge.technolutions.net/llms.txt > Use this file to discover all available pages before exploring further. # Custom Reference Page > [!NOTE] > 📚 Part of the series **Application Building Phase II:**[**The Slate-hosted Application**](/v1/docs/introduction-to-the-slate-hosted-application) In the default Slate-Hosted Application, the [reference page](/v1/docs/reference-overview-getting-started) (identified by the part ID *ref*) consists of a pre-made module that allows students to send requests for recommendations. This article covers the creation of a **custom reference page** in the Slate-hosted application using a Slate-hosted application-scoped form. By using this widget, you have the ability to introduce conditional logic to your form, customize instructions, and collect information in additional standard or custom reference-scoped fields. [![Custom_Reference_Page.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4705768647707.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4705768647707.png/Custom_Reference_Page.png) #### ✅ Four steps to creating a custom reference page 1. Create a Slate-hosted-application-page-scoped form. 2. Create a reference widget-scoped form. 3. Add the widget to the Slate-hosted-application-page-scoped form. 4. Add the Slate-hosted-application-page-scoped form to a Slate application. ## Step 1: Creating the Slate-hosted application page This form serves as the **host** for the widget you'll create later. 1. Select **Forms** from the main navigation. 2. Click **New Form**. A popup appears. 3. In the New Form popup, configure the following: - **Page Title**: The page title will display to an applicant as the name of the page. - **Folder:** Keep organized by saving application pages within a clear folder structure. - **Status:** Set the status to **Confirmed/Active**. 4. Click **Save**. 5. Click **Edit Form**on the right side. 6. Click **Edit Properties.**A popup appears. 7. In the Edit Properties popup, configure the following: - **Scope:**Select**Slate-Hosted** **Application Page.** 8. Click **Save.** [![Slate_Hosted_Application_Page_Scope.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4706264179227.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4706264179227.png/Slate_Hosted_Application_Page_Scope.png) #### Considerations when creating the Slate-Hosted-Application-Page-scoped form When building the Slate-Hosted-Application-Page-scoped form, the following options specific to the Reference Widget are available when editing its Widget Table: - **Row Limit** This will prevent a new reference from being added if the number of currently listed references is greater than or equal to the limit set. Excluded references can be displayed in the list, though, and these rows are excluded from the limit. - **Exclusion** - When enabled, applicants will be able to exclude recommendations. - **Reinstatement** - When enabled, applicants will be able to reinstate recommendations. [![Edit_Reference_Widget_Table.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4474249516571.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4474249516571.png/Edit_Reference_Widget_Table.png) ## Step 2: Creating the widget > [!NOTE] > 💼 Try a Slate example > > Use [Suitcase](/v1/docs/suitcase-import) to import our ready-made example Reference Widget form. **Open and re-save each form field** to break any potential cache from the suitcase import. > > ```plaintext > 253c1056-92cc-4c1f-91b6-bece1c18870e:slate-examples > ``` ### Create the widget-scoped form 1. Select **Forms** from the main navigation. 2. Click **New Form**. A popup appears. 3. In the New Form popup, enter the following: - **Page Title:** Give the form a descriptive title. - **Status:**Set the status to **Confirmed/Active.** - **Folder:**Add the form to an existing folder, or select **Other**to create a new one. 4. Click **Save**. 5. Click **Edit Form** on the right side. 6. Click **Edit Properties.** A popup appears. 1. In the Edit Properties popup, configure the following: - **Scope:**Set the form's scope to **Reference Widget,**within the section Page Construction Widgets. 2. Click **Save**. [![Reference_Widget_Scope.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4706769908763.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4706769908763.png/Reference_Widget_Scope.png) 1. Configure the widget with the form fields applicants should complete. See example setup opposite, or explore further in your own database by Briefcasing the ID at the top of this section. [![Example_Form_Fields.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4706770898331.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4706770898331.png/Example_Form_Fields.png) ### Configure the widget #### Reference Exports and Merge Fields Customize the columns displayed in the course widget with reference exports. To add reference exports: 1. Navigate to the reference-widget-scoped form. 2. Click **Edit Form**. 3. Click **Edit Properties.** 4. In the **General Settings** tab, under **Custom List Fields**, add Exports for any fields that should be columns in the widget table. These are typically items like *Reference First*, *Last*, *Title*, *Type*, *Email*, or *Status*. ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/image(78).png) 5. In the **Merge Fields**tab, configure any merge fields that need to be displayed within the widget. [![Reference_Widget_Merge_Fields.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4463659584923.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4463659584923.png/Reference_Widget_Merge_Fields.png) #### Widget Settings The **Widget Settings**tab in the Edit Properties menu lets you configure advanced settings in the case that the applicant may **import a previous recommendation**. Note: If you select the option *Do not allow submitted recommendations to be imported from other applications*, none of the following configurations will appear. - **Import References Custom Label** - Set a custom label for the select box (optional). - **Import References Help Text**- Include help text below the select box (optional). [![Reference_Widget_Widget_Settings_1_of_2.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4464359760667.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4464359760667.png/Reference_Widget_Widget_Settings_1_of_2.png) - **Import Records Query** - If no exports are included, the default value displayed in the list will match what we currently display for the import references select box (First Last - Submitted: MM/dd/yyyy). - Add **Filters** to customize which references display. In addition to any applied filter criteria, displayed references must meet the following conditions: - The recommendation must not be excluded. - The recommendation must be associated with a different application associated with the same person record. - The recommendation must be submitted. - The recommendation itself must not be an import from another application. - The recommendation must not already be imported to this application. [![Reference_Widget_Widget_Settings_2_of_2.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4464503789979.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4464503789979.png/Reference_Widget_Widget_Settings_2_of_2.png) > [!CAUTION] > 🔔 Important! > > 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. > [!WARNING] > 📝 Note: The external reference form is covered in separate article > > This widget-scoped form is the first half of the reference process. Once the applicant enters their reference's contact information and submits the form, Slate sends a separate form for the reference to complete. This form, which uses the reference page scope, [is covered in it own article](/v1/docs/external-reference-page). ## Step 3: Adding the widgets to the host form 1. From the form builder palette, drag in a **Widget Table**. 2. Edit the widget table. From the **Widget Form**list, select the widget forms created in the previous section. 3. Add any additional fields or instructions to the form. ![Select_Widget_Form.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4706818079515.png) Adding a widget form to the host form. ## Step 4: Adding the host form to a Slate-hosted application 1. Select **Database** from the main navigation, then select **Application Editor**. 2. Choose the `/apply/`******link for the application base to which the new page should be added. **📝 Note:**If only one application base exists, only `/apply/`**will appear. 3. Click **Edit Menu** in the upper-right. 4. Click **Add Link**. Enter the following configurations: - **Type**: Select **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. 5. Click **Save**. The new form will be listed at the bottom of the application menu. 6. Drag this page to where it belongs in the application page order. [![Add_Link_to_Application.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4707185543323.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/4707185543323.png/Add_Link_to_Application.png) The application form widget should now be live in the application. Be sure to test that data entered into the widget saves back to the appropriate table on the **Profile** tab of the **Person** record.