Reparou que <lightning:card> atribui um tema SLDS quando o campo Reembolsado? do item de despesa está marcado: {!v.expense.Reimbursed__c ? 'slds-theme_success' : ''}. Essa expressão fornece controle sobre a aparência dos itens de despesa reembolsados na interface do usuário. Sem qualquer personalização adicional, os itens de despesa aparecem no estilo do componente expensesList que contém os itens de despesa. Para personalizar o componente expenseItem, clique em ESTILO e adicione o item a seguir.
Em seguida, crie um controlador do lado do cliente expenseItemController.js com o código a seguir. Aqui, estamos convertendo a data que é retornada pelo servidor posteriormente para um objeto de data JavaScript, para que seja exibido corretamente por <lightning:formattedDateTime> e <lightning:relativeDateTime>. Essa conversão é tratada durante a inicialização do componente, capturada pela marca <aura:handler>. Essa é uma maneira útil de lidar com o evento de inicialização e a usaremos novamente mais tarde ao carregar dados do Salesforce.
No Developer Console, crie um novo componente do Aura chamado expensesList e substitua a marcação padrão pelo seguinte.
Não há praticamente nada de novo aqui. Este é um componente que exibe uma lista de despesas. Ele tem um atributo, expenses, que é uma matriz de objetos expense (Expense__c). E ele usa um <aura:iteration> para criar um <c:expenseItem> para cada um desses objetos de despesa. O efeito geral, como nós observamos, é a exibição de uma lista de despesas. Por enquanto, tudo bem.
Se você recarregar o aplicativo, verá uma seção de Despesas abaixo do formulário. (Visualmente ainda não está a cem por cento, mas está bom o bastante para o momento.)
O que acabamos de fazer? Adicionamos o componente expensesList a e passamos o atributo principal expenses para dentro dele. Então, agora, a instância de expenses que expensesList tem é a mesma instância de expenses que o componente expenses tem. Elas são referências para a mesma matriz de registros, e através da mágica dos componentes do Lightning, quando a matriz expenses principal é atualizada, o componente expensesList vai “perceber” e renderizar novamente sua lista. Experimente!
Uau! Essa foi uma unidade longa, e ela pede uma pausa. Por favor, levante e vá dar uma andada por alguns minutos.