Working with Decision Letters and Reply to Offer

Visualforce Resources

For information on Visualforce, see the Salesforce Help & Training articles Defining Visualforce Pages and An Introduction to Visualforce.

Conditional Display

To conditionally display content within the decision letter, use the <apex:outputPanel> tag with the rendered attribute.  For example, to display the text of a letter for applicants with Application Status = Accepted, surround the content of the letter with the following tags:

<apex:outputPanel rendered="{!TargetX_SRMb__Application__c.TargetX_SRMb__Application_Decision__c == 'Accepted'}">
CONDITIONALLY DISPLAY TEXT
</apex:outputPanel>

Notes:  

• You must use the API name of the field within the <apex:outputPanel> tag.
• The standard controller associated with the decisionLetter Visualforce page is for the Application object. All fields must therefore include the Application API Name (TargetX_SRMb__Application__c).  For fields on Contact, use {!TargetX_SRMb__Application__c.TargetX_SRMb__Contact__r.FIELDNAME}.

For multiple conditions, include a double ampersand (&&) between each condition.  For example, to display the text of a letter for applicants with Application Status = Accepted AND Level = Undergraduate, surround the content of the letter with the following tags:

<apex:outputPanel rendered="{!TargetX_SRMb__Application__c.TargetX_SRMb__Application_Decision__c == ‘Accepted’ && {!TargetX_SRMb__Application__c.TargetX_SRMb__Level__c == ‘Undergraduate'}">

CONDITIONALLY DISPLAY TEXT
</apex:outputPanel>

For an OR condition, use the following syntax:
<apex:outputPanel rendered="{!OR(CONDITION1, CONDITION2)}">
    
CONDITIONALLY DISPLAYED TEXT
</apex:outputPanel>

For example, if you want to display the same text for applicants with an “Accepted” decision or a “Accepted Conditionally” decision, use the following syntax:

<apex:outputPanel rendered="{!OR(TargetX_SRMb__Application__c.TargetX_SRMb__Application_Decision__c == 'Accepted', TargetX_SRMb__Application__c.TargetX_SRMb__Application_Decision__c == ‘Accepted Conditionally')}"> 

For more information on <apex:outputPanel>, please see the Salesforce Help & Training article apex:outputPanel.

Merge Fields

To include merge fields within your Visualforce page, use the following syntax:

 {!TargetX_SRMb__Application__c.FIELD_API_NAME}

Merge Examples

• To include a merge field for the field Program, use the following syntax:

{!TargetX_SRMb__Application__c.TargetX_SRMb__Program__c}

• To include a field on Contact, use the following syntax:

{!TargetX_SRMb__Application__c.TargetX_SRMb__Contact__r.FIELDNAME}

• To include a merge field for the field “First Name”, include the following:

{!TargetX_SRMb__Application__c.TargetX_SRMb__Contact__r.FirstName}     

Images

To include an image within your letter (such as a header image or signature),  use the following syntax, where IMAGE_NAME is replaced with the name of your image:

<img src="{!$resource.IMAGE_NAME}" />

Note: The image must be stored as a Static Resource (Setup > Develop > Static Resources).

URLs

