0

I am pretty new to JavaScript & LWC. I have two picklists that I am using to filter results. The filters are working independently of each other. I have two questions:

  • How could I set the value of a picklist in JavaScript
  • How can I access the value of a different picklist in JavaScript that isn't part of the event that triggered the JavaScript

Specifically in my code, if a user changes the value of the Category picklist and then changes the value of the Type picklist, I would like to be able to take actions based on both of the values OR I would like to set the value of the one not recently changed to the empty string.

<template>
    <div >
        <!-- Start project list -->
        <template if:true={projects.data}>

            <lightning-input type="search"
                class="slds-hidden"
                onchange={handleSearchTermChange}
                variant="label-hidden"
                label="Search"
                placeholder="Search for projects"
                value={searchTerm}>
            </lightning-input>
            <div>               
                <label for="optionSelect" class="slds-form-element__label slds-no-flex">
                    <abbr class="slds-m-bottom_small partial-width"></abbr>
                    Project Type&nbsp;&nbsp;&nbsp;
                </label>
                <select class="slds-select partial-width" name = "TypeSelect" onchange={handleCategoryChange} >
                    <option value="">All</option>
                    <option value="Workforce">Workforce</option>
                    <option value="Technical">Technical</option>
                </select> 
    </div>
            <label for="categorySelect" class="slds-form-element__label slds-no-flex">
                <abbr class="slds-m-bottom_small partial-width"></abbr>
                Project Status
            </label>
            <select class="slds-select partial-width" name = "categorySelect" onchange={handleCategoryChange} >
                <option value="">All</option>
                <option value="Awarded">Active</option>
                <option value="Completed">Completed</option>
            </select> 

            <lightning-layout multiple-rows="true"  >
                <template for:each={projects.data} for:item="project">
                    <lightning-layout-item key={project.Id} size="3" class="NIIMBL-project-list">
                        <!-- Start project tile -->
                        <div class="Project-Title">
                        <a href={project.Project_URL__c}>{project.Project_Title__c}</a>
                        </div>
                        <div class="Project-Participants-Label">
                            Participants
                        </div>
                        <div class="slds-media__figure">
                                <img src={project.Logo_URL__c} alt="Lead org logo" class="lead-org-logo"/>
                        </div>


                        <div class="Project-Orgs">
                            <lightning-formatted-rich-text value={project.Project_Organizations_RT__c}>
                            </lightning-formatted-rich-text>
                        </div>
                        <!-- End project tile -->
                    </lightning-layout-item>
                </template>
            </lightning-layout>
            <!-- No projects found -->
   <template if:false={hasResults}>
    <div class="slds-align_absolute-center slds-m-vertical_small">
        No projects meeting the search criteria were found.
    </div>
  </template>
        </template>
        <!-- End project list -->
        <!-- Data failed to load -->
        <template if:true={projects.error}>
            <div class="slds-text-color_error">
                An error occurred while loading the project list
            </div>
        </template>
    </div>
 </template>

Controller class:

public with sharing class ProjectController {
@AuraEnabled(Cacheable=true)
public static Project2__c[] getAllProjects() {
    return [SELECT Id, Name, Project_Title__c, Category_text__c, Project_URL__c, Project_Organizations__c, Project_Organizations_RT__c, Logo_URL__c
        FROM Project2__c WHERE Category_text__c='Awarded' OR category_text__c='Completed' ORDER BY Project_Title__c];
}

@AuraEnabled(Cacheable=true)
public static Project2__c[] searchProjects(String searchTerm) {
    // Return all projects when no search term
    searchTerm = searchTerm.trim();
    if (searchTerm == '') {
        return getAllProjects();
    }
    // Prepare query paramters
    searchTerm = '%'+ searchTerm +'%';
    // Execute search query
    return [SELECT Id, Name, Project_Title__c, Project_Type__c, Project_URL__c, Project_Organizations__c, Project_Organizations_RT__c, Logo_URL__c
        FROM Project2__c WHERE ((Category_text__c='Awarded') OR (Category_text__c='Completed') ) AND ((Category_text__c LIKE :searchTerm) OR (Name LIKE :searchTerm) OR (Project_Type__c LIKE :searchTerm) OR 
        (Project_Title__c LIKE :searchTerm) OR (Project_Organizations__c LIKE :searchTerm)) ORDER BY Name];
  }
}

JavaScript

    import { LightningElement, track, wire } from 'lwc';
