Slate provides a standard Find My Counselor portal that can be imported using Suitcase.

This portal lets students quickly and easily locate their designated counselor. Students enter their high school in a search bar, which then displays the relevant information.

Prerequisites

Your database requires the following to make use of the Find My Counselor portal:

• Organization staff assignment field, rules

• Content blocks for staff members

After you import the portal using Suitcase, you must configure the associated form, the portal query, and its views

Step 1: Configuring the form

The Find My Counselor portal relies on an accompanying form by the same name.

Activating the form

First, activate the form:

1. Go to Forms.

2. Select Find My Counselor.

3. Select Edit.

4. Set the form’s Status to Active.

5. Select Save.

Customizing form field labels

By default, the form contains five fields:

• High School

• High School CEEB Code

• Search Button

• Instruction Block

• Portal Key (Hidden)

While you can freely customize the labels on these fields based on your institution's desired language, the following elements are referenced in the custom script should not be changed:

• the export key for the CEEB Code field

• the Portal Key field

The custom search button and the instruction block also use some custom HTML/CSS in the source code.

<style>p.button-like {
    display: inline-block;
    padding: 10px 15px;
    background: #808080;
    color: white;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}
</style>
<div>
<p id="lookup" class="button-like">Search</p>
</div>

<div id="results" style="margin-top:30px;">
Your Counselor will be revealed! Click&nbsp;<em>'search'</em>
</div>

var fetchData = function(){
var ceeb = form.getValue('ceeb');
var portal = form.getValue('portal');
return (FW.Lazy.Fetch("/portal/" + portal + "?cmd=search&ceeb=" + ceeb, $("#results")));
}
$("#lookup").bind("click", function(){fetchData()});

.default.form_button_submit { display: none; }

This script serves two purposes:

• It hides the standard Submit button to ensure no confusion with our Search button.

• When a student selects Search, it pulls the value out of the CEEB field, fetches results from our portal using the inputted CEEB, and then places that result into our instruction block with id="results". The portal from which the results are fetched is determined by the portal key entered as the default value of the Portal Key (Hidden).

Step 2: Editing the query

You can customize the Find My Counselor portal query’s exports to return additional data for display in the portal.

Most of the counselor-specific information can exist in their specific content block, but you can add additional exports to appear as part of the results.

This query also leverages a parameter that accepts the CEEB from the form field. This parameter and the Output Node are not transferred through Suitcase and need to be added manually.

<param id="ceeb" type="string" />

Step 3: Editing the views

By default, the Home view only contains the Form Widget, but it can be customized the same as any portal. The Results view has everything displayed when a student clicks search.

This is where you will need to edit the merge fields to use your content blocks and add any other merge fields you would like. Any merge fields taken from query exports should be placed in the Liquid markup. Anything outside the Liquid markup will appear regardless of the staff member.

Incorporating Find My Counselor in another portal

This portal does not need to stand on its own. If you want to incorporate the Find My Counselor functionality into a different portal, check out our example Event Portals in Custom Portals.

If you incorporate the Find My Counselor functionality in a different portal, you need to change the default value of the Portal Key (Hidden) to point to that new portal.