To include a link within the text of your letter, use the following syntax, where URL is replaced with the full web address (e.g., http://targetx.com/) along with any text you want displayed for the link replacing Displayed Text for link:

<a href=“URL" target="_blank”>DISPLAYED TEXT FOR LINK</a> 

Step 1: Configure Decision Letters

Configure your Decision Letters as outlined here.

Step 2:  Enable 'Reply to Offer' 

These steps outline how to manually update a single Application record to display Reply to Offer.

1. Navigate to the Application tab.
2. Click the Application you wish to update.

Note: Applications MUST have an associated Application Process populated on the Application record.

3. Update the following:
   • Application Stage = Submitted
   • Application Status = Complete - Decision Made
   • Application Decision = [Any Decision Values you are using]
   • Show Reply to Offer = Checked
   • Decision Publish Date/Time = <Date/Time Before Today>
4. Save your changes.

When a Student clicks View Your Decision, then Reply to Offer, the Reply to Offer option displays:

If Accept Enrollment Deposit is unchecked, the Accept Offer option displays as:

Step 3: Enable Enrollment Deposits 

Step 1: Download the CSS file 

Copy the CSS file below, DecisionLetter.css.

/*------------------------------------*\
   DOC-REVIEW
\*------------------------------------*/
/**
*
* @block doc-review
*/
.doc-preview {
  /* Display and box model */
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 1.875rem;
  margin-top: 0;

}
.doc-preview__content {
  /* Display and box model */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 21.875rem;
  min-width: 15.625rem;
  margin: 0 auto;
  /* Appearance */
  border: solid 1px #D5D5D5;
  border-radius: 0.1875rem;
}
.doc-preview__letter {
  /* Display and box model */
  padding: 2.5rem;
}
.doc-preview__block {
  /* Display and box model */
  margin-bottom: 1.25rem;
}
.doc-preview__header {
  /* Display and box model */
  margin-bottom: 2.5rem;
}
.doc-preview__footer {
  /* Display and box model */
  margin-top: 1.25rem;
  max-width: 20rem;
}
.doc-preview__footer--pad-top {
  /* Display and box model */
  margin-top: 2.5rem;
}
.doc-preview__footer--no-margin {
  /* Display and box model */
  margin: 0;
}
.doc-preview__title {
  /* Appearance */
  font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
  font-weight: normal;
  text-transform: uppercase;
}
.doc-preview__logo {
  /* Display and box model */
  margin: 0 auto;
  max-width: 100%;
  text-align: center;
}
.doc-preview__copy {
  /* Appearance */
  font-size: 0.9375rem;
  line-height: 1.4em;
}
.doc-preview__copy--style--bold {
  /* Appearance */
  font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
  font-weight: normal;
}
.doc-preview__container {
  /* Display and box model */
  display: block;
  max-width: 50rem;
  margin: 1.875rem auto;
  /* Appearance */
  border: solid 1px #F7F7F7;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}
.doc-preview__sig {
  /* Display and box model */
  max-width: 200px;
}
@media (min-width: 1025px) {
  .doc-preview {
    /* Display and box model */
    margin-top: 1.875rem;
    max-width: 20rem;
  }
}
@media (print) {
  h1.accessibility-hidden {
    /* Display and box model */
    display:none;
  }
}

Step 2: Create a new Static Resource for the file created in Step 1 

1. Navigate to Setup > Develop > Static Resources.
2. Select New. 
3. Choose File: Select the CSS file you downloaded in Step 1.
   • Name the file - decisionLetter.
4. Set the Static Resource to Public.
5. Save.

Step 3: Add a banner image for the decision letter to Static Resources 

1. Navigate to Setup > Develop > Static Resources.
2. Select New. 
3. Choose the image file you wish to upload.
4. Set the Static Resource to Public.
5. Save.

Step 4: Add a signature image for the decision letter to Static Resources 

1. Navigate to Setup > Develop > Static Resources.
2. Select New. 
3. Choose the image file you wish to upload.
4. Set the Static Resource to Public.
5. Save.

Step 5: Add new Visualforce page and customize 

1. Navigate to Setup > Develop > Visualforce Pages.
2. Create a new Visualforce page named “decisionLetter” and copy the template below into the page.
3. Update the image names in the document to match the names for the uploaded files in steps 3 and 4 in order to save the Visualforce page.
   • To replace the Banner image name, search for:

{!$resource.TargetX_University_Logo}

And replace TargetX_University_Logo with your Banner Image name.

• To replace the Signature image name, search for:

{!$resource.ElvisPresleySignature}

And replace the ElvisPresleySignature with your Signature Image name.

Note: Signature logo optimal height is 75px.

4. Configure the new Visualforce Page to match your institution’s needs; using Decision Letter Visualforce Template as a reference.

Note: Using the provided CSS, the maximum width for the letter is 720px so images wider than this will automatically be resized to 720px.

Step 6: Add new Visualforce page to Online Application User Profile 

1. Navigate to Setup > Manage Users > Profiles > Online Application User Profile.

Note: this will be a custom profile and may have a different name from Implementation. E.g. Community User, Customer Community User, Community User Login

2. Select Edit.
3. Navigate to Visualforce Page Access.
4. Select “decisionLetter” from left hand side and use right arrow to ADD to righthand, “Enabled Visualforce Pages” side.
5. Save your changes.

Note: When adding merge fields to your Decision Letter, make sure you update the Online Application profile that is associated to Students and grant Read access to all fields being used in the Decision Letter.

Step 1: Add the “ConfettiCSS” css file to Static Resources

1. Download the css file below, ConfettiCSS.css.
2. Navigate to Setup and search for Static Resources.
3. Click New.
4. Enter the Name of the Static Resource = ConfettiCSS
5. Choose the ConfettiCSS.css file you just downloaded from above.
6. Set the Cache Control of the Static Resource to be Public.
7. Click Save.

/* Copyright moonglows76 */

        .container {
			width: 100%;
			height: 100%;
        }
		
		:root {
			--color1: #f2d74e;
			--color2: #95c3de;
			--color3: #ff9a91;
		}

        .confetti {
          width: 15px;
          height: 15px;
          background-color: var(--color1);
          position: absolute;
          left: 50%;
          animation: confetti 5s ease-in-out -2s infinite;
          transform-origin: left top;
        }
        .confetti:nth-child(1) {
          background-color: var(--color1); left: 10%; animation-delay: 0;
        }
        .confetti:nth-child(2) {
          background-color: var(--color2); left: 20%; animation-delay: -5s;
        }
        .confetti:nth-child(3) {
          background-color: var(--color3); left: 30%; animation-delay: -3s;
        }
        .confetti:nth-child(4) {
          background-color: var(--color1); left: 40%; animation-delay: -2.5s;
        }
        .confetti:nth-child(5) {
          background-color: var(--color2);; left: 50%; animation-delay: -4s;
        }
        .confetti:nth-child(6) {
          background-color: var(--color3); left: 60%; animation-delay: -6s;
        }
        .confetti:nth-child(7) {
          background-color: var(--color1); left: 70%; animation-delay: -1.5s;
        }
        .confetti:nth-child(8) {
          background-color: var(--color2);; left: 80%; animation-delay: -2s;
        }
        .confetti:nth-child(9) {
          background-color: var(--color3); left: 90%; animation-delay: -3.5s;
        }
        .confetti:nth-child(10) {
          background-color: var(--color1); left: 100%; animation-delay: -2.5s;
        }

        @keyframes confetti {
          0% { transform: rotateZ(15deg) rotateY(0deg) translate(0,0); }
          25% { transform: rotateZ(5deg) rotateY(360deg) translate(-5vw,20vh); }
          50% { transform: rotateZ(15deg) rotateY(720deg) translate(5vw,60vh); }
          75% { transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw,80vh); }
          100% { transform: rotateZ(15deg) rotateY(1440deg) translate(10vw,110vh); }
        }
  

Step 2: Add the “ConfettiJS” javascript file to Static Resources

1. Download the javascript file below, ConfettiJS.js.
2. Navigate to Setup and search for Static Resources.
3. Click New.
4. Enter the Name of the Static Resource = ConfettiJS
5. Choose the ConfettiJS.js file you just downloaded from above.
6. Set the Cache Control of the Static Resource to be Public.
7. Click Save.

setTimeout(hideConfetti, 10000);

function hideConfetti()
{
  var confettiDiv = document.getElementsByClassName('confetti');

  for(var i=0; confettiDiv[i]; i++) {
   confettiDiv[i].style.display = 'none';
  }
}

Step 3: Update the “DecisionLetter” Visualforce Page

A. You need to update the DecisionLetter Visualforce Page to include the ConfettiCSS css file and the ConfettiJS javascript file:

1. Navigate to Setup and search for Visualforce Pages.
2. Locate the DecisionLetter Visualforce page (or whichever Visualforce Page you use to display Decision Letters) and click Edit.
3. Locate the following lines (should be at the top of the Visualforce page):

<apex:page standardcontroller="TargetX_SRMB__Application__c"
  showHeader="false" applyHtmlTag="false" applyBodyTag="false"
    standardStylesheets="false" docType="html-5.0" >
    
    <head>
        <link class="user" href="{!$Resource.targetx_portal__pbResources}/app/css/main.css" rel="stylesheet" type="text/css" />
    </head>

4. Replace the above lines with the following:

<apex:page standardcontroller="TargetX_SRMB__Application__c"
showHeader="false" applyHtmlTag="false" applyBodyTag="false"
    standardStylesheets="false" docType="html-5.0" >

    <apex:includeScript value="{!$Resource.ConfettiJS}"/>

    <head>
        <link class="user" href="{!$Resource.targetx_portal__pbResources}/app/css/main.css" rel="stylesheet" type="text/css" />
        <apex:stylesheet value="{!$Resource.ConfettiCSS}"/>
    </head>   

B. The following steps will update the DecisionLetter Visualforce Page to define CSS code to not display confetti when printing:

1. Locate the below line of code (should be at the bottom of the Visualforce page):

</apex:page>

2. Replace the above line with the following:

<style type="text/css" media="print">
.confetti {
            display: none;
        }
    </style>
</apex:page>

C. Next, you'll update the DecisionLetter Visualforce Page to display confetti for when the Application Decision is Accepted.

1. Add the below code under the opening <article class = "doc-preview__letter txpage"> tag. (If confetti needs to be displayed for another decision value, replace Accepted below with the decision value you wish to use):

<apex:outputPanel rendered="{!TargetX_SRMB__Application__c.TargetX_SRMb__Application_Decision__c == 'Accepted'}">
<div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div>
            <div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div>
            <div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div>
            <div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div>
            <div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div>
            <div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div>
            <div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div><div class="confetti"></div>
            <div class="confetti"></div><div class="confetti"></div>
        </apex:outputPanel>  

2. Save your changes.
3. If you wish to change the Color of the confetti to match your school colors, see the article: Changing the Colors of the Confetti in the Decision Letters.

Step 4: Test the changes in your Sandbox

Step 5: Create an Outbound Change Set

1. Navigate to Setup and search for Outbound Change Sets.
2. Select New.
3. Name the Change Set, for example: Decision Letter Confetti update.
4. Add a Description and Save your changes.
5. In the Change Set Components section, select Add.
6. Select a Component Type of Visualforce Page.
7. Select the Visualforce Page(s) you updated to add Confetti.

Step 6: Upload your Change Set

1. From the Change Set you created above, select the Org you want to send the Change Set to.
2. Click Upload.

Note: Uploading the Change Set will send it to the Target Org; it will NOT change in your production Org until you Deploy the Change Set.

Step 7: Validate the Change Set in your Production Org

1. Login to your Production Org.
2. Navigate to Setup and search for Inbound Change Sets.
3. The Change Set you uploaded should be available under Change Sets Awaiting Deployment.
4. Click the Change Set you want to deploy.
5. Click Validate.

Step 8: Deploy the Change Set in your Production Org

1. Login to your Production Org.
2. Navigate to Setup and search for Inbound Change Sets.
3. The Change Set you uploaded should be available under Change Sets Awaiting Deployment.
4. Click the Change Set you want to deploy.
5. Click Deploy.

For additional information on deploying Change Sets, please see the Salesforce Help & Training article Deploying a Change Set.

Adding Additional Colors

You can add additional colors beyond the three provided by following these steps:

1. Add additional lines after the colors listed, adding the appropriate #hexnumber:

--color3: #ff9a91;
--color4: #hexnumber;
--color5: #hexnumber;

2. In your ConfettiCSS.css file, make sure to update specific sections with the new color additions to ensure they appear correctly in the confetti:

Example: 

background-color: var(--color3);
left: 30%;
animation-delay: -3s;

Would be changed to:

background-color: var(--color4);
left: 30%;
animation-delay: -3s;

Each of the new colors added must be included in the above section for them to display.

Step 1: Complete a test application through the  Student Portal and submit it. 

1. Navigate to Setup and search for All Communities.
2. Copy and Paste the student portal link into a new browser tab.
3. Register and submit an application.

Step 2: In the TargetX CRM update your test application record: 

1. Navigate to the test application record and update “Application Decision” to “Accepted.”
2. Enter today’s or a retroactive date in “Decision Publish Date.”
3. (OPTIONAL) To allow applicants to accept offers - Check “Show Reply to Offer.”
4. Navigate to Contact Record > Manage External User button > Login into Community as User > View Your Decision button.

Note: The letter will need to be updated/built for various decisions (directions commented out in visualforce code); repeat these steps with different decisions to test the conditional content.

Step 1: Add the signature image for the decision letter to Static Resources 

1. Navigate to Setup and search for Static Resources.
2. Select New.
3. Select the image file you wish to upload.
4. Set the Static Resource to Public.
5. Save your changes.

Step 2: Update your Decision Letter 

1. Navigate to Setup and search for Visualforce Pages.
2. Select Edit next to the Decision letter you wish to update.
3. Search for {!$resource.OldSignatureImageName}where OldSignatureImageName is the name of the image file you are replacing. 
4.  Replace the OldSignatureImageName with your new Signature Image name.

Note: Signature logo optimal height is 75px.

5. Save the changes.

To preview your decision letters, please see Testing Decision Letters.

Create Custom Decision Letter Button in CRM 

To view a student's decision letter without having to log in as the student, you can create a custom button on the Application record. Please note that only CRM Admins should proceed with the instructions below. 

1. Navigate to the Application Object by clicking on Setup > Create > Objects > Application
   1. In the Buttons, Links, and Actions section, click New Button or Link
      1. Label: View Decision Letter
      2. Name: View_Decision_Letter
      3. Display Type: Detail Page Button
      4. Behavior: Display in New Window
      5. Content Source: Visualforce Page
      6. Content: decisionLetter
      7. Save your button
   2. Add your new button to the Application Page Layout
      1. On the Application Object setup screen find the Page Layouts section. 
      2. Edit the desired layout(s)
      3. Click on Buttons
      4. Drag the View Decision Letter button onto the layout in the Custom Buttons section
      5. Save your changes
2. Grant users access to view the decisionLetter Visualforce page
   1. Navigate to Setup > Administration Setup > Users > Profiles
   2. Click the Profile Name for the profiles which will require access to use the new button
   3. Under Enabled Visualforce Page Access, check to see if the decisionLetter page is on the list. If not, click Edit and move the page from Available to Enabled
   4. Save you changes
3. Test your button
   1. Navigate to an Application record that has a Decision Letter available
   2. Click the View Decision Letter button and confirm a new window opens and displays the letter.