+ Start a Discussion

how can i show emoji in vfpage

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

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" />
    <script type="text/javascript">
      function start(){
      function stop(){
          var casesub = document.getElementById('{!$Component.myform.emojihidden}').innerHTML;
          document.getElementById('{!$Component.myform.emoji}').innerHTML = decodeURI(casesub);


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

    public PageReference incrementCounter() {
        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