LW C Связанный список Встроенное редактирование с колонками Dynami c - PullRequest
Новая
       74

LW C Связанный список Встроенное редактирование с колонками Dynami c

0 голосов
/ 14 февраля 2020

Я надеюсь, вы можете помочь. Я хочу создать LW C, который использует компонент Datatable с Inline Editing. но которые получают столбцы для отображения из параметров страницы молнии в свойствах файла JS .Meta.

Например, в Свойствах будет поле для ввода полей, которые мы хотим отобразить в связанном списке, с разделением запятыми, и эти поля будут передаваться в компонент / динамический c фрагмент soql. для использования в редактируемом списке.

Все примеры, которые я нашел, имеют статически объявленные столбцы, как показано ниже. Но я действительно хочу, чтобы они были определены на странице Lightning Builder, чтобы компонент можно было повторно использовать для нескольких объектов и с разными полями и т. Д. c:

Класс : 

public with sharing class ContactController {

    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        return [SELECT Id, FirstName, LastName, Title, Phone, Email FROM Contact LIMIT 10];
    }
}

HTML: 

<template>
    <lightning-card title="Datatable Example" icon-name="custom:custom63">

        <div class="slds-m-around_medium">
            <template if:true={contact.data}>
                <lightning-datatable
                    key-field="Id"
                    data={contact.data}
                    columns={columns}
                    onsave={handleSave}
                    draft-values={draftValues}>
                </lightning-datatable>
            </template>
            <template if:true={contact.error}>
                <!-- handle Apex error -->
            </template>
        </div>
    </lightning-card>
</template>

JS: 

import { LightningElement, wire, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';
import { updateRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName';
import ID_FIELD from '@salesforce/schema/Contact.Id';


const COLS = [
    { label: 'First Name', fieldName: 'FirstName', editable: true },
    { label: 'Last Name', fieldName: 'LastName', editable: true },
    { label: 'Title', fieldName: 'Title' },
    { label: 'Phone', fieldName: 'Phone', type: 'phone' },
    { label: 'Email', fieldName: 'Email', type: 'email' }
];
export default class DatatableUpdateExample extends LightningElement {

    @track error;
    @track columns = COLS;
    @track draftValues = [];

    @wire(getContactList)
    contact;

    handleSave(event) {

        const fields = {};
        fields[ID_FIELD.fieldApiName] = event.detail.draftValues[0].Id;
        fields[FIRSTNAME_FIELD.fieldApiName] = event.detail.draftValues[0].FirstName;
        fields[LASTNAME_FIELD.fieldApiName] = event.detail.draftValues[0].LastName;

        const recordInput = {fields};

        updateRecord(recordInput)
        .then(() => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Contact updated',
                    variant: 'success'
                })
            );
            // Clear all draft values
            this.draftValues = [];

            // Display fresh data in the datatable
            return refreshApex(this.contact);
        }).catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error creating record',
                    message: error.body.message,
                    variant: 'error'
                })
            );
        });
    }
}

В идеале, я бы хотел объявить объект и поля et c в файле JS -Meta, как показано ниже. И пусть они перейдут в класс / JS et c: 

<?xml version="1.0" encoding="UTF-8"?>  
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="EditableRelatedList">  
    <apiVersion>45.0</apiVersion>  
    <isExposed>true</isExposed>  
    <targets>  
        <target>lightning__RecordPage</target>  
    </targets>  
    <targetConfigs>  
        <!-- Component UI Properties -->
        <targetConfig targets="lightning__RecordPage">  
            <property name="strTitle" type="String" label="Title" description="Enter the title"/>  
            <property name="objectName" type="String" label="Object Name" description="Enter the object name"/>  
            <property name="parentFieldAPIName" type="String" label="Parent Field API Name" description="Enter the parent field API Name"/>  
            <property name="whereClause" type="String" label="WHERE Clause" description="Enter your WHERE clause (Not Required). Do not include 'WHERE'. Eg: firstName = 'David' AND lastName != 'Bradbury'"/> 
            <property name="fields" type="String" label="Fields" description="Enter the API Names of the fields you would like to use in this Related List seperated by a comma. Eg: FirstName, LastName, CustomField1__c, CustomField2__c "/> 
            <property name="errorMessage" type="String" label="Error Message" description="Enter your Error Message for when there are 0 records"/>
        </targetConfig>  
    </targetConfigs>  
</LightningComponentBundle>

Заранее спасибо !!

...