[SalesForce] Style Visualforce page to match Service Console

I have a visualforce page embedded in the Case layout and the buttons and text boxes don't match the styling in service console. I used view source to view the css file in the service console and I thought about referencing them in my page but the css files have this at the top:

This code is for Internal Salesforce use only, and subject to change without notice.
Customers shouldn't reference this file in any web pages.

Does anyone have an easier way to style visualforce pages to match the service console?

Best Answer

You need to use Salesforce Lightning Design System stylesheet which closely matches with Salesforce Console.

Approach 1: Include the css in static resource and start using it

<apex:stylesheet value="/resource/slds/assets/styles/salesforce-lightning-design-system-ltng.css"/>

Approach 2: Using apex:slds

Allows Visualforce pages to reference Lightning Design System styling. Use this component instead of uploading the Lightning Design System as a static resource.

Include in a Visualforce page to use Lightning Design System stylesheets in the page.

In general, the Lightning Design System is already scoped. 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.

Related Solutions

[SalesForce] Override VF page in Service Console

I incorrectly assumed my issue was caused by using the Service Console. Turns out my issue was with how my code redirected to VF or standard layouts.

Here is my full pageRedirect method code, in case anyone runs into a similar issue. Happy to explain details if anyone has questions:

//There are two different VF pages for Cases, one for internal users and one for portal users. 
//This method determines the user and case context (profile and whether new/editing), and redirects to the appropriate page.
//This method is called by CaseRedirect.Page, which is opened by standard Case new/edit/view actions.
public PageReference pageRedirect(){

    string detectedMode;
    map<string, string> pageParameters = ApexPages.currentPage().getParameters();
    string recordTypeID = pageParameters.get('RecordType');
    string returnURL = pageParameters.get('retURL'); 
    string recordTypeName; 

    if(pageParameters.get('Id') == null) detectedMode = 'New';
    else if(pageParameters.get('Id') != null && pageParameters.get('retURL') != null) detectedMode = 'Edit';
    else if(pageParameters.get('Id') != null && pageParameters.get('retURL') == null) detectedMode = 'View';

    if(detectedMode != 'New'){
        Case currentCase = [SELECT ID, RecordTypeID, RecordType.Name FROM Case WHERE ID = :pageParameters.get('Id') LIMIT 1];
        recordTypeID = currentCase.RecordTypeID;
        recordTypeName = currentCase.RecordType.Name;
    }
    else if(recordTypeID != null) recordTypeName = [SELECT Name FROM RecordType WHERE ID = :recordTypeID LIMIT 1].Name;

    //UPDATE (Added 2/11/16)
    //This clause handles a new feature: a custom permission that will grant access to the UCL for individual users, rather than
    //based on profile.
    CustomPermission cperm = [SELECT Id, DeveloperName FROM CustomPermission WHERE DeveloperName = 'Universal_Case_Layout' LIMIT 1];

    //The SetupEntityAccess object is a way to tie custom permissions to the PermissionSet and PermissionSetAssignment object
    List<SetupEntityAccess> setupEntities =
        [SELECT SetupEntityId
           FROM SetupEntityAccess
           WHERE SetupEntityId = :cperm.ID AND
                 ParentId IN (SELECT PermissionSetId
                    FROM PermissionSetAssignment
                    WHERE AssigneeId = :UserInfo.getUserId())];

    boolean hasUCLperm = (setupEntities.size() == 1);

    //If selected Case record type is "Salesforce Issue/Enhancement", don't override with UCL, regardless of user profile.

    if(recordTypeName == 'Salesforce')
    { 

        system.debug('Salesforce record type detected!');
        system.debug('detectedMode: ' + detectedMode);

        if(detectedMode == 'New') return new PageReference('/500/e?ent=Case&nooverride=1&RecordType='+recordTypeID+'&retURL=/500/o');
        else if(detectedMode == 'Edit') return new PageReference('/' + pageParameters.get('Id') + '/e?nooverride=1&RecordType='+recordTypeID+'&retURL=/' + pageParameters.get('Id'));
        else if(detectedMode == 'View') return new PageReference('/' +pageParameters.get('Id') + '?nooverride=1');     
    }

    //If user is a portal/community user
    if(UserInfo.getUserType() == 'PowerCustomerSuccess'){
        User u = [SELECT ID, AccountID, ContactID, ProfileID, IsPortalEnabled, Profile.UserLicenseID FROM User WHERE ID =:UserInfo.getUserID() LIMIT 1];

        //if user is part of our Customer Community, or else has the UCL permission assigned, redirect to VF page
        if(u.ProfileID == CommonUtility.getProfileID('Customer Community Plus User - Custom') || hasUCLperm){
            if(detectedMode == 'New') return new PageReference('/apex/CasePortalUserEdit');
            else if(detectedMode == 'Edit') return new PageReference('/apex/CasePortalUserEdit?id='+pageParameters.get('Id'));
            else if(detectedMode == 'View') return new PageReference('/apex/CasePortalUserView?id='+pageParameters.get('Id'));                
        }
        //else if user is part of our old Client Portal, show standard page
        else{
            if(detectedMode == 'New'){
                recordTypeId = CommonUtility.fetchRecordTypeId('Case', 'Customer_Portal_Assignment_Rule_Case_Record_Type');    
                return new PageReference ('/500/e?nooverride=1&retURL='+returnUrl+'&RecordType='+recordTypeId+'&ent=Case&def_account_id=' + u.AccountID );      
            }
            else if(detectedMode == 'Edit') return new PageReference('/' + pageParameters.get('Id') + '/e?nooverride=1&retURL=/' + pageParameters.get('Id'));
            else if(detectedMode == 'View') return new PageReference('/' +pageParameters.get('Id') + '?nooverride=1');  
        }
    }
    //else if user is an internal employee
    else if(UserInfo.getUserType() == 'Standard'){
        if(UserInfo.getProfileId() == CommonUtility.getProfileID('CS - HEDIS-QI') 
           || UserInfo.getProfileId() == CommonUtility.getProfileID('CS - HEDIS-QI - Josh')
           || UserInfo.getProfileId() == CommonUtility.getProfileID('CS - RTP')
           || UserInfo.getProfileId() == CommonUtility.getProfileID('CS - SOJO')
           || hasUCLperm){
            if(detectedMode == 'New') return new PageReference('/apex/CaseInternalUserEdit');
            else if(detectedMode == 'Edit') return new PageReference('/apex/CaseInternalUserEdit?id='+pageParameters.get('Id'));
            else if(detectedMode == 'View') return new PageReference('/apex/CaseInternalUserView?id='+pageParameters.get('Id')); 
        }

        else{
            if(detectedMode == 'New' && recordTypeID != null) return new PageReference('/500/e?ent=Case&nooverride=1&RecordType='+recordTypeID+'&retURL=/500/o');
            else if(detectedMode == 'New' && recordTypeID == null) return new PageReference('/500/e?ent=Case&nooverride=1&retURL=/500/o');
            else if(detectedMode == 'Edit' && recordTypeID != null) return new PageReference('/' + pageParameters.get('Id') + '/e?nooverride=1&RecordType='+recordTypeID+'&retURL=/' + pageParameters.get('Id'));
            else if(detectedMode =='Edit' && recordTypeID == null) return new PageReference('/' + pageParameters.get('Id') + '/e?nooverride=1&retURL=/' + pageParameters.get('Id'));
            else if(detectedMode == 'View') return new PageReference('/' +pageParameters.get('Id') + '?nooverride=1');       
        }
    }


    return null; 
}

[SalesForce] New tab in browser (Lightning Service Console App)

if you want new browser tab, you should not really use NavigationMixin - it will simply add the url to current url as it takes it as partial url (bug). So, instead you can use window.open directly:

if (this.tilePageRegion === 'New Tab') {
    window.open(this.tileUrl, '_blank');
}

Best Answer

Related Solutions

[SalesForce] Override VF page in Service Console

[SalesForce] New tab in browser (Lightning Service Console App)

Related Topic