Skip to main content

Record Component

Adalah komponen yang memiliki properti @api recordId dan @api objectApiName.

  1. @api recordId:

    • Kegunaan: Properti ini digunakan untuk menerima ID dari record yang sedang ditampilkan atau diakses dalam konteks komponen.
    • Ini sangat berguna ketika komponen Anda perlu mengetahui atau bekerja dengan record spesifik yang sedang dilihat oleh pengguna.

  2. @api objectApiName:

    • Kegunaan: Properti ini digunakan untuk menerima nama API dari objek Salesforce yang terkait dengan komponen.
    • Ini memungkinkan komponen Anda untuk mengetahui jenis objek yang sedang diakses, yang berguna untuk operasi dinamis atau konfigurasi berbasis objek.

Kedua properti ini sering digunakan bersama-sama dalam komponen yang perlu mengetahui konteks di mana mereka ditampilkan, seperti pada halaman record atau dalam Lightning App Builder.

Contoh​

Berikut adalah contoh sederhana penggunaan kedua properti ini dalam sebuah komponen LWC:

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';

export default class RecordInfo extends LightningElement {
    @api recordId;
    @api objectApiName;

    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD] })
    record;

    get name() {
        return getFieldValue(this.record.data, NAME_FIELD);
    }

    get message() {
        return `This is a ${this.objectApiName} record with ID: ${this.recordId}`;
    }
}

Dalam contoh ini:

  1. Komponen menerima recordId dan objectApiName melalui properti @api.
  2. Komponen menggunakan @wire untuk mengambil data record berdasarkan recordId yang diterima.
  3. Komponen menampilkan nama objek dan ID record menggunakan objectApiName dan recordId.
  4. Jika objeknya adalah Account, komponen juga akan menampilkan nama Account.

Pemakaian Komponen​

Komponen ini dapat digunakan di berbagai tempat dalam ekosistem Salesforce. Berikut adalah beberapa lokasi utama di mana komponen seperti ini bisa dimanfaatkan:

  1. Record Pages:

    • Ini adalah lokasi paling umum untuk komponen semacam ini.
    • Komponen dapat ditambahkan ke tata letak halaman record untuk objek tertentu (seperti Account, Contact, Opportunity, dll.) melalui Lightning App Builder.
    • Salesforce akan secara otomatis menyediakan recordId dan objectApiName sesuai dengan record yang sedang dilihat.

  2. Lightning App Pages:

    • Komponen dapat ditambahkan ke halaman aplikasi kustom yang dibuat menggunakan Lightning App Builder.
    • Jika halaman dikonfigurasi untuk objek tertentu, objectApiName akan disediakan.
    • recordId mungkin perlu dikonfigurasi secara manual atau diperoleh melalui navigasi.

  3. Lightning Experience Home Page:

    • Komponen dapat ditambahkan ke halaman beranda Lightning Experience.
    • Dalam konteks ini, objectApiName mungkin tidak selalu tersedia, dan recordId biasanya tidak ada kecuali jika dikonfigurasi secara khusus.

  4. Lightning Community Pages:

    • Komponen dapat digunakan dalam halaman komunitas Lightning (Experience Cloud).
    • Berguna untuk menampilkan informasi record spesifik kepada pengguna komunitas.

  5. Lightning Console Apps:

    • Dalam aplikasi konsol, komponen dapat digunakan di tab utama atau sub-tab.
    • Sangat berguna untuk menampilkan informasi terkait record yang sedang dilihat di tab lain.

  6. Quick Actions:

    • Komponen dapat digunakan sebagai konten untuk Quick Action kustom.
    • Dalam konteks ini, recordId dari record induk akan disediakan.

  7. Lightning Flows:

    • Komponen dapat diintegrasikan ke dalam Lightning Flow sebagai komponen layar.
    • recordId dan objectApiName dapat diteruskan dari Flow ke komponen.

  8. Utility Bar:

    • Komponen dapat ditambahkan ke Utility Bar, meskipun dalam konteks ini, recordId dan objectApiName mungkin perlu dikonfigurasi secara manual.

  9. Custom Tabs:

    • Komponen dapat digunakan sebagai konten untuk tab kustom dalam aplikasi Lightning.
    • Dalam kasus ini, recordId dan objectApiName mungkin perlu dikonfigurasi atau diperoleh melalui logika komponen.

  10. Lightning Web Components for Visualforce:

    • Jika organisasi masih menggunakan beberapa halaman Visualforce, komponen LWC dapat diintegrasikan ke dalamnya.
    • recordId dan objectApiName dapat diteruskan dari konteks Visualforce.

Konfigurasi​

Untuk menggunakan komponen di lokasi-lokasi ini, Anda perlu memastikan bahwa komponen telah dikonfigurasi dengan benar dalam metadata XML-nya. Sebagai contoh:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="recordId" type="String" />
            <property name="objectApiName" type="String" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Konfigurasi ini memungkinkan komponen untuk digunakan di halaman record, halaman aplikasi, halaman beranda, dan halaman komunitas. Anda dapat menyesuaikan target dan konfigurasi sesuai kebutuhan spesifik komponen Anda.

Dengan fleksibilitas ini, komponen yang menggunakan @api recordId dan @api objectApiName dapat menjadi alat yang sangat berguna dalam berbagai skenario di Salesforce, memungkinkan pengembang untuk membuat komponen yang dapat digunakan kembali dan kontekstual di seluruh platform.

Referensi Tambahan​

Course: Zero to Hero in LWC | Fetch Record ID & Object Name