The Find My Counselor Portal offered by Slate is a highly functional and versatile tool that can be seamlessly added to your institution's database using Suitcase. This portal has been specifically designed to cater to the needs of students by providing them with a user-friendly interface to quickly and easily locate their designated counselor. To access this information, students input the name of their high school, which will then prompt the portal to display the relevant information. The Find My Counselor Portal is fully customizable and can be edited to suit your institution's specific needs.

Best Practices

A good understanding of HTML/CSS and Javascript is necessary to configure this portal.

Prerequisites:

• Organization Staff Assignment Field and Rules

  • Follow the Staff Assignment Automations section of the Knowledge Base, with the scope of Organization instead of Person

• Content Blocks for staff members

Configuring the Form

Once the Find My Counselor Portal has been imported via Suitcase, navigate to the form, Find My Counselor that drives the search to set it to Active. By default, the form contains five fields: High School, High School CEEB Code, Search Button, Instruction Block, and Portal Key (Hidden).

You can customize the labels on these fields based on your institution's desired language. However, several elements are referenced in the custom script that you should not edit—specifically, the export key for the CEEB Code field and the Portal Key field. The custom search button and the instruction block also use some custom HTML/CSS in the source code.

Search Button:

<div>
<button id="lookup">Search</button>
</div>

Instruction Block:

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

Custom Javascript:

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()});

Custom CSS:

.default { display: none; }

This script serves two purposes. First, it hides the standard "Submit" button to ensure no confusion with our "Search" button. Second, when a student clicks the "Search" button, it will pull the value out of the CEEB field, go out and fetch 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).

Editing the Query

Your title goes here

Your content goes here

Once the Find My Counselor portal has been imported via Suitcase, you can customize the exports to return the data points to 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" />

Editing The Views

By default, the Home view only contains the Form Widget but 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.