{"id":6232,"date":"2017-09-06T03:06:26","date_gmt":"2017-09-06T03:06:26","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=6232"},"modified":"2017-09-06T03:19:16","modified_gmt":"2017-09-06T03:19:16","slug":"winter-18-automatic-styling-of-visualforce-pages-in-lightning-experience","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/winter-18-automatic-styling-of-visualforce-pages-in-lightning-experience\/","title":{"rendered":"Winter 18 &#8211; Automatic Styling of Visualforce Pages in Lightning Experience"},"content":{"rendered":"<p style=\"text-align: justify;\">Reason I posted <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-visualforce-in-classic-and-lightning-experience\/\">previous blog was<\/a> to showcase life of Visualforce developer before and after\u00a0<strong><a href=\"https:\/\/www.jitendrazaa.com\/blog\/tag\/winter-18\/\">Winter 18<\/a>.\u00a0<\/strong>If we want to use same Visualforce in classic and Lightning experience then we had to check theme of logged-in user in Visualforce and render page section accordingly.<\/p>\n<p style=\"text-align: justify;\">However, not any more. With\u00a0<strong><a href=\"https:\/\/www.jitendrazaa.com\/blog\/tag\/winter-18\/\">Winter 18<\/a>,\u00a0<\/strong>we have\u00a0<strong>LightningStylesheet\u00a0<\/strong>attribute available for apex:page tag. Below source code produces same output as of previous code, however no extra logic to detect and render page section as per logged in user theme.<!--more--><\/p>\n<figure style=\"width: 696px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Winter-18.gif?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Winter-18.gif?resize=696%2C720&#038;ssl=1\" alt=\"Winter 18 - Automatic Styling of Visualforce Pages in Lightning Experience\" width=\"696\" height=\"720\" \/><\/a><figcaption class=\"wp-caption-text\">Winter 18 &#8211; Automatic Styling of Visualforce Pages in Lightning Experience<\/figcaption><\/figure>\n<p><script src=\"https:\/\/gist.github.com\/JitendraZaa\/97c70802f927c00e205d9939f50e3809.js\"><\/script><\/p>\n<p>Note :<\/p>\n<ul>\n<li style=\"text-align: justify;\">This feature is still in Beta and Salesforce team is doing their best to produce most efficient code to render existing Visualforce into Lightning experience.<\/li>\n<li style=\"text-align: justify;\">This would be applicable only for\u00a0<strong>apex:\u00a0<\/strong>tags in Visualforce. Custom stylesheet or hacks around standard stylesheet may not work.<\/li>\n<li style=\"text-align: justify;\">Salesforce is also working on\u00a0<strong>Google chrome extension\u00a0<\/strong>which will show existing visualforce that how existing Visualforce page will look after using this tag. However there is no confirmed URL of this extension yet and could be available in next release.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>How to use lightningStylesheets attribute to render Visualforce in Lightning Experience Stylesheet<\/p>\n","protected":false},"author":1,"featured_media":6238,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[167,424],"class_list":["post-6232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-release","tag-winter-18"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Winter-18-Logo.gif?fit=160%2C164&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6222,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-visualforce-in-classic-and-lightning-experience\/","url_meta":{"origin":6232,"position":0},"title":"Use Visualforce in Classic and Lightning Experience","author":"Jitendra","date":"August 29, 2017","format":false,"excerpt":"How to design a Visualforce page so that It would be displayed properly in classic as well in Salesforce Lightning Experience","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Same Visualforce in classic and Lightning","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/08\/Same-Visiualforce-in-classic-and-Lightning.gif?fit=924%2C572&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/08\/Same-Visiualforce-in-classic-and-Lightning.gif?fit=924%2C572&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/08\/Same-Visiualforce-in-classic-and-Lightning.gif?fit=924%2C572&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/08\/Same-Visiualforce-in-classic-and-Lightning.gif?fit=924%2C572&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":5737,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-lightning-component-in-visualforce-page\/","url_meta":{"origin":6232,"position":1},"title":"Use Lightning Component in Visualforce Page","author":"Jitendra","date":"September 22, 2016","format":false,"excerpt":"How to use Lightning Out to surface Lightning Component on Visualforce Pages","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Use Lightning Components in Visualforce Pages","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6880,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-current-user-id-in-salesforce\/","url_meta":{"origin":6232,"position":2},"title":"Get Current User Id in Salesforce","author":"Jitendra","date":"February 2, 2019","format":false,"excerpt":"How to get Current Logged in user Id in Apex, Visualforce, Lightning Component and Formula fields in Salesforce","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6021,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/behold-yourself-summer-17-is-here-to-break-legacy-visualforce-navigation-code\/","url_meta":{"origin":6232,"position":3},"title":"Behold Yourself &#8211; Summer 17 is here to break legacy Visualforce Navigation code in Lightning Experience","author":"Jitendra","date":"May 8, 2017","format":false,"excerpt":"In Summer 17, URLFOR method in Visualforce would not work in Lightning Experience if used directly. Even sforce.one API is not fully compatible.","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Summer 17 Logo","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/05\/Salesforce-Summer-17-Logo.gif?fit=460%2C325&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":6920,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/data-exchange-between-aura-lightning-web-components-lwc-and-visualforce\/","url_meta":{"origin":6232,"position":4},"title":"Event Handling between Aura, Lightning Web Components (LWC) and Visualforce","author":"Jitendra","date":"October 16, 2019","format":false,"excerpt":"How to use Lightning Message Services for event handling between Lightning Web Components, Aura Components and Visualforce","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Salesforce Lightning Message Service","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6298,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-winter-18-release-my-favorite-features\/","url_meta":{"origin":6232,"position":5},"title":"Salesforce Winter 18 Release \u2013 My Favorite Features","author":"Jitendra","date":"October 4, 2017","format":false,"excerpt":"My favorite Salesforce Winter 18 features about Lightning, Flow, Platform Event , Shield and Salesforce DX","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Flow in Salesforce App Builder","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=6232"}],"version-history":[{"count":6,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6232\/revisions"}],"predecessor-version":[{"id":6242,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6232\/revisions\/6242"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/6238"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=6232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=6232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=6232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}