+ Start a Discussion
dindevdindev 

how can i show emoji in vfpage

i want to show image as emoji in apex messages
Raj VakatiRaj Vakati
Refer this link 

https://salesforce.stackexchange.com/questions/152341/emoji-support-in-visualforce
https://www.forcelearn.com/add-emoji-in-salesforce-lightning-components/
Deepali KulshresthaDeepali Kulshrestha
Hi dlndev,

What I do here is, first I encoded the Case Subject in Condroller using EncodingUtil.URLENCODE 
then again decode the value in VF page using decodeURI. I have used two <apex:outputText here, 
one is hidden and used to hold the encoded value and other used to display the characters in the page. 
Once the <apex:actionPoller completes the action call I am calling another JS function stop to decode 
the value and update the <apex:outputText with the help of <apex:actionStatus. 
Also on the page load, I am calling the JavaScript stop(); method to decode and render the character properly.

--VF Page

<apex:page controller="exampleConEx">
    <apex:form id="myform" >
        <apex:actionStatus id="status" onstart="start()" onstop="stop()"/> 
        <apex:outputText value="Watch this counter: {!count}" id="counter"/><br/>
        <apex:outputText  value="{!emojiCase.Subject}" id="emoji"/><br/>
        <apex:outputText  value="{!emojiCase.Subject}" id="emojihidden" style="display:none;" />
        <apex:actionPoller action="{!incrementCounter}" reRender="counter,emojihidden" interval="15" status="status" />
    </apex:form>
    <script type="text/javascript">
      stop();   
      function start(){
          //alert("Starting");
      }
      function stop(){
          var casesub = document.getElementById('{!$Component.myform.emojihidden}').innerHTML;
          document.getElementById('{!$Component.myform.emoji}').innerHTML = decodeURI(casesub);
      }    
    </script>    
</apex:page>

--Controller

public class exampleConEx {
    Integer count = 0;
    Case emojiCase = null;

    public PageReference incrementCounter() {
        count++;
        return null;
    }

    public Integer getCount() {
        return count;
    }
    public Case getEmojiCase(){
        emojiCase = [SELECT Id, Subject FROM CASE WHERE CaseNumber = '00001036'];
        String str = emojiCase.Subject;
        emojiCase.Subject = EncodingUtil.URLENCODE(str,'UTF-8');
        return emojiCase; 
    }    
}

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha