I think I have all components in place, but for some reason the Prompt message is not rendering correctly on my Vf page. Could anyone point out the problem?

Here is my controller:

public class LTRORequireAdditionalDocumentsCon {

    public LTRO_Document__c ltrodoc {get;set;}
    public String caseId;
    public String contId;
    public String contEmail {get; set;}
    public String contName {get; set;} 
    public String emailBody {get; set;}
    public String emailBodyTxt {get; set;}
    public String SandboxName;
    public String sfdcBaseURL;
    public Case LTROdauLink;
    public Boolean hasConEmail{set;}

    public List<LTRO_Document__c> ltrodoclist {get; set;}

    public LTRORequireAdditionalDocumentsCon(){

        ltrodoc = new LTRO_Document__c();
        ltrodoclist = new List<LTRO_Document__c>();
//        caseId = ApexPages.currentPage().getParameters().get('cid');
//        contEmail = ApexPages.currentPage().getParameters().get('conemail');
//        contName = ApexPages.currentPage().getParameters().get('conname');
//        contId = ApexPages.currentPage().getParameters().get('conid');
        if(contEmail == null){
           hasConEmail = false;



    // get the picklist values from Salesforce
    public List<SelectOption> getLtroDocTypes(){

        List<SelectOption> options = new List<SelectOption>();

        Schema.DescribeFieldResult fieldResult = LTRO_Document__c.Type__c.getDescribe();
        List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();

        for( Schema.PicklistEntry f : ple){
            options.add(new SelectOption(f.getLabel(), f.getValue()));
        // options.add(new SelectOption('','--None--'));

        return options;


    //add documents to the table
    public void addDocs(){

        if(ltrodoc.Summary__c !=''){
            LTRO_Document__c tmp = new LTRO_Document__c();
            tmp = ltrodoc.clone();

            System.debug('temp :' + tmp);


            System.debug('No Documents have been assigned');

        System.debug('Documents Type: ' +ltrodoclist);
        //System.debug('ltroDocMap: ' +ltroDocMap);


    //method that will display the page before it is send
    public PageReference previewEmail(){

        LTROdauLink = [Select id, LTRO_Damage_Assessment_Upload_Link__c from Case Where id =: caseid];
        System.debug('LTROdauLink : ' +LTROdauLink.LTRO_Damage_Assessment_Upload_Link__c);

        //identify the Name of the org, and the server name
        Organization org = [select id,IsSandbox from Organization];
        if (org.IsSandbox == true){
                SandboxName = UserInfo.getUserName().substringAfterLast('.pi.') + '-';
                sfdcBaseURL = System.URL.getSalesforceBaseURL().getHost().substringAfter('c.').substringBefore('.visual.force.com') + '.';
            }else {
                SandboxName = UserInfo.getUserName().substringAfterLast('.') + '-';
                sfdcBaseURL = System.URL.getSalesforceBaseURL().getHost().substringAfter('c.').substringBefore('.visual.force.com') + '.';
        } else {
            sfdcBaseURL = 'secure.';
            SandboxName = '';

        System.debug('SandboxName :' +SandboxName);
        System.debug('sfdcBaseURL:' +sfdcBaseURL);

        //loop through the list and build a list string with all of the Documents and Notes
        String docsString = '';
        String docsStringText = '';

        //list of documents that will be inserted
        List<LTRO_Document__c> insertltrodocs = new List<LTRO_Document__c>();

        String[] strList = new String[0];
        for(LTRO_Document__c docs: ltrodoclist){

            //get all of the documents and add them to the insertltrodocs
            docs.Case__c = caseId;

            //building the string of documents
            docsString += 'Document : '+ docs.type__c + '\n <br/> '+ ' Notes : ' + docs.Summary__c + '\n <br/> \n <br/>' ;
            docsStringText += 'Document : '+ docs.type__c + '\n'+ 'Notes : ' + docs.Summary__c + '\n  \n ' ;

        // insert the ltro documents
        //insert insertltrodocs;

        System.debug('docsString : ' + docsString);

        //build the email template
        emailBody = 'Hello '+contName+ ',\n  <br/><br/> We have identified that additional documents are required :\n  <br/><br/>' 
            + docsString +' \n <br/> Please navigate to the link below and re-upload the required file with the corrections. \n' ; //<br/></b>

        emailBodyTxt = ' Hello '+contName+ ',\nWe have identified that additional documents are required :\n \n' 
            + docsStringText +' \n  Please navigate to the link below and re-upload the required file with the corrections. \n' ;

        System.debug('emailBody : ' + emailBody);

        return Page.LTRORequireAddDocEmailReview;


    //method that send the email to the client. 
    public PageReference sendClientEmail(){

        //Create a Task placeholder
        Task ltroEmailTask = new Task();
        //ltroEmailTask.Description = taskcomments;
        ltroEmailTask.Type = 'Email';
        ltroEmailTask.TaskSubtype = 'Email';
        ltroEmailTask.status = 'Not Started';
        ltroEmailTask.WhatId = caseid;
        ltroEmailTask.WhoId = contId;
        ltroEmailTask.Priority = 'Normal';
        ltroEmailTask.Subject = 'Temporary Task for LTRORequireAdditionalDocumentsCon';

        //insert ltroEmailTask;

        id taskId= ltroemailTask.id;

        OrgWideEmailAddress[] owea = [Select id from OrgWideEmailAddress where DisplayName = 'Red Cross Disaster Relief'];

        Messaging.SingleEmailMessage mail = new Messaging.SingleEmailMessage();

        String[] toAddresses = new String[] {contEmail};
            //String[] ccAddresses = new String[] {'smith@gmail.com'};



        //mail.setSenderDisplayName('American Red Cross Disaster Services');

        if (owea.size() > 0) {

        mail.setSubject('American Red Cross Disaster Assessment Application - Additional Documents are Required ');


        System.debug('SandboxName :' +SandboxName);//dev
        System.debug('sfdcBaseURL:' +sfdcBaseURL);//cs91

        EmailTemplate emailTemplate = [select Id, DeveloperName, HtmlValue, Body, BrandTemplateId From EmailTemplate where DeveloperName = 'LTRO_Additional_Documents_Required'];

        //Specify the text content of the email.
        String plainBody = emailTemplate.Body;
        plainBody = plainBody.replace('LTRORequireAdditionalDocumentsCon.apxc', emailBodyTxt + 
                                      '<a href="https://'+SandboxName+'redcross.'+sfdcBaseURL+'force.com/DisasterAssessment/ltrodamageuploadstep?ret=1&cid='+caseid+'&taskid='+taskid+'">Red Cross Disaster Documentation Upload</a>');

        // mail.setTemplateId(emailTemplate.id);

        // Specify the content of the HTML email        
        String htmlBody = emailTemplate.HTMLValue;
        htmlBody = htmlBody.replace('LTRORequireAdditionalDocumentsCon.apxc', emailBody + 
                                    '<br><br><a href="https://'+SandboxName+'redcross.'+sfdcBaseURL+'force.com/DisasterAssessment/ltrodamageuploadstep?ret=1&cid='+caseid+'&taskid='+taskid+'">Red Cross Disaster Documentation Upload</a>');
        //!LTRO_Document__c.Type__c   NewEmail

        // Send the email you have created.
        Messaging.sendEmail(new Messaging.SingleEmailMessage[] { mail });

        //clean up the emailBody from html tags so that it can be displayed on the Comments text field
        //I am also accouting for null pointer exceptions 

        String taskcomments = emailBody;//htmlBody emailBody
        if (taskcomments != null){
            taskcomments = taskcomments.replace('<br>', '');
            taskcomments = taskcomments.replace('<br />', '');

        id suser = [Select id from User where firstname ='Disaster LTRO Damage Assessment' and lastname = 'Site Guest User' Limit 1].id;
        //Update the Case's task
        ltroEmailTask.Description = plainBody;//plainBody taskcomments
        ltroEmailTask.status = 'Sent';
        ltroEmailTask.Subject = 'American Red Cross Disaster Assessment Application - Additional Documents are Required';
        ltroEmailTask.Ownerid = suser;
        //update ltroEmailTask;

        return Page.LTROReqAddDocThankYou;


    public PageReference returntocase(){

        Pagereference caPage = new Pagereference('/' + caseId);

        System.debug('caseId :' +caseId);
    return caPage;



Here is my VF page:

<apex:page controller="LTRORequireAdditionalDocumentsCon" lightningStylesheets="true" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">

    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>LTRO Documents</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Import the Design System style sheet -->
    <apex:slds />

function promptLaunch(){
    if (hasConEmail == false){
            var element = document.getElementById("PromptMessage");
<!--   prompt message -->
<div class="demo-only" style="height: 24rem;" id='PromptMessage'>
  <section role="alertdialog" tabindex="-1" aria-labelledby="prompt-heading-id" aria-describedby="prompt-message-wrapper" class="slds-modal slds-fade-in-open slds-modal_prompt" aria-modal="true">
    <div class="slds-modal__container">
      <header class="slds-modal__header slds-theme_error slds-theme_alert-texture">
        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
          <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close" />
          <span class="slds-assistive-text">Close</span>
        <h2 class="slds-text-heading_medium" id="prompt-heading-id">Service Unavailable</h2>
      <div class="slds-modal__content slds-p-around_medium" id="prompt-message-wrapper">
        <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore
          quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
      <footer class="slds-modal__footer slds-theme_default">
        <button class="slds-button slds-button_neutral">Okay</button>
  <div class="slds-backdrop slds-backdrop_open"></div>

<!--   Prompt message -->

    <div class="slds-scope">
        <div class="slds-p-left_x-small">
            <p class="slds-text-heading_label slds-m-bottom_small">
            LTRO Documents

        <div class="slds-p-left_xx-small">
    <!--  <legend>Additional Documents Required</legend> -->
            <div class="slds-page-header" role="banner">
                <div class="slds-grid">
                    <div class="slds-col slds-has-flexi-truncate">
                        <!-- HEADING AREA -->
                    <!--    <p class="slds-text-title_caps slds-line-height_reset">Additional Documents Required</p> -->
                        <h1 class="slds-page-header__title slds-truncate" title="Additional Documents Required">Additional Documents Required</h1>
                        <!-- / HEADING AREA -->

        <div class="slds-p-left_x-small">
        <!-- BASIC GRID EXAMPLE -->

           <fieldset class="slds-box slds-theme_default slds-container_small">
               <legend id="CustomerInfo" class="slds-text-heading_medium slds-p-vertical_medium">Request Documents</legend>
               <div class="slds-form-element">
                            <label class="slds-form-element__label" for="docType">Type </label>
                            <div class="slds-form-element__control">
                                <apex:form >

                                    <apex:selectList id="LtroDocTypes" value="{!ltrodoc.Type__c}" size="1" required="true">
                                        <apex:selectOptions value="{!LtroDocTypes}"/>

                                    <label for="Summary" class="control-label">Please Provide Information to Client  </label><br></br>
                                    <apex:inputTextarea id="summary" value="{!ltrodoc.Summary__c}" cols="100" rows="3"/> 

                                <apex:commandButton id="addDocsBtn" action="{!addDocs}" styleClass="slds-button slds-button_brand slds-m-top_medium" value="Add Documents"/>
    <apex:form >

<div class="slds-p-left_x-small">
<fieldset class="slds-box slds-theme_default slds-container_medium">
    <legend id="DocIfno" class="slds-text-heading_medium slds-p-vertical_medium">Documents to be requested:</legend>       
            <apex:pageBlock >
                <apex:pageBlockTable value="{!ltrodoclist}" var="ltrdocl">
                <apex:column value="{!ltrdocl.Type__c}" />
                <apex:column value="{!ltrdocl.Summary__c}"/>
               <!--   <apex:commandLink value="Remove" rerender="">

        <apex:commandButton id="prevEmailBtns" action="{!previewEmail}" styleClass="slds-button slds-button_brand slds-m-top_medium" value="Preview Email" />



I am seeing this: enter image description here

but expecting to see this: enter image description here

  • 1
    in this case, it would be pertinent to include how the current prompt message displays VS what you are expecting. please edit your post to include the above. – glls Nov 13 '18 at 14:52

Your issue is with these attributes in your VF page:

<apex:page ... applyHtmlTag="false" applyBodyTag="false" ...>

From apex:slds documentation:

If you set applyBodyTag or applyHtmlTag to false, however, you must include the scoping class slds-scope. Within the scoping class, your markup can reference Lightning Design System styles and assets.

With a quick test, if I changed the applyBodyTag=true, I was able to render the message appropriately.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.