Adicionar estilos e dados ao Componente Web do Lightning

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

Usar o CSS e o Lightning Design System com um componente.
Obter dados de uma organização do Salesforce.
Implantar seu aplicativo em uma organização e testá-lo.

Nota

Deseja aprender em português (Brasil)? Comece o desafio em um Trailhead Playground de português (Brasil) e use as traduções fornecidas entre parênteses para navegar. Copie e cole somente os valores em inglês porque as validações dos desafios dependem de dados em inglês. Se você não passar no desafio em sua organização de português (Brasil), recomendamos que (1) mude o local para os Estados Unidos, (2) mude o idioma para inglês, seguindo as instruções aqui, e (3) clique novamente no botão “Validar o desafio”.

Consulte o emblema Trailhead no seu idioma para saber mais sobre como aproveitar a experiência de Trailhead em outros idiomas.

Adaptar seu componente

Estamos quase terminando nossa introdução aos componentes Web do Lightning, mas vamos ver como podemos controlar a aparência de um componente e extrair dados em tempo real. Podemos adaptar a aparência ao ambiente do Lightning e usar os dados em tempo real na organização. Nesta unidade, animamos a aparência de parte do texto e criamos dinamicamente um nome a partir de um registro na organização.

Use os arquivos do aplicativo Seletor de bicicletas da unidade anterior para concluir este caso.

Estilos de componentes e CSS

A implementação do CSS para Componentes Web do Lightning cumpre o padrão W3C. Você pode criar uma folha de estilo no arquivo CSS e ela será automaticamente aplicada ao arquivo HTML correspondente.

Os Componentes Web do Lightning encapsulam componentes e os mantêm separados do DOM global. Para fazer isso, usamos um mecanismo chamado Shadow DOM. O Shadow DOM é uma implementação comum que permite que elementos de um componente fiquem em uma "sub-árvore" do DOM (saiba mais sobre o Shadow DOM no link disponibilizado na seção Recursos). O componente pode manter sua aparência e comportamento em outros aplicativos ou como filho de outro componente.

Por exemplo, vamos definir o preço de uma bicicleta para ser exibido como texto verde em negrito. Adicione a seguinte entrada .price ao arquivo detail.css.

body{
  margin: 0;
}
.price{
  color: green;
  font-weight: bold;
}

Salve e implante seus arquivos.

Você pode clicar com o botão direito do mouse na pasta de detalhes para implantar apenas o novo arquivo e não esperar pela implantação do projeto inteiro.

Em sua organização, caso as alterações tenham sido armazenadas em cache, para vê-las, talvez seja necessário atualizar a página do aplicativo seletor de bicicletas. Em seguida, quando você selecionar uma bicicleta, o texto será exibido em verde e em negrito.

O estilo do preço deixa o texto verde e em negrito.

Aplicar estilos do Lightning Design System

O SLDS (Salesforce Lightning Design System) é uma estrutura CSS que oferece uma aparência consistente com o Lightning Experience. Componentes Web do Lightning que estão no Lightning Experience ou no aplicativo móvel do Salesforce podem usar o SLDS sem instruções de importação ou recursos estáticos.

Por exemplo, você pode usar os estilos de cabeçalho do SLDS para fornecer o texto de componente detalhado mais parecido com o texto padrão do Lightning. Atualize o arquivo detail.html para usar as configurações de fonte slds-text-heading_small e slds-text-heading_medium da seguinte forma.

<template>
  <template lwc:if={product}>
    <div class="container">
      <div class="slds-text-heading_small">{product.fields.Name.value}</div>
      <div class="price">{product.fields.MSRP__c.displayValue}</div>
      <div class="description">{product.fields.Description__c.value}</div>
      <img class="product-img" src={product.fields.Picture_URL__c.value} alt={product.fields.Name.value}/>
      <p>
        <lightning-badge label={product.fields.Material__c.value}></lightning-badge>
        <lightning-badge label={product.fields.Level__c.value}></lightning-badge>
      </p>
      <p>
        <lightning-badge label={product.fields.Category__c.value}></lightning-badge>
      </p>
    </div>
  </template>
  <template lwc:else>
    <div class="slds-text-heading_medium">Select a bike</div>
  </template>
</template>

Salve e implante seus arquivos.

Agora, experimente o componente em sua organização e veja a diferença (será preciso atualizar a página).

Tratamentos de fontes de cabeçalhos do SLDS aplicados.

Parece ótimo! Já temos a aparência desejada e estamos prontos para começar. (Vamos deixar mais alterações de marcação e estilo SLDS como um exercício para você depois que concluir este módulo. Consulte Marcação compatível com dispositivos móveis para ver algumas ideias e use este aplicativo nas experiências!)

Até agora, temos usado dados estáticos retirados do componente de dados. Vamos adicionar mais um brilho à página... dados dinâmicos.

Obter dados do Salesforce

Afinal, este é um aplicativo do Salesforce e você realmente deseja extrair dados dinâmicos de uma organização do Salesforce. Os componentes Web do Lightning usam um serviço de fios reativo que é criado no Lightning Data Service. Apresentamos um exemplo de como inserir um nome em nosso aplicativo.

O serviço de fios traz dados para seu aplicativo

O serviço de fios é parte de nossa plataforma e oferece um fluxo de dados. O decorador @wire, brevemente mencionado anteriormente, implementa o serviço de fios no aplicativo. Para usar o serviço de fios, faça o seguinte.

Importe um adaptador de fios no arquivo JavaScript.
Decore uma propriedade ou uma função com o decorador @wire.

