O uso de lightning-output-field e lightning-record-view-form requer um ID de registro para exibir os campos no registro. Não requer controladores Apex adicionais ou Serviço de Dados Lightning para exibir os dados de registro. Esse componente também cuida da segurança e do compartilhamento em nível de campo para você, para que os usuários vejam apenas os dados aos quais têm acesso.
Exibindo Campos de Registro
Crie um componente da Web do Lightning usando o comando SFDX abaixo.
|
1
|
sfdx force:lightning:component:create —type lwc —componentname recordview —outputdir force–app\main\default\lwc
|
Use o código recordview.html abaixo
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<template>
<lightning–record–view–form record–id={recordId} object–api–name=“Contact”>
<div class=“slds-box”>
<lightning–output–field field–name=“FirstName”>
</lightning–output–field>
<lightning–output–field field–name=“LastName”>
</lightning–output–field>
<lightning–output–field field–name=“MobilePhone”>
</lightning–output–field>
<lightning–output–field field–name=“Email”>
</lightning–output–field>
</div>
</lightning–record–view–form>
</template>
|
Use o código recordview.js abaixo
|
1
2
3
4
5
|
import { LightningElement ,api} from ‘lwc’;
export default class Recordview extends LightningElement {
@api recordId ;
}
|
Use o código recordview.js-meta.xml abaixo
|
1
2
3
4
5
6
7
8
|
<?xml version=“1.0” encoding=“UTF-8”?>
<LightningComponentBundle xmlns=“http://soap.sforce.com/2006/04/metadata” fqn=“helloWorld”>
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>
|
Empurre as alterações e adicione aos layouts de página. Você pode ver o resultado abaixo.
Para criar um layout com várias colunas para a visualização do registro, use as classes do utilitário Grid no Lightning Design System. Este exemplo cria um layout de duas colunas.
Atualize o código conforme mostrado abaixo.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<template>
<lightning–record–view–form record–id={recordId} object–api–name=“Account”>
<div class=“slds-grid”>
<div class=“slds-col slds-size_1-of-2”>
<lightning–output–field field–name=“Name”></lightning–output–field>
<lightning–output–field field–name=“Phone”></lightning–output–field>
</div>
<div class=“slds-col slds-size_1-of-2”>
<lightning–output–field field–name=“Industry”></lightning–output–field>
<lightning–output–field field–name=“AnnualRevenue”></lightning–output–field>
</div>
</div>
</lightning–record–view–form>
</template>
|
Empurre as alterações e você poderá ver o resultado conforme abaixo.
Vimos como os campos de registro são renderizados usando lightning-input-field e lightning-output-field. Para renderizar dados de uma forma personalizada, use os adaptadores getRecord ou com getRecordUifio.
Atualize o código conforme mostrado abaixo.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<template>
<lightning–record–view–form record–id={recordId} object–api–name={accountObject}>
<div class=“slds-grid”>
<div class=“slds-col slds-size_1-of-2”>
<!— Other record data here —>
</div>
<div class=“slds-col slds-size_1-of-2”>
<lightning–formatted–text value={nameValue} class=“slds-text-heading_large”>
</lightning–formatted–text>
</div>
</div>
</lightning–record–view–form>
</template>
|
No código JavaScript do componente, importe referências ao objeto de conta e ao campo de nome. O getRecord adaptador de fio carrega o campo de nome para renderização personalizada no lightning-formatted-text componente em vez do padrão lightning-output-field usado por lightning-record-view-form.
atualize o código conforme mostrado abaixo.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
import {
LightningElement,
api,
wire
} from ‘lwc’;
/* Wire adapter to fetch record data */
import {
getRecord,
getFieldValue
} from ‘lightning/uiRecordApi’;
import ACCOUNT_OBJECT from ‘@salesforce/schema/Account’;
import NAME_FIELD from ‘@salesforce/schema/Account.Name’;
export default class Recordview extends LightningElement {
/** Id of record to display. */
@api recordId;
/* Expose schema objects/fields to the template. */
accountObject = ACCOUNT_OBJECT;
/* Load Account.Name for custom rendering */
@wire(getRecord, {
recordId: ‘$recordId’,
fields: [NAME_FIELD]
})
record;
/** Gets the Account.Name value. */
get nameValue() {
return this.record.data ? getFieldValue(this.record.data, NAME_FIELD) : ”;
}
}
|
Você pode ver a IU conforme mostrado abaixo.
Fonte: rajvakati.com