Find My Counselor Portal

Slate provides a Find My Counselor Portal that can be imported using Suitcase and edited in an institution's database. This portal is configured to allow students to type in their high school to then find their counselor.

  Best Practices

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

Prerequisites:

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 four fields: High School High School CEEB Code Search Button Instruction Block

The labels on these fields can be customized based on your institution's desired language. However, there are several elements that are referenced in the custom script that should not be edited. Specifically, the export key for the CEEB Code field. Additionally, both the custom search button and the instruction block utilize 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:

$("button:contains('Submit')").hide();

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

This script serves two purposes. First, it hides the standard "Submit" button to ensure that there is 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".

Editing the Query

Once the Find My Counselor portal has been imported via Suitcase, the exports can be customized to return the data points to display in the portal. Most of the counselor specific information can exist within their specific content block, but you can add additional exports to appear as part of the results. mceclip0.png

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

<param id="ceeb" type="string" />
mceclip7.png

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 contains everything that will be displayed when a student clicks search. This is where you will need to edit the merge fields to use your content blocks as well as add any other merge fields you would like. Any merge fields taken from exports of the query should be placed within the liquid markup. Anything outside the liquid markup will appear regardless of staff member. mceclip1.png

  Tip

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

Was this article helpful?
1 out of 1 found this helpful