OnlySalesforce Brasil

🚀 Apresentando o StickyNote : Uma Solução Dinâmica para Anotações no Salesforce!

O componente StickyNote! 📝✨desenvolvido com LWC é uma aplicação dinâmica e interativa que permite aos usuários criar, mover, editar, e excluir notas adesivas (stickers) diretamente na tela do Salesforce. Abaixo, segue a explicação detalhada das funcionalidades do componente e dos recursos recursos de JavaScript aplicados.

Funcionalidades do Componente StickyNote

1. Criação de Notas Adesivas:

• O usuário pode criar novas notas clicando em um botão “Adicionar Nota”. Ao clicar, uma nova nota é criada no centro da tela, com um título que exibe a data e hora de criação.
• Se não houver notas na tela, uma nota é criada automaticamente para garantir que o usuário sempre tenha um ponto de partida.

1. Movimentação das Notas:

• As notas podem ser arrastadas para qualquer posição na tela, utilizando um sistema de “drag and drop” que foi implementado manualmente sem bibliotecas externas, garantindo um comportamento suave e responsivo.
• O movimento das notas é controlado por eventos de mouse (mousedown, mousemove, e mouseup), calculando a nova posição com base nos movimentos do cursor.

1. Edição do Conteúdo das Notas:

• O conteúdo das notas pode ser editado diretamente na interface, permitindo que o usuário adicione ou modifique o texto conforme necessário.
• A área de texto é ajustada para permitir rolagem interna quando o conteúdo excede o tamanho da nota, garantindo uma leitura confortável e evitando que o texto ultrapasse os limites visuais.

1. Persistência de Dados no LocalStorage:

• As notas criadas e editadas são salvas automaticamente no localStorage do navegador, o que permite que o usuário recarregue a página sem perder as notas existentes.
• Cada usuário possui um espaço de armazenamento único, identificado pelo userId do Salesforce, o que impede que notas de diferentes usuários sejam visualizadas por outros.

1. Recuperação das Notas Salvas:

• No connectedCallback, o componente verifica o localStorage e carrega as notas salvas anteriormente para que o usuário possa continuar de onde parou.
• Isso proporciona uma experiência de uso contínua e personalizada, independentemente de quantas vezes o usuário acessar o componente.

1. Exclusão de Notas:

• Cada nota possui um ícone de lixeira que permite sua exclusão direta. Ao clicar no ícone, a nota é removida tanto da tela quanto do localStorage, garantindo que o espaço de armazenamento permaneça organizado.

1. Controle de Z-Index para Notas Sobrepostas:

• Quando uma nota é clicada, ela é trazida para frente das outras, ajustando o z-index automaticamente para garantir que a nota ativa esteja sempre visível acima das demais.
• Esse comportamento simula o movimento de uma pilha de notas, proporcionando um uso intuitivo e natural.

Recursos Avançados de JavaScript Aplicados

1. Manipulação Direta do DOM e Eventos Personalizados:

• Implementação de funcionalidades de drag and drop sem bibliotecas externas, utilizando event.clientX e event.clientY para calcular e atualizar a posição da nota na tela.
• Uso de dataset para armazenar dados temporários durante o arraste das notas, como a posição inicial do mouse e a nota que está sendo movida.

1. Uso de localStorage para Persistência de Dados:

• Salvamento automático das notas no localStorage, permitindo que o conteúdo, posição e ordem das notas sejam restaurados ao recarregar a página.
• Cada nota é armazenada com um identificador único, evitando conflitos e garantindo que apenas o usuário atual tenha acesso às suas próprias notas.

1. Gerenciamento de Estados com Propriedades Reativas:

• Utilização de @track para monitorar mudanças nos arrays de notas e atualizar a interface do usuário de forma reativa, sem a necessidade de manipulações diretas do DOM.
• Isso simplifica a atualização da interface e garante que todas as mudanças sejam refletidas instantaneamente.

1. Geração de Identificadores Únicos:

• As notas são criadas com identificadores únicos, gerados de forma aleatória para evitar conflitos ao salvar no localStorage.
• Essa abordagem previne problemas de duplicidade e mantém a integridade dos dados salvos.

1. Controle de Comportamentos e Eventos com JavaScript:

• Uso extensivo de event.preventDefault() e event.stopPropagation() para controlar a propagação dos eventos de clique e garantir que as interações funcionem conforme esperado.
• Implementação de eventos personalizados para adicionar, mover, editar e excluir notas, oferecendo uma experiência de usuário dinâmica.

Conclusão

O componente StickyNote demonstra como o JavaScript pode ser utilizado de forma avançada para criar uma interface de usuário interativa e intuitiva dentro do Salesforce. Combinando manipulação direta de eventos, persistência de dados local e um design responsivo, o componente oferece uma solução prática para gerenciar notas e informações rápidas.

🔹 Funcionalidades Principais:

• Criação de Notas: Adicione notas rapidamente com apenas um clique, e cada nota é automaticamente posicionada no centro da tela com a data e hora de criação como título.
• Movimentação Fácil: Arraste suas notas para qualquer lugar na tela com um sistema de drag and drop fluido, permitindo organizar suas ideias da forma que quiser.
• Edição Direta: Edite o conteúdo das notas diretamente na interface e aproveite a rolagem interna para notas mais longas!
• Persistência no LocalStorage: Suas notas são salvas automaticamente e restauradas sempre que você acessar o componente, garantindo que nada se perca.
• Exclusão Rápida: Remova notas indesejadas com um simples clique no ícone da lixeira.
• Controle de Visibilidade: Cada usuário tem acesso exclusivo às suas notas graças à identificação única de usuário do Salesforce.

🔹 Recursos Avançados de JavaScript:

Manipulação reativa de estados para garantir que todas as mudanças sejam refletidas instantaneamente.Implementação manual de drag and drop para um movimento natural das notas.Persistência de dados com localStorage para uma experiência contínua.

💡 Por que StickyNote? O StickyNote é mais do que apenas um bloco de notas digital. Ele foi projetado para trazer agilidade e personalização ao dia a dia no Salesforce, tornando suas anotações acessíveis, seguras e organizadas!

Estou animado para expandir esse projeto com novas funcionalidades e explorar novas possibilidades de integração com back-end! Fique ligado para mais atualizações. 😉

Salesforce anuncia o Slack GPT, desbloqueando o poder da IA conversacional para o trabalho

Salesforce apresenta a próxima geração do Tableau, trazendo IA generativa para dados e análises para todos

Salesforce AI conta como pretende impulsionar a IA generativa