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.
https://salesforce.stackexchange.com/questions/152341/emoji-support-in-visualforce
https://www.forcelearn.com/add-emoji-in-salesforce-lightning-components/
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