Skip to main content

Latest Post

Record Types & Page Layout Strategy

  Record Types & Page Layout Strategy 💬 In plain words:   Record Types let one object act like different forms for different teams. Different picklist values, page layouts, and processes — same Account object. Use them for truly different business processes. Not for cosmetic layout changes. 📌 Example:   One Account object, two businesses: 'Retail Customer' record type shows B2C picklist values and layout. 'Enterprise Client' shows contract fields and a different sales process. Same table, two costumes. 🧠 One object, many costumes:   A Record Type is a costume on the same object — different picklists and layouts, same table underneath. Concept Record Types split one object into business variants. •   Each type can carry its own subset of picklist values, its own business process — Lead, Case and Opportunity stages — and its own page layout per profile. •   Lightning has changed the calculus. Dynamic Forms and conditional comp...

Perform a search in a Lightning Web Component (LWC) using a table

Here's an example of how you can perform a search in a Lightning Web Component (LWC) using a table:

HTML file (searchTable.html):


<template>

  <lightning-card title="Search Table">

    <div class="slds-m-around_medium">

      <lightning-input label="Search" value={searchTerm} onchange={handleSearch}></lightning-input>

      <table class="slds-table slds-table_cell-buffer slds-table_bordered">

        <thead>

          <tr class="slds-line-height_reset">

            <th class="slds-text-title_caps">Name</th>

            <th class="slds-text-title_caps">Email</th>

          </tr>

        </thead>

        <tbody>

          <template for:each={filteredData} for:item="record">

            <tr key={record.Id}>

              <td>{record.Name}</td>

              <td>{record.Email}</td>

            </tr>

          </template>

        </tbody>

      </table>

    </div>

  </lightning-card>

</template>


JavaScript file (searchTable.js):


import { LightningElement, track } from 'lwc';


export default class SearchTable extends LightningElement {

  @track searchTerm = '';

  @track data = [

    { Id: '1', Name: 'John Doe', Email: 'john.doe@example.com' },

    { Id: '2', Name: 'Jane Smith', Email: 'jane.smith@example.com' },

    { Id: '3', Name: 'Alex Johnson', Email: 'alex.johnson@example.com' },

    // Add more data as needed

  ];


  get filteredData() {

    if (this.searchTerm) {

      return this.data.filter(record => {

        return record.Name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||

          record.Email.toLowerCase().includes(this.searchTerm.toLowerCase());

      });

    }

    return this.data;

  }


  handleSearch(event) {

    this.searchTerm = event.target.value;

  }

}


CSS file (searchTable.css):


.slds-m-around_medium {

  margin: 1rem;

}


.slds-table {

  width: 100%;

  margin-bottom: 1rem;

}


.slds-text-title_caps {

  text-transform: uppercase;

}


.slds-line-height_reset {

  line-height: 1.2rem;

}


This example demonstrates a simple search functionality in an LWC. The component consists of a Lightning Card containing an input field for searching and a table to display the filtered results. The filteredData property returns the filtered data based on the search term entered by the user. The handleSearch method updates the searchTerm property as the user types in the input field. The table dynamically updates based on the filtered results.


Remember to include the necessary Lightning Web Component files (searchTable searchTable.js, and searchTable.css) in your Salesforce project and add the component to the appropriate Lightning page or app for it to be visible and functional.


Please note that this is a basic example, and you can customize and enhance it further based on your specific requirements.