function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Rahul kumar 313Rahul kumar 313 

OpenCTI Lightning Issue

Hello,  I am working on implementing OpenCTI in Salesforce lighting , but problem getting the correct User Experience Context. When opening VF as softPhone in LEX it's returning $User.UITheme = "Theme3" although same page opened from tab returns "Theme4d".

Is there any way we can use same VF in classic and LEX or we have to create two separate call center and VF pages.

Below are my sample Call center definition and VF file along with SoftPhone result,
________________________________________________________________________________________
<callCenter>
    <section sortOrder="0" name="reqGeneralInfo" label="General Information">
        <item sortOrder="0" name="reqInternalName" label="InternalName">OpenCTI</item>
        <item sortOrder="1" name="reqDisplayName" label="Display Name">OpenCTI</item>
        <item sortOrder="2" name="reqAdapterUrl" label="CTI Adapter URL">/apex/CTI_light</item>
        <item sortOrder="3" name="reqUseApi" label="Use CTI API">true</item>
        <item sortOrder="4" name="reqSoftphoneHeight" label="Softphone Height">530</item>
        <item sortOrder="5" name="reqSoftphoneWidth" label="Softphone Width">205</item>
        <item sortOrder="6" name="reqSalesforceCompatibilityMode" label="Salesforce Compatibility Mode">Classic_and_Lightning</item>
    </section>
    <section sortOrder="1" name="reqDialingOptions" label="Dialing Options">
        <item sortOrder="0" name="reqOutsidePrefix" label="Outside Prefix">9</item>
        <item sortOrder="1" name="reqLongDistPrefix" label="Long Distance Prefix">1</item>
        <item sortOrder="2" name="reqInternationalPrefix" label="International Prefix">01</item>
    </section>
</callCenter>

_________________________________________________________________________________________________

<apex:page showHeader="false" cache="false" id="CTI_light">

    <!-- panel to be displayed only in classic mode -->
    <apex:outputPanel rendered="{! $User.UITheme == 'Theme3' }">
        <apex:outputText value="This is Salesforce Classic."/>
        <apex:includeScript value="/support/api/38.0/interaction.js"/>       
    </apex:outputPanel>
    
    <!-- panel to be displayed only in lighting -->
    <apex:outputPanel rendered="{! $User.UITheme == 'Theme4d' }">
        <apex:outputText value="This is Lightning Experience."/>
        <apex:includeScript value="/support/api/38.0/lightning/opencti_min.js"/>
    </apex:outputPanel>
    
</apex:page>    
_____________________________________________________________________________________
User-added image
Abdeltif NouqratAbdeltif Nouqrat
Hi,
I'm facing the same problem. I followed the documentation in the following link. Through a lightning component, client controller and Apex controller. This always returns the correct UI Theme.
https://developer.salesforce.com/blogs/isv/2016/04/introducing-ui-theme-detection-for-lightning-experience.html

But I have the problem that the Visualforce page embedding the Lightning comonent has no information about the used UI Theme, because createComponent's callback had returned before the Action callback in the Client-controller's doInit function, where the information is set as Component attribute.

Any advice ??

Kind regards.
Abdeltif NouqratAbdeltif Nouqrat
Hi,
I just want to share how I was able to recognize the current Salesforce mode.
I did it by reading the parameter named "mode" from the request. If it is equal to "Lightning", you are in the Lightning mode. Otherwise (parameter not available within the request), you are in the Classic mode.

Best regards.