0

I am not using lightning data table as I need to display input and output fields together on the page users don't want to use inline edit of lighting data table.

UPDATE: This problem is coming because I am using this LWC with lightning out, in aura application everything works as expected.

HTML:

<lightning-layout>
        <lightning-layout-item>
            <lightning-card>
                <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                    <thead>
                        <tr class="slds-line-height_reset">
                            <th>
                                Visit Name
                            </th>
                             <th>
                                Visit Class
                            </th>
                            <th>
                                Visit Requirement
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <template if:true={visitDataArray}>
                            <template for:each={visitDataArray} for:item="visitData">
                                <tr key={visitData.Id}>

                                    <td>
                                        <div>
                                            <lightning-input type="text" placeholder="Visit Name"
                                                value={visitData.visitName} variant="label-hidden"
                                                data-key={visitData.visitJSId} onchange={visitNameChanged}>
                                            </lightning-input>
                                        </div>
                                    </td>


                                    <td>
                                        <div>
                                            <lightning-combobox variant="label-hidden" value={visitData.visitClass}
                                                data-key={visitData.visitJSId} options={visitClassPickListValues}
                                                onchange={visitClassChanged}>
                                            </lightning-combobox>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <lightning-combobox variant="label-hidden"
                                                value={visitData.visitRequirement} data-key={visitData.visitJSId}
                                                options={visitRequirementPickListValues}
                                                onchange={visitRequirementChanged}>
                                            </lightning-combobox>
                                        </div>
                                    </td>
                                </tr>
                            </template>
                        </template>
                    </tbody>
                </table>
            </lightning-card>
        </lightning-layout-item>
    </lightning-layout>

JS:

import { LightningElement, track, api, wire } from 'lwc';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import VISITS_OBJECT from '@salesforce/schema/APTS_Study_Visit__c';
import VISITCLASS_FIELD from '@salesforce/schema/APTS_Study_Visit__c.VisitClass__c';
import VISITRequirement_FIELD from '@salesforce/schema/APTS_Study_Visit__c.Visit_Requirement__c';
import visitData from '@salesforce/apex/ManageVisitsController_LWC.getVisitData';



export default class ManageVisits extends LightningElement {

    @track visitClassValue = 'Testing';
    @track visitRequirementValue = 'Mandatory';
    @track showClearButton = false;
    @track numberOfRows;
    @track headerCheckBoxValue = false;
    proposlID;
    visitClassPickListValues;
    visitRequirementPickListValues;

    @track visitDataArray = [];

    @api
    get proposalId() {

        return this.proposlID;
    }
    set proposalId(value) {
        this.proposlID = value;
    }

    @wire(getObjectInfo, { objectApiName: VISITS_OBJECT })
    objectInfo;

    @wire
        (getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: VISITCLASS_FIELD })
    visitClassPickList({ data, error }) {
        if (data) {
            this.visitClassPickListValues = data.values;
        }
    }

    @wire
        (getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: VISITRequirement_FIELD })
    visitRequirementPickList({ data, error }) {
        if (data) {
            this.visitRequirementPickListValues = data.values;
        }
    }

    @wire(visitData, { proposalId: '$proposlID' })
    visitsData({ data, error }) {
        if (data) {
            if (data.length === 0) {
                this.addDummyData(2);
            } else {
                this.visitDataArray = JSON.parse(JSON.stringify(data));
            }
        } else {
            console.log(JSON.stringify(error));
        }
    }

}

table renders as expected but the problem is when i click on the pick list value then it adds scoll bar to see all the values but the expected behavior is pick-list option should be on top as there are only 2 records on the page and there is plenty space available so it should not add a scrool bar but instead show the values on top

enter image description here

I tried all the options available for overflow, position and higher z-index but none of them worked. still to see 3rd option of the pick-list I have to scroll even there are only couple of records on the page and plenty of space available, have wasted my whole day on this and would highly appreciate if anyone would suggest any option to avoid the scrollbar and display picklist option at the top.

UPDATE

VF page for lighting out

