0

I'm using a Lightning Web Component. On the left side there is a hyperlink (verically listed), on the right side there is div in a form.

The onclick of the link tag on the right side should be changed.

For example:

In the screenshot below, on click of the "Family Name" link, the right div should be shown with two fields. On click of the "Parent/Guardian" link, the first div should hide and the second div should be shown in the same place.

enter image description here

HTML:

<template>
<lightning-record-edit-form record-id={enrollmentId} object-api-name="Enrollment__c">


    <div class="demo-only demo-only--sizing slds-grid slds-wrap">
        <div class="slds-size_2-of-6">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <nav class="slds-nav-vertical" aria-label="Sub page">
                    <div class="slds-nav-vertical__section">
                      <ul aria-describedby="entity-header">
                        <li class="slds-nav-vertical__item slds-is-active">
                          <a href="javascript:void(0);" class="slds-nav-vertical__action" onclick={tabchange} aria-current="true"   >Family Name</a>
                        </li>
                        <li class="slds-nav-vertical__item">
                          <a href="javascript:void(0);" class="slds-nav-vertical__action" onclick={tabchange} >Parent/Guardian</a>
                        </li>
                        <li class="slds-nav-vertical__item">
                          <a href="javascript:void(0);" class="slds-nav-vertical__action" onclick={tabchange} >Students</a>
                        </li>
                        <li class="slds-nav-vertical__item">
                          <a href="javascript:void(0);" class="slds-nav-vertical__action" onclick={tabchange} >Student Programs</a>
                        </li>

                      </ul>
                    </div>
                  </nav>
            </div>
        </div>

        <div class="slds-size_4-of-6">
          <div>
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <template for:each={familyName} for:item="field" for:index="index">
                    <div class={sectionLayout} key={field.fieldAPI}>
                        <lightning-input-field field-name={field.fieldAPI} required={field.required}>
                        </lightning-input-field>
                    </div>
                </template>
            </div>
          </div>

          <div> 
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
              <template for:each={parentName} for:item="field" for:index="index">
                  <div class={sectionLayout} key={field.fieldAPI}>
                      <lightning-input-field field-name={field.fieldAPI} required={field.required}>
                      </lightning-input-field>
                  </div>
              </template>
          </div>
          </div>
        </div>           
    </div>
</lightning-record-edit-form>

JS

import { LightningElement, track } from "lwc";

export default class Enrollment_1 extends LightningElement {
@track enrollmentId;
@track family = "Show";
@track boolVisible = false;

@track familyName = [
{ fieldAPI: "Family_Name__c", required: true, fieldName: "Name" },
{ fieldAPI: "Home_Phone__c", required: true }
];

@track parentName = [
{ fieldAPI: "Family_Name__c", required: true, fieldName: "Name" },
{ fieldAPI: "Home_Phone__c", required: true }
];

tabchange(event) {
//alert(event);
//alert(event.currentTarget);
const label = event.target.label;
alert(label);
if (label === "Show") {
this.family = "Hide";
this.boolVisible = true;
}  else if  ( label === 'Hide' ) {  

this.family = 'Show';  
this.boolVisible = false;  

}  
}
}
2

There's a lightning-vertical-navigation base component that does just that: https://developer.salesforce.com/docs/component-library/bundle/lightning-vertical-navigation/example

Check out the "Vertical Navigation in Action" example for your use case.

| improve this answer | |
  • @user3214361 I see that you've opened a new question on vertical navigation, can you validate my answer? – POZ Feb 19 at 13:24
0

HTML:

<template>
<div style="min-width: 225px; border-right: 1px solid #e7e7e7;">
    <lightning-layout>
        <lightning-layout-item>
            <lightning-vertical-navigation selected-item={selectedItem} onselect={handleSelect} class="navigation">
                <lightning-vertical-navigation-section>
                    <lightning-vertical-navigation-item label="Recently Viewed" name="reports_recent"></lightning-vertical-navigation-item>
                    <lightning-vertical-navigation-item label="Private Reports" name="reports_private"></lightning-vertical-navigation-item>
                </lightning-vertical-navigation-section>                    
            </lightning-vertical-navigation>
        </lightning-layout-item>
        <lightning-layout-item padding="around-medium">               
            <template if:true={reportrecent}>
            <div class="slds-m-vertical_medium">
                These are the Recently Viewed!
            </div>
        </template>
         <template if:true={privatereport}>
            <div class="slds-m-vertical_medium">
                These are the Private Reports!
            </div>
        </template>


        <template if:true={pubreport}>
            <div class="slds-m-vertical_medium">
                <lightning-button name="add_student" label="Add Student" title="Add Student" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
            </div>
        </template>


        </lightning-layout-item>

    </lightning-layout>

</div>

JS:

import { LightningElement, track } from 'lwc';

export default class LightningExampleVerticalNavAdvanced extends LightningElement {
selectedItem;

handleSelect(event) {
    this.selectedItem  = event.detail.name;  
}

 handleClick(event) {
this.clickedButtonLabel = event.target.label;  

}

get reportrecent() {
    return this.selectedItem === 'reports_recent';
 }

 get privatereport() {
     return this.selectedItem === 'reports_private';
 }

  get pubreport() {
     return this.selectedItem === 'reports_public';
 }
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.