function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rama_SFDCRama_SFDC 

How to hide/show sections dynamically on lightning detail page

Hi All ,
In my requirment i'm inserting the record through (lighting component) form page and after saving was redirecting to detail page . But in form we have different sections redering based on picklist values , we have  sub sections also which are rendered based on picklist value. After the record is inserted  i want same behaviour on the detial page(rendering sections display based on picklist value lighting record detial page) ..
Please suggest how to achive this .

Thanks in Advance !!
 
Raj VakatiRaj Vakati
You need to bult the custom details page by using the code .. you cannt able to do it with point and clicks or with app builder ... 

create a component and override in the details section ...

Sample code
  
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
  <aura:attribute name="toggleGer" type="boolean" default="true" />
    <aura:attribute name="toggleEng" type="boolean" />
      <div class="slds-align_absolute-center ">
          <lightning:select name="mySelect" label="Select a Country" aura:id="mySelect" onchange="{!c.toggle}" >
              <option>INDIA</option>
              <option>USA</option>
              <option>GERMAN</option>
          </lightning:select>
      </div>
      <aura:if isTrue="{!v.toggleGer}">
        <div class="demo-only demo-only--sizing slds-grid slds-wrap slds-p-vertical_medium">
            <div class="slds-size_3-of-12 slds-p-left_xx-large slds-p-horizontal_x-large" >
                <lightning:input type="color" label="Color" name="color" value="#190eea"/>
            </div>
        </div> 		
        <aura:set attribute="else">
          <aura:if isTrue="{!v.toggleEng}">					
            <div class="demo-only demo-only--sizing slds-grid slds-wrap slds-p-vertical_medium">
              <div  class="slds-size_3-of-12 slds-p-left_xx-large slds-p-horizontal_x-large">
                <lightning:input type="color" label="Color" name="color" value="#4286f4"/>
              </div>
            </div>				
            <aura:set attribute="else">				
              <div class="demo-only demo-only--sizing slds-grid slds-wrap slds-p-vertical_medium">
                      <div  class="slds-size_3-of-12 slds-p-left_xx-large slds-p-horizontal_x-large" >
                          <lightning:input type="color" label="Color" name="color" value="#0eb205"/>
                      </div>
                  </div>
            </aura:set>
          </aura:if>
        </aura:set>
    </aura:if> 
</aura:component>
  
({
	toggle: function (component, event, helper) {
         var sel = component.find("mySelect");
         var nav =	sel.get("v.value");
         if (nav == "INDIA") {     
              component.set("v.toggleGer", true);
         }
         else if(nav == "USA"){
            component.set("v.toggleGer", false);
            component.set("v.toggleEng", false);
         }
	 else if(nav == "GERMAN"){
            component.set("v.toggleGer", false);
            component.set("v.toggleEng", true);
         }
    }
})