<apex:page standardController="APTS_Study_Visit__c" tabStyle="APTS_Study_Visit__c" title="Manage Visits" recordSetVar="temp">
    <apex:includeLightning />

    <div id="displayManageVisits"></div> 

    <script>
    $Lightning.use("c:manageVisitsApp", function() {

        $Lightning.createComponent("c:manageVisits",
                                   { 
                                       // Set Lightning Component Attributes Property before creating Lightning Component In Visualforce page 
                                       proposalId : "{!$CurrentPage.parameters.Id}",

                                   },
                                   "displayManageVisits",
                                  );
                                   });
        </script>
</apex:page>

Aura Application:

<aura:component implements="force:lightningQuickAction,flexipage:availableForAllPageTypes">
    <c:manageVisits/>
</aura:component>

2 Answers 2

1

This works for me in a lightning out page

Application:

<aura:application extends="ltng:outApp" >
  <aura:dependency resource="c:selectTable" />
</aura:application>

Visualforce:

<apex:page standardStylesheets="false" sidebar="false" showHeader="false" >
<apex:includeLightning />
<div id="displayManageVisits"></div> 

<script>
    $Lightning.use("c:TestApp2", function() {

        $Lightning.createComponent("c:selectTable",
                                   {},
                                   "displayManageVisits",
                                  );
     });
 </script>        
 </apex:page>
2
  • works with or without sidebar and header as well May 8, 2020 at 15:04
  • one silly mistake wasted so many hours, anyway, thank you so much for your help!
    – gs650x
    May 8, 2020 at 15:05
1

this is what I get when it's in a lightning app page with hardcoded test values in the js

enter image description here

import { LightningElement } from 'lwc';

export default class SelectTable extends LightningElement {

visitDataArray = [
    {id: 1, visitName: 'test1', visitJSId: 'js1'},
    {id: 2, visitName: 'test2', visitJSId: 'js2'},
    {id: 3, visitName: 'test3', visitJSId: 'js3'}
];

visitClassPickListValues = [
    {label: 'Test', value: 'Test'},
    {label: 'Test1', value: 'Test1'},
    {label: 'Test2', value: 'Test2'},
    {label: 'Test3', value: 'Test3'},
];

visitRequirementPickListValues = [
    {label: 'Test', value: 'Test'},
    {label: 'Test1', value: 'Test1'},
    {label: 'Test2', value: 'Test2'},
    {label: 'Test3', value: 'Test3'},
];

visitClassChanged(event) {
    console.log('changed');
}

visitRequirementChanged(event) {
    console.log('changed');
}

}

<template>
<lightning-layout>
    <lightning-layout-item>
        <lightning-card>
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th>
                            Visit Name
                        </th>
                         <th>
                            Visit Class
                        </th>
                        <th>
                            Visit Requirement
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template if:true={visitDataArray}>
                        <template for:each={visitDataArray} for:item="visitData">
                            <tr key={visitData.Id}>

                                <td>
                                    <div>
                                        <lightning-input type="text" placeholder="Visit Name"
                                            value={visitData.visitName} variant="label-hidden"
                                            data-key={visitData.visitJSId} onchange={visitNameChanged}>
                                        </lightning-input>
                                    </div>
                                </td>


                                <td>
                                    <div>
                                        <lightning-combobox variant="label-hidden" value={visitData.visitClass}
                                            data-key={visitData.visitJSId} options={visitClassPickListValues}
                                            onchange={visitClassChanged}>
                                        </lightning-combobox>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <lightning-combobox variant="label-hidden"
                                            value={visitData.visitRequirement} data-key={visitData.visitJSId}
                                            options={visitRequirementPickListValues}
                                            onchange={visitRequirementChanged}>
                                        </lightning-combobox>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </template>
                </tbody>
            </table>
        </lightning-card>
    </lightning-layout-item>
</lightning-layout>    

7
  • Thank you Scott, this is exactly what I need I am using chrome on windows browser but I am not able to figure out what am I doing wrong, would you please point me at the right direction?
    – gs650x
    May 8, 2020 at 13:04
  • Where are you displaying the component? Is it in a salesforce lightning app and do you have any custom css applied to the component? I'm using chrome on windows as well :) May 8, 2020 at 13:07
  • no custom CSS at all I am using lightning out to render this page via visualforce
    – gs650x
    May 8, 2020 at 13:09
  • ah that could be the difference, I put it inside a lightning app in the lightning ui, what does your visualforce markup look like? May 8, 2020 at 13:11
  • let me update my question with visualforce
    – gs650x
    May 8, 2020 at 13:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .