OmniStudio Flexcards
Tags: salesforce, omnistudio, lowcode, nocode
Published: 2023-02-22 11:37:53

No último _post_, falei sobre o que é o _Omnistudio_ e quais as camadas que o compõe. Saiba mais em [Introdução ao OmniStudio](https://dev.to/lizvidotti/introducao-ao-salesforce-omnistudio-p10)

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.

## Referências
[Documentação](https://help.salesforce.com/s/articleView?id=sf.os_flexcards.htm&type=5)

[OmniStudio Flexcards](https://trailhead.salesforce.com/en/content/learn/modules/omnistudio-flexcards)

[OmniStudio FlexCard Building and Publishing](https://trailhead.salesforce.com/en/content/learn/modules/omnistudio-flexcards-building-and-publishing)