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
Nuevo9763Nuevo9763 

slds-panel Vs apex:pageblock conditional rendering


As apex:pageblock is not supported in SLDS it's suggested to use slds-panel and slds-panel_section to replace page block and pageblocksection respectively. In my existing code I use rendered property of pageblock section extensively. Is it possible to apply same conditions to a div that replaces the pageblocksection? for example:
<apex:pageBlock title="Account & Opportunity Information" rendered="{!myCondition}">
Can this be replaced with
<div class="slds-panel slds-grid slds-grid--vertical slds-nowrap slds-form--compound" aria-labelledby="newaccountform"
rendered="{!myCondition}">

OR
 
<apex:pageBlockSection title="AccountInformation" collapsible="false" columns="2" rendered="{!myCondition == null}">
with
<div class="slds-panel__section"  rendered="{!myCondition == null}">



<div class="slds-panel__section"  rendered="{!myCondition == null}">
Best Answer chosen by Nuevo9763
GhanshyamChoudhariGhanshyamChoudhari
1.add below to lines
<apex:page lightningStylesheets="true">
<apex:slds/>
2. replace below line
<apex:pageBlock title="Account & Opportunity Information" rendered="{!myCondition}">
with this line
<apex:pageBlock title="Account & Opportunity Information" rendered="{!myCondition}" class="slds-panel slds-grid slds-grid--vertical slds-nowrap slds-form--compound">
3. replace below line 
<apex:pageBlockSection title="AccountInformation" collapsible="false" columns="2" rendered="{!myCondition == null}" >

with  this line
<apex:pageBlockSection title="AccountInformation" collapsible="false" columns="2" rendered="{!myCondition == null}" class="slds-panel__section">




 

All Answers

GhanshyamChoudhariGhanshyamChoudhari
you want a Visualforce page with SLDS to look and feel like lightning OR you want to write lightning component?
Nuevo9763Nuevo9763
I want VF page with SLDS look and feel, just converting old VF pages, not writing lightning components.
GhanshyamChoudhariGhanshyamChoudhari
1.add below to lines
<apex:page lightningStylesheets="true">
<apex:slds/>
2. replace below line
<apex:pageBlock title="Account & Opportunity Information" rendered="{!myCondition}">
with this line
<apex:pageBlock title="Account & Opportunity Information" rendered="{!myCondition}" class="slds-panel slds-grid slds-grid--vertical slds-nowrap slds-form--compound">
3. replace below line 
<apex:pageBlockSection title="AccountInformation" collapsible="false" columns="2" rendered="{!myCondition == null}" >

with  this line
<apex:pageBlockSection title="AccountInformation" collapsible="false" columns="2" rendered="{!myCondition == null}" class="slds-panel__section">




 
This was selected as the best answer
Nuevo9763Nuevo9763
Hi GhanshyamChoudhari,
thanks for quick reply. I am trying the above and it looks fineand responsive as well, ispite of the fact that I did not add any code for responsiveness.Wondering does the attribute also helped in that as well?
Now I have another thing to tackle which is a pop-up (outputpanel is used for this). The content inside the pop-up is not responsive. I guess I need to add  below stying in a div and put the popup container inside that div?
slds-size--1-of-1 slds-small-size--1-of-3 slds-medium-size--1-of-4 slds-p-right_small

 
GhanshyamChoudhariGhanshyamChoudhari
yes.Please post your code. so we can figure out. please mark above answer is the best answer so others can benefit.
Nuevo9763Nuevo9763
I added the responsive slds atgs like above but the controls inside the pop-up are overlapping.Also the Add/Remove buttons are not working.

User-added image
GhanshyamChoudhariGhanshyamChoudhari
Hi Nuevo9763
I am not aware why add/remove button are not working.
you may raise a ticket to salesforce support.
 
Nuevo9763Nuevo9763
Thanks Ghanshyam Choudhari for quick reply. I will check with SF support.
Nuevo9763Nuevo9763
Hi Ghanshyam, can you please remove the code snippet for responsiveness that's in this chain?
GhanshyamChoudhariGhanshyamChoudhari
sure.
in above answer, I forget to mention the use StyleClass='slds-panel slds-grid slds-grid--vertical slds-nowrap slds-form--compound' instead of  class="slds-panel slds-grid slds-grid--vertical slds-nowrap slds-form--compound"
 
Miththana ManikantaMiththana Manikanta
Hi All,
I am implementing a lightning component for a existing VF Page, I came with the doubt of how to replace pageblocksection and pageblocksectionitem in component. Can you please help me how to do this?
Dave LoringDave Loring
Class isn't an attribute of pageblock or pageblocksection... how do you get it to save?