import searchProjects from '@salesforce/apex/ProjectController.searchProjects';
export default class ProjectList extends LightningElement {
    @track searchTerm = '';
    @wire(searchProjects, {searchTerm: '$searchTerm'})
    projects;
    handleCategoryChange(event) {
        window.clearTimeout(this.delayTimeout);
        const searchTerm = event.target.value;
        this.searchTerm = searchTerm;
        this.TypeSelect = "";
    }
    handleSearchTermChange(event) {
        // Debouncing this method: do not update the reactive property as
        // long as this function is being called within a delay of 300 ms.
        // This is to avoid a very large number of Apex method calls.
        window.clearTimeout(this.delayTimeout);
        const searchTerm = event.target.value;
        this.delayTimeout = setTimeout(() => {
            this.searchTerm = searchTerm;
        }, 300);
    }
    get hasResults() {
        return (this.projects.data.length > 0);
    }
}
  • I don't know why some of my code doesn't come in correctly in the post when I use the Insert Code option. – Michele Kleinhomer Nov 9 at 23:06
0

I was able to retrieve and set the value of a picklist via the following code:

HTML

<template>

    <div >
        <!-- Start project list -->
        <template if:true={projects.data}>

            <lightning-input type="search"
                class="slds-hidden"
                onchange={handleSearchTermChange}
                variant="label-hidden"
                label="Search"
                placeholder="Search for projects"
                value={searchTerm}>
            </lightning-input>
            <div>               
                <label for="optionSelect" class="slds-form-element__label slds-no-flex">
                    <abbr class="slds-m-bottom_small partial-width"></abbr>
                    Project Type&nbsp;&nbsp;&nbsp;
                </label>
                <select class="slds-select partial-width" name="TypeSelect" data-id="TypeSelect" onchange={handleSearchTermChange} >
                    <option value="">All</option>
                    <option value="Workforce">Workforce</option>
                    <option value="Technical">Technical</option>
                </select> 
    </div>
            <label for="categorySelect" class="slds-form-element__label slds-no-flex">
                <abbr class="slds-m-bottom_small partial-width"></abbr>
                Project Status
            </label>
            <select class="slds-select partial-width" name="CategorySelect" data-id="CategorySelect" onchange={handleCategoryChange}>
                <option value="">All</option>
                <option value="Awarded">Active</option>
                <option value="Completed">Completed</option>
            </select> 

            <lightning-layout multiple-rows="true"  >
                <template for:each={projects.data} for:item="project">
                    <lightning-layout-item key={project.Id} size="3" class="NIIMBL-project-list">
                        <!-- Start project tile -->
                        <div class="Project-Title">
                        <a href={project.Project_URL__c}>{project.Project_Title__c}</a>
                        </div>
                        <div class="Project-Participants-Label">
                            Participants
                        </div>
                        <div class="slds-media__figure">
                                <img src={project.Logo_URL__c} alt="Lead org logo" class="lead-org-logo"/>
                        </div>


                        <div class="Project-Orgs">
                            <lightning-formatted-rich-text value={project.Project_Organizations_RT__c}>
                            </lightning-formatted-rich-text>
                        </div>
                        <!-- End project tile -->
                    </lightning-layout-item>
                </template>
            </lightning-layout>
            <!-- No projects found -->

No projects meeting the search criteria were found. An error occurred while loading the project list

JavaScript

import { LightningElement, track, wire } from 'lwc';
import searchProjects from '@salesforce/apex/ProjectController.searchProjects';
export default class ProjectList extends LightningElement {
@track searchTerm = '';
@wire(searchProjects, {searchTerm: '$searchTerm'})
projects;
handleCategoryChange(event) {
    window.clearTimeout(this.delayTimeout);
    // const element = this.template.querySelector('[data-id="TypeSelect"]');
    this.template.querySelector('[data-id="TypeSelect"]')="";
    const searchTerm = event.target.value;
    this.searchTerm = searchTerm;
}
handleSearchTermChange(event) {
    // Debouncing this method: do not update the reactive property as
    // long as this function is being called within a delay of 300 ms.
    // This is to avoid a very large number of Apex method calls.
    window.clearTimeout(this.delayTimeout);
    this.template.querySelector('[data-id="CategorySelect"]').value="";
    const searchTerm = event.target.value;
    this.delayTimeout = setTimeout(() => {
        this.searchTerm = searchTerm;
    }, 300);

}
get hasResults() {
    return (this.projects.data.length > 0);
}
}

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.