No último post, falei sobre o que é o Omnistudio e quais as camadas que o compõe. Saiba mais em Introdução ao OmniStudio
Nesse artigo, vamos aprender sobre o componente Flexcard. Ele faz parte da camada chamada Digital Experience. Podemos conceituar o Flexcard como um componente que mostra informações e ações rápidas de forma simples e objetiva.
O Flexcard otimiza o tempo de desenvolvimento de soluções customizadas, que normalmente utilizam as tecnologias HTML, CSS e Javascript, através do desenvolvimento declarativo, ou configurações baseadas em cliques. Com ela, podemos adicionar e estilizar campos, botões, links, rótulos de campo (labels), ícones, imagens e gráficos facilmente através do designer canvas.
Características
- Ele combina informações e ações estratégicas ao negócio. Com poucos cliques, podemos obter informações e imputar dados de maneira eficiente e rápida;
- Ao editar/atualizar as informações, o flexcard reflete as mudanças em tempo real;
- Podem ser implementados em qualquer canal ou dispositivo, como: Lightning Page, Community, Sistema de Gerenciamento de conteúdo externo ou Container web customizado;
- As informações mostradas num flexcard podem ter diversas origens de dados, como: o próprio Salesforce, website ou sistema legado;
- Ele é construído de forma declarativa ou drag-and-drop. Para modificar o estilo do componente, podemos usar o editor ou CSS customizado. As modificações são exibidas automaticamente no canvas, que é o espaço que nos apresenta a prévia do componente;
- Podemos incluir botões de ações em um FlexCard, como
- Carregar um fluxo com processo guiado
- Exibir um flyout com informações adicionais
- Navegar para outro registro
- Ouvir um evento de outro flexcard e atualizar o flexcard em questão quando o evento é disparado;
- Notificar um componente em outra página ou aplicação de que um evento ocorreu;
- Podemos incorporar um ou mais componentes dentro de um flexcard principal;
- Podemos incorporar o flexcard em um Omniscript, ou processo de interação guiada;
- Podemos incluir o flexcard em um flyout, que nos permite exibir informações adicionais ou secundárias em componentes separados;
- Podemos definir estados e condicionais para o flexcard, onde o conteúdo e ações disponíveis ao usuário podem mudar de acordo com o tipo ou status da informação.
Child Flexcard
Como vimos anteriormente, podemos incorporar um ou mais flexcards em um único flexcard.
Ao criar um novo componente, temos um campo chamado "Is Child Flexcard". Quando este campo está marcado, significa que este componente pode ser utilizado em mais de um flexcard. Não há limite para a quantidade de child flexcards presentes num parent flexcard. Para adicionar um novo child flexcard no flexcard principal, ele precisa estar ativo.
Também podemos configurá-lo para que ele consuma fontes de dados oriundas de seu parent ou componente principal, ou funcione de maneira independente, consumindo fontes de dados distintas. Isso nos permite utilizar diversas fontes de dados em um único componente. É importante lembrar que, ao configurar o flexcard principal para enviar dados para os componentes relacionados, todas as origens de dados dos componentes relacionados são sobrescritas pela origem de dados do componente principal.
O flexcard pode consumir dados internos (do próprio Salesforce) ou externos. Os dados externos incluem qualquer dado de fora da sua instância Salesforce, ou Organização. É comum que as implementações requeiram o consumo de dados externos, como:
- Origens de dados de sistemas legados;
- Origens de dados on-premises (on-prem). Ele se refere a data centers privados mantidos pela própria empresa;
- Integrações de API.
Flyout
O flyout ajuda na organização das informações que você deseja exibir em tela. Ele pode ser usado na forma de um popover ou modal. Ele é normalmente usado quando há a necessidade de exibir informações longas, que não cabem em um único flexcard.
Podemos incorporar o child flexcard em um flyout. Além de permitir a exibição de dados, também podemos incluir ações adicionais.
Tipos de flyout
- Child Flexcard;
- Omniscript;
- Lightning Web Component (LWC);
Navigate action
Podemos incluir um botão de ação em nosso componente que direciona o usuário a uma outra página, que pode ser uma página do Lightning Experience ou Lightning Commmunity da própria organização, ou página web externa.
Flexcard States
Podemos definir estados e condicionais para o flexcard, onde o conteúdo e ações disponíveis ao usuário podem mudar de acordo com o tipo ou status da informação. Todo flexcard criado possui um estado, o estado padrão, ou default.
Para criar um novo estado, basta adicionarmos um novo elemento State ao canvas ou clonarmos um estado existente. Não há limite para o número de estados que podemos adicionar a um flexcard. A ordem dos estados é crucial para determinar qual tipo de informação será exibida. O processo começa no topo da lista e é percorrido até o último estado. Aquele que retornar as condições verdadeiras será exibido para o usuário final.
Melhores práticas: devemos ter apenas um estado verdadeiro por registro, e o último estado da lista será o estado default, ou padrão. Ele não tem condicionais, e é exibido se todos os outros estado anteriores a ele retornarem falso.
Publicando seu FlexCard
Ao ativar um FlexCard, geramos um novo componente LWC (Lightning Web Component) que pode ser publicado em uma Lightning Page ou Community Page.
Ao navegarmos no nosso editor do Lightning App Builder ou Experience Cloud, os componentes ficam disponíveis na seção Customizados (Custom).
Opções de publicação
- Master label: esse é o nome que aparecerá na sua lista de componentes customizados no seu editor de páginas do Lightning ou editor da sua comunidade Salesforce;
- API Version: aqui fica a versão da API em que foi desenvolvido o componente;
- Runtime Namespace: define o nome do pacote Vlocity;
- Is Exposed: define se o seu componente é público;
- Add SVG Resource/Drop it here: define o ícone customizado do seu componente. Esse ícone aparecerá na lista de componentes customizados do seu editor de páginas do Lightning ou editor da sua comunidade Salesforce;
-
Targets: define em quais lugares o seu componente está disponível para publicação. Por padrão, não definimos targets para os child flexcards. Podemos definir como locais:
- App Page: página inicial do aplicativo
- Home Page: página inicial customizada
- Record Page: página de detalhes de registro de um objeto
- Community Page: site do Experience Builder
- Community Default: site do Experience Builder com propriedades configuráveis.
Versionamento vs. Clone
O versionamento nos permite fazer alterações em nosso componente sem alterar a versão original. Um flexcard pode ter múltiplas versões, mas apenas uma versão pode estar ativada por vez. Utilizamos o versionamento quando queremos realizar atualizações no componente, por exemplo, e temos necessidade de subsbtituí-lo.
Quando clonamos um flexcard, criamos um cópia independente do componente original, que pode ter um novo nome e autor, ao contrário do versionamento. Podemos ter vários clones ativados em uma organização Salesforce, mas apenas uma versão ativa de um único componente.
Top comments (0)