Tag: lightning experience

Convert VisualForce page into Lightning with no efforts

Convert VisualForce page into Lightning with no efforts

For the Lightning transition, we don’t need to convert all our visualforce pages to lightning component because visualforce pages works in lightning experience.
we prefer to convert only those pages in which we need the speed of lightning so that the productivity of the user could be increased.

Pages which are not very complex in structure and delivers basic functionality, we don’t want to put so many efforts on them
And Lightning transition is a very big activity so It’s a good idea that we don’t spend too much time on simple pages and just use them as it is.
But if we are in lightning and everything looks beautiful and these small pages could make our beautiful transition ugly.

So the scenario is –

  • we need to migrate to Lightning but we have less time.
  • Need common look and feel for all pages and components.
  • Don’ want to make efforts to rebuild these pages.

If you can relate to these above points then you are at the right place ;p

This trick can help to save your time, money and efforts

This piece of code determines weather user is in classic or Lightning.

public boolean getIsClassic()
{
return (userInfo.getUiThemeDisplayed() == ‘Theme3’);
}

In Vf page we use SLDS style only when user is in Lightning experience.

<apex:page standardController=”Case” extensions=”CaseController” standardStylesheets=”{!IsClassic}” LightningStylesheets=”{! !IsClassic}”><apex:outputPanel rendered=”{! !IsClassic}”>
<apex:slds />
</apex:outputPanel>

If some of the components like the pageblock table is not rendering smoothly then you can use some custom styling and place it inside the same output panel.

<apex:page standardController="Case" extensions="CaseController" standardStylesheets="{!IsClassic}" LightningStylesheets="{! !IsClassic}">

<apex:outputPanel rendered="{! !IsClassic}">
	<apex:slds />
	<style>
	body .bPageBlock .detailList .dataCol {
	
		margin-bottom: 0rem !important;
		margin-top: 0rem !important;
		padding-top: 0rem !important;
		padding-bottom: 0rem !important;
		display: table-cell !important;
	}
	body .detailList .dataCol select{
		min-width: 15rem !important;
		width: 15rem !important ;
	}
	body .dataCol textarea {
		min-width: 15rem !important;
		width: 15rem !important ;
		height: 45px;
	}
	body .pbSubsection{
		padding-top: 0rem !important;
		padding-bottom: 0rem !important;
	}
	body .detailList tbody tr{
	width: 250px;
	}
	body .bPageBlock .pbSubheader{
		margin-bottom: 8px !important;
		line-height: normal !important;
	}
	body .pbHeader .pbButton{
		text-align: center;
	}
	body .pbButton .btn, body .pbButtonb .btn {
		background-color: #9e801a;
		color: white;
	}
	</style>
</apex:outputPanel>