Veja a sintaxe.

import { adapterId } from 'adapter-module';
@wire(adapterId, adapterConfig) propertyOrFunction;

adapterId (Identificador): o identificador do adaptador de fio.
adapter-module (Cadeia de caracteres): o identificador do módulo que contém a função do adaptador de fio.
adapterConfig (Objeto): um objeto de configuração específico do adaptador de fio.
propertyOrFunction: uma propriedade ou função privada que recebe o fluxo de dados do serviço de fios. Se uma propriedade for decorada com @wire, os resultados serão retornados na propriedade de dados ou de erro da propriedade. Se uma função for decorada com @wire, os resultados serão retornados em um objeto com uma propriedade de dados e uma propriedade de erro.

Além disso, veja como adicioná-la ao arquivo selector.js no projeto em que estivemos trabalhando para extrair o nome do usuário atual de sua organização.

import { LightningElement, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import Id from '@salesforce/user/Id';
import NAME_FIELD from '@salesforce/schema/User.Name';
const fields = [NAME_FIELD];
export default class Selector extends LightningElement {
  selectedProductId;
  handleProductSelected(evt) {
    this.selectedProductId = evt.detail;
  }
  userId = Id;
  @wire(getRecord, { recordId: '$userId', fields })
  user;
  get name() {
    return getFieldValue(this.user.data, NAME_FIELD);
  }
}

A Linha 1 importa o serviço wire de lwc.
A Linha 2 importa o adapterId e adapter-modules para getRecord e getFieldValue a partir de lightning/uiRecordApi.
A Linha 3 importa a ID de usuário atual usando o módulo @salesforce.
A Linha 4 importa o esquema @salesforce para User.Name.
A Linha 12 usa o decorador @wire para usar o serviço wire para chamar getRecord passando em userId e recebendo fields.
A Linha 13 define o user como o receptor da chamada @wire.

Você também pode experimentar isso editando o arquivo selector.html para incluir o nome. Por exemplo:

<template>
  <div class="wrapper">
    <header class="header">Available Bikes for {name}</header>
    <section class="content">
      <div class="columns">
        <main class="main" >
          <c-list onproductselected={handleProductSelected}></c-list>
        </main>
        <aside class="sidebar-second">
          <c-detail product-id={selectedProductId}></c-detail>
        </aside>
      </div>
    </section>
  </div>
</template>

Quando você salvar e implantar os arquivos do componente do seletor em sua organização (certifique-se de que sua implantação inclua os arquivos do seletor), deverá ver o seguinte com seu nome em vez de Mary Jones. Talvez seja necessário atualizar a página.

Nome de usuário carregado dinamicamente na interface de usuário.

Marcação compatível com dispositivos móveis

A marcação para os componentes do Lightning que compõem o aplicativo seletor de bicicletas está limpa e simplificada, criada para manter você focado em aprender as noções básicas dos componentes Web do Lightning. No entanto, ela não é compatível com dispositivos móveis. Dê uma olhada no aplicativo móvel do Salesforce ou assista a uma visualização móvel. Tudo funciona, mas a experiência móvel não é excelente.

Nosso exemplo fica terrível em dispositivos móveis.

Uma das vantagens de usar SLDS é que, com apenas um pouco de esforço, você tem projetos que ficam e funcionam muito bem em desktops e dispositivos móveis. Gostaríamos de entrar em mais detalhes, mas este módulo já cobre muito conteúdo. Veja os Recursos no final desta unidade a fim de saber mais sobre ferramentas e técnicas adicionais para criar componentes do Lightning que deixarão seus usuários de dispositivos móveis felizes.

Embora estejamos deixando os dispositivos móveis de lado por enquanto, recomendamos que faça o contrário quando começar a desenvolver componentes do Lightning “de verdade”. Considere os detalhes e designs de dispositivos móveis desde o início. Com o SLDS e nossas ferramentas de visualização móvel, é fácil criar tanto para dispositivos móveis quanto para desktop, ao mesmo tempo e desde o início.

Se você não se importar com o fato de "transcendermos" aqui, este módulo é um exemplo do perigo de não considerar os dispositivos móveis logo no início. Quando recebemos feedback de que o aplicativo seletor de bicicletas não ficava bem em dispositivos móveis, tivemos a oportunidade de fazer algumas alterações, pois pensamos que seria apenas um pouco de trabalho. Mas embora a marcação do aplicativo seja limpa e semanticamente bem pensada, decidimos que a adaptação a dispositivos móveis para ele não é a coisa certa a se fazer. Queremos refazer não só a marcação, mas também as explicações dela e os desafios práticos. E, na verdade, a própria estrutura e o fluxo deste módulo! Agora é mais trabalho porque não trabalhamos um pouquinho antecipadamente.

E, de vez em quando, isso não é problema! Cada implementação de sistema de tecnologia envolve compensações. Você precisa fazer as compensações corretas em suas equipes e projetos. Mantenha a ideia de compensação em mente para seus projetos. Você não está sendo pego de surpresa.

Conclusão

Isso é apenas o começo. Você pode fazer muito mais com o modelo de Componentes Web do Lightning. O modelo inclui suporte para testes, segurança, integração com o Apex e muito mais. Continue explorando, experimente coisas novas, continue criando. À medida que o padrão de componentes Web do W3C evoluir, nosso modelo também evoluirá.

O caminho para o futuro dos componentes Web do Lightning.

Tempo estimado

Tópicos

Procurando ajuda?

Salesforce Platform Recursos