Código fluxo - input

Para você que deseja importar o código em seu fluxo e testar da forma que achar melhor.

ver-codigo-vs-importar.mp4
{ "8fdcbf77-3489-462a-a8fe-bdbb87ec3e01": { "id": "8fdcbf77-3489-462a-a8fe-bdbb87ec3e01", "name": "entry", "data": { "type": "entry", "name": "Entrada", "description": "Início do fluxo (usuário envia uma mensagem)" }, "class": "entry", "html": "entry", "typenode": "vue", "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "b92f7c02-6660-4350-8a74-6279a52028e0", "output": "input_1" } ] } }, "pos_x": 446.5, "pos_y": 48 }, "b92f7c02-6660-4350-8a74-6279a52028e0": { "id": "b92f7c02-6660-4350-8a74-6279a52028e0", "name": "node_a414bed6-5426-4d7d-a03f-d50eba1307a0", "data": { "type": "message", "inputs": 1, "outputs": [ { "title": "Default" } ], "message": "Componente selecionado: Input", "name": "Componente selecionado" }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "8fdcbf77-3489-462a-a8fe-bdbb87ec3e01", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "23f764a5-26de-4737-83df-071229569296", "output": "input_1" } ] } }, "pos_x": 411, "pos_y": 421 }, "23f764a5-26de-4737-83df-071229569296": { "id": "23f764a5-26de-4737-83df-071229569296", "name": "node_919d35d2-52ca-4828-bc1d-b0fcf967538b", "data": { "type": "message", "inputs": 1, "outputs": [ { "title": "Default" } ], "message": "*Este componente é utilizado para capturar o input do usuário no fluxo de chat. Ele é altamente flexível, permitindo a captura de diferentes tipos de dados, como texto, números, e-mails, e outros formatos, com validações pré-definidas para cada tipo de entrada.*\n\n*FLUXO DO COMPONENTE:*\n1. O componente exibe uma mensagem solicitando o dado do beneficiário, de acordo com o tipo de entrada configurado.\n2. O beneficiário insere o dado que será validado automaticamente pelo componente, com base no tipo de entrada e validações adicionais (expressão regular, tamanho mínimo/máximo).\n3. Caso o input seja inválido, uma mensagem de erro será apresentada, permitindo que o beneficiário tente novamente.\n4. O dado validado será armazenado em uma variável, que poderá ser usada em outros pontos do fluxo.\n\n*CONFIGURANDO O COMPONENTE:*\n\n1. *Mensagem:* Defina qual será a mensagem apresentada ao beneficiário ao solicitar a entrada de dados. Exemplo: \"Por favor, informe seu CPF.\"\n \n2. *Mensagem de erro:* Defina a mensagem que será apresentada caso o dado fornecido seja inválido ou incompatível com as validações. Exemplo: \"CPF inválido, tente novamente.\"\n\n3. *Tipo de entrada:* Escolha o tipo de dado que o beneficiário deve fornecer. As opções incluem:\n - Alfanumérico\n - CEP\n - CNPJ\n - CPF\n - Data\n - Data e hora\n - E-mail\n - Geolocalização\n - Hora\n - Inteiro\n - Numérico\n - Telefone\n - Texto longo\n - URL\n - Documento\n \n *Obs:* Cada tipo de entrada já possui validações pré-definidas.\n\n4. *Expressão regular:* Caso seja necessária uma validação personalizada, você pode definir uma expressão regular para o campo de entrada. Isso permite flexibilidade no controle de formatos específicos de dados.\n\n5. *Tamanho mínimo:* Especifique o número mínimo de caracteres ou dígitos que o dado inserido deve ter.\n\n6. *Tamanho máximo:* Especifique o número máximo de caracteres ou dígitos que o dado inserido pode ter.\n\n7. *Variáveis:* Armazene o input capturado em uma variável. Esta variável poderá ser utilizada em outros componentes ou fluxos subsequentes, permitindo controle e manipulação dos dados inseridos.\n\n---\n\n*O que é uma Expressão Regular?*\nExpressões regulares são padrões utilizados para verificar se uma string (texto) corresponde a uma determinada sequência de caracteres. Elas são usadas em validações complexas para assegurar que o dado inserido siga um formato específico. Por exemplo, para garantir que um e-mail tenha um formato válido, como `exemplo@dominio.com`.", "name": "Explicando o componente" }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "b92f7c02-6660-4350-8a74-6279a52028e0", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "bda7e5f5-7b23-430a-93f0-974e043fdbcc", "output": "input_1" } ] } }, "pos_x": 406, "pos_y": 793 }, "ba69efbd-56a9-4396-8309-7976630c4c22": { "id": "ba69efbd-56a9-4396-8309-7976630c4c22", "name": "node_27c9e3bb-8e71-4d4b-bd24-e7e31ad9e4a7", "data": { "type": "message", "inputs": 1, "outputs": [ { "title": "Default" } ], "message": "Opção incorreta, tente novamente.", "name": "Opção incorreta" }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "bda7e5f5-7b23-430a-93f0-974e043fdbcc", "input": "output_5" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "bda7e5f5-7b23-430a-93f0-974e043fdbcc", "output": "input_1" } ] } }, "pos_x": 808, "pos_y": 1184 }, "7bf46653-fee9-480a-b3ee-8b19df43ee70": { "id": "7bf46653-fee9-480a-b3ee-8b19df43ee70", "name": "node_4e56bb68-0acb-498f-b411-7a4ad7f3c837", "data": { "type": "flow", "inputs": 1, "outputs": [], "flowId": "66aa8001272ce6cffa35bca6", "name": "Menu inicial" }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "bda7e5f5-7b23-430a-93f0-974e043fdbcc", "input": "output_4" } ] } }, "outputs": {}, "pos_x": 936, "pos_y": 1636 }, "6a3d6053-dc2d-4733-88bc-cf5c6f79b5c2": { "id": "6a3d6053-dc2d-4733-88bc-cf5c6f79b5c2", "name": "node_f38c6c2f-8a1b-497c-8592-39e5984a6b85", "data": { "type": "message", "inputs": 1, "outputs": [ { "title": "Default" } ], "message": "*Veremos agora o uso avançado deste componente:*\n\nNeste teste, iremos visualizar como o componente \"Input\" pode ser utilizado para capturar diferentes tipos de dados inseridos pelo usuário, com validações automáticas e personalizadas.\n\n*Cenário: Captura e validação de dados do usuário.*\n - O fluxo capturará três tipos de dados diferentes utilizando o componente \"Input\": CPF, E-mail e um Código de validação (alfanumérico).\n - Cada dado será validado automaticamente conforme o tipo de entrada configurado no componente.\n - Caso algum dado inserido seja inválido, o sistema exibirá uma mensagem de erro e solicitará o dado novamente.\n - No final, todos os dados capturados serão armazenados e exibidos em uma mensagem de confirmação.\n\n*Configuração do Fluxo:*\n - *Passo 1:* O sistema solicita ao beneficiário que informe seu *CPF* utilizando o tipo de entrada \"CPF\".\n - *Passo 2:* Após a validação automática do CPF, o sistema solicita o *E-mail* do beneficiário, utilizando o tipo de entrada \"E-mail\".\n - *Passo 3:* Por fim, o sistema solicita que o beneficiário informe um *Código de validação* (alfanumérico), com tamanho mínimo de 6 caracteres e máximo de 12.\n - *Passo 4:* Todos os dados capturados serão exibidos em uma mensagem de confirmação no final do fluxo.\n\n*Configuração do Componente:*\n\n1. *Captura do CPF:*\n - *Mensagem:* \"Por favor, informe seu CPF.\"\n - *Mensagem de erro:* \"CPF inválido, tente novamente.\"\n - *Tipo de entrada:* CPF\n - *Tamanho mínimo/máximo:* Padrão para CPF (11 dígitos).\n - *Variável:* `cpfUsuario`\n\n2. *Captura do E-mail:*\n - *Mensagem:* \"Por favor, informe seu e-mail.\"\n - *Mensagem de erro:* \"E-mail inválido, tente novamente.\"\n - *Tipo de entrada:* E-mail\n - *Tamanho mínimo/máximo:* Sem restrições específicas.\n - *Variável:* `emailUsuario`\n\n3. *Captura do Código de Validação:*\n - *Mensagem:* \"Por favor, insira o código de validação (alfanumérico).\"\n - *Mensagem de erro:* \"Código inválido. O código deve ter entre 6 e 12 caracteres.\"\n - *Tipo de entrada:* Alfanumérico\n - *Tamanho mínimo:* 6 caracteres\n - *Tamanho máximo:* 12 caracteres\n - *Variável:* `codigoValidacao`\n\n*Fluxo do Teste:*\n\n1. *Passo 1:* O sistema exibe a mensagem solicitando o CPF do beneficiário. O CPF é validado automaticamente, e, caso seja inválido, o beneficiário vê a mensagem de erro e pode tentar novamente.\n \n2. *Passo 2:* Após a validação do CPF, o sistema solicita o e-mail do beneficiário. O e-mail é validado automaticamente, e, caso seja inválido, o beneficiário vê a mensagem de erro e pode tentar novamente.\n\n3. *Passo 3:* Por fim, o sistema solicita que o beneficiário insira o código de validação, que deve ser alfanumérico e ter entre 6 e 12 caracteres. Caso o código não cumpra essas condições, o sistema exibirá a mensagem de erro.\n\n4. *Passo 4:* Se todos os dados forem validados corretamente, o sistema exibirá uma mensagem de confirmação com o CPF, e-mail e o código de validação inseridos.\n\n*Mensagem Final:*\n - \"Os dados inseridos foram capturados com sucesso: \n - CPF: {cpfUsuario}\n - E-mail: {emailUsuario}\n - Código de validação: {codigoValidacao}\"\n\n---\n\n*IMPORTANTE*\nSe houver falhas no preenchimento dos campos ou nas validações, o sistema exibirá mensagens de erro personalizadas e permitirá ao beneficiário corrigir os dados antes de prosseguir.", "name": "Testar componente" }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "bda7e5f5-7b23-430a-93f0-974e043fdbcc", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "866199c6-da5b-4852-8606-8f1069597c2d", "output": "input_1" } ] } }, "pos_x": 81, "pos_y": 1629 }, "866199c6-da5b-4852-8606-8f1069597c2d": { "id": "866199c6-da5b-4852-8606-8f1069597c2d", "name": "node_92659565-24cf-45b1-aba2-258b5b8c8e22", "data": { "body": "Vamos iniciar o teste utilizando as informações descritas anteriormente", "buttons": [ { "id": "596ef77c-36f6-40d9-88ef-8a54a5c5b142", "title": "Sim 👍🏽" }, { "id": "0d5835ef-1d2c-471c-9cc5-1e367016f2af", "title": "Voltar para o menu" } ], "description": "", "footer": "", "header": "Iniciar o teste", "inputs": 1, "name": "Decisão", "type": "buttons", "outputs": [ { "title": "Sim 👍🏽" }, { "title": "Voltar para o menu" }, { "title": "Nenhuma das opções" } ], "variables": [ { "name": "button_d0f2pgzy", "description": "Variável contendo o título do botão clicado" } ] }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "82b7d2a1-b0da-41d8-860b-eafc3a5fd9da", "input": "output_1" }, { "node": "6a3d6053-dc2d-4733-88bc-cf5c6f79b5c2", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "8713510d-f4ca-412f-bcc4-de324201fcc9", "output": "input_1" } ] }, "output_2": { "connections": [ { "node": "ee954ea1-1a90-4315-80f5-af548f99e9f5", "output": "input_1" } ] }, "output_3": { "connections": [ { "node": "82b7d2a1-b0da-41d8-860b-eafc3a5fd9da", "output": "input_1" } ] } }, "pos_x": 82, "pos_y": 1916 }, "82b7d2a1-b0da-41d8-860b-eafc3a5fd9da": { "id": "82b7d2a1-b0da-41d8-860b-eafc3a5fd9da", "name": "node_7e98cc13-08db-421a-8dd7-59364353100a", "data": { "type": "message", "inputs": 1, "outputs": [ { "title": "Default" } ], "message": "Opção incorreta, tente novamente.", "name": "Opção incorreta" }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "866199c6-da5b-4852-8606-8f1069597c2d", "input": "output_3" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "866199c6-da5b-4852-8606-8f1069597c2d", "output": "input_1" } ] } }, "pos_x": 444, "pos_y": 1923 }, "ee954ea1-1a90-4315-80f5-af548f99e9f5": { "id": "ee954ea1-1a90-4315-80f5-af548f99e9f5", "name": "node_8ce9c21c-f6ea-44f2-9d8d-0cc1870dc7c0", "data": { "type": "flow", "inputs": 1, "outputs": [], "flowId": "66aa8001272ce6cffa35bca6", "name": "Menu inicial" }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "866199c6-da5b-4852-8606-8f1069597c2d", "input": "output_2" } ] } }, "outputs": {}, "pos_x": 506, "pos_y": 2375 }, "0edf0a8c-7f14-4376-8559-24cd3d983dc9": { "id": "0edf0a8c-7f14-4376-8559-24cd3d983dc9", "name": "node_925d29aa-b659-4ee7-8882-ce21bff50309", "data": { "type": "message", "inputs": 1, "outputs": [ { "title": "Default" } ], "message": "*Parabens! Você viu agora um uso super avançado do componente Input*", "name": "Teste Finalizado" }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "bfaa3fc3-9034-4630-a52b-d6fa78b45b60", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "bda7e5f5-7b23-430a-93f0-974e043fdbcc", "output": "input_1" } ] } }, "pos_x": -117, "pos_y": 3474 }, "bda7e5f5-7b23-430a-93f0-974e043fdbcc": { "id": "bda7e5f5-7b23-430a-93f0-974e043fdbcc", "name": "node_42b6135f-7804-47ab-b1e3-20a4feabdf7b", "data": { "body": "Selecione uma das opções abaixo", "button": "Selecionar", "description": "", "footer": "", "header": "Mais alguma dúvida?", "inputs": 1, "name": "Decisão", "outputs": [ { "title": "Exemplos avançados" }, { "title": "Vídeo explicativo" }, { "title": "Ver código" }, { "title": "Ir para o menu" }, { "title": "Nenhuma das opções" } ], "rows": [ { "id": "23afd4ec-f516-4f2a-b5f9-963a18afc9dc", "title": "Exemplos avançados", "description": "Para voce que deseja se aprofundar no conhecimento" }, { "id": "1feeb0e3-701f-4fa5-9718-1181077d2569", "title": "Vídeo explicativo", "description": "Para você que deseja ver explicação em vídeo" }, { "id": "01732938-0c91-49e2-a454-281095c85b51", "title": "Ver código", "description": "Para você que deseja o código deste fluxo e importar em seus testes" }, { "id": "d9a64bb1-306b-45f0-9c48-f010a1944ab4", "title": "Ir para o menu", "description": "Para você que entendeu tudo e deseja voltar ao menu" } ], "type": "options", "variables": [ { "name": "button_m5idfbx5", "description": "Variável contendo o título da opção selecionada" } ] }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "ba69efbd-56a9-4396-8309-7976630c4c22", "input": "output_1" }, { "node": "23f764a5-26de-4737-83df-071229569296", "input": "output_1" }, { "node": "0edf0a8c-7f14-4376-8559-24cd3d983dc9", "input": "output_1" }, { "node": "8b5f9b9b-4200-44f4-a024-4b010fbce38b", "input": "output_1" }, { "node": "179ac31c-d902-45e6-8d65-b0ad68487b8a", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "6a3d6053-dc2d-4733-88bc-cf5c6f79b5c2", "output": "input_1" } ] }, "output_2": { "connections": [ { "node": "8b5f9b9b-4200-44f4-a024-4b010fbce38b", "output": "input_1" } ] }, "output_3": { "connections": [ { "node": "179ac31c-d902-45e6-8d65-b0ad68487b8a", "output": "input_1" } ] }, "output_4": { "connections": [ { "node": "7bf46653-fee9-480a-b3ee-8b19df43ee70", "output": "input_1" } ] }, "output_5": { "connections": [ { "node": "ba69efbd-56a9-4396-8309-7976630c4c22", "output": "input_1" } ] } }, "pos_x": 409, "pos_y": 1168 }, "8b5f9b9b-4200-44f4-a024-4b010fbce38b": { "id": "8b5f9b9b-4200-44f4-a024-4b010fbce38b", "name": "node_461d6a76-586f-49f2-a42b-0cbb0d0aaedc", "data": { "type": "message", "inputs": 1, "outputs": [ { "title": "Default" } ], "message": "Acesse o video em nossa documentação clicando aqui em: *<a href=\"https://mobilesaudejira.atlassian.net/wiki/x/BoDGwQ\" target=\"_blank\">Componente Input</a>*", "name": "Vídeo explicativo" }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "bda7e5f5-7b23-430a-93f0-974e043fdbcc", "input": "output_2" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "bda7e5f5-7b23-430a-93f0-974e043fdbcc", "output": "input_1" } ] } }, "pos_x": 362, "pos_y": 1636 }, "179ac31c-d902-45e6-8d65-b0ad68487b8a": { "id": "179ac31c-d902-45e6-8d65-b0ad68487b8a", "name": "node_ffa16527-9f98-4509-bdd2-ff307897c987", "data": { "type": "message", "inputs": 1, "outputs": [ { "title": "Default" } ], "name": "Ver código", "message": "Acesse o código em nossa documentação clicando aqui em: *<a href=\"https://mobilesaudejira.atlassian.net/wiki/x/CwC-wQ\" target=\"_blank\">Código Fluxo Input</a>*" }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "bda7e5f5-7b23-430a-93f0-974e043fdbcc", "input": "output_3" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "bda7e5f5-7b23-430a-93f0-974e043fdbcc", "output": "input_1" } ] } }, "pos_x": 640, "pos_y": 1637 }, "8713510d-f4ca-412f-bcc4-de324201fcc9": { "id": "8713510d-f4ca-412f-bcc4-de324201fcc9", "name": "node_aec0ab8c-a919-4254-bcbc-f03ca15a3baf", "data": { "type": "input", "inputs": 1, "outputs": [ { "title": "Default" } ], "inputType": "cpf", "variables": [ { "name": "cpfUsuario", "description": "Resposta do usuário" } ], "message": "Por favor, informe seu CPF.", "errorMessage": "CPF inválido, tente novamente.", "name": "Captura do CPF" }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "866199c6-da5b-4852-8606-8f1069597c2d", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "526854d6-2e70-41c0-9eba-919298bda546", "output": "input_1" } ] } }, "pos_x": -236, "pos_y": 2218 }, "526854d6-2e70-41c0-9eba-919298bda546": { "id": "526854d6-2e70-41c0-9eba-919298bda546", "name": "node_fc5790a9-dc6a-4e31-b4dc-26d375bc0938", "data": { "type": "input", "inputs": 1, "outputs": [ { "title": "Default" } ], "inputType": "email", "variables": [ { "name": "emailUsuario", "description": "Resposta do usuário" } ], "name": "Captura do E-mail", "message": "Por favor, informe seu e-mail.", "errorMessage": "E-mail inválido, tente novamente." }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "8713510d-f4ca-412f-bcc4-de324201fcc9", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "57715024-0bdc-4cac-9047-454e95170210", "output": "input_1" } ] } }, "pos_x": -240, "pos_y": 2518 }, "57715024-0bdc-4cac-9047-454e95170210": { "id": "57715024-0bdc-4cac-9047-454e95170210", "name": "node_840cf6f3-9e2f-4d9d-9be8-1bf9b8ad1a7d", "data": { "type": "input", "inputs": 1, "outputs": [ { "title": "Default" } ], "inputType": "alphanumeric", "variables": [ { "name": "codigoValidacao", "description": "Resposta do usuário" } ], "name": "Captura do Código de Validação", "message": "Por favor, insira o código de validação (alfanumérico).", "errorMessage": "Código inválido. O código deve ter entre 6 e 12 caracteres.", "min": "6", "max": "12" }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "526854d6-2e70-41c0-9eba-919298bda546", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "bfaa3fc3-9034-4630-a52b-d6fa78b45b60", "output": "input_1" } ] } }, "pos_x": -242, "pos_y": 2817 }, "bfaa3fc3-9034-4630-a52b-d6fa78b45b60": { "id": "bfaa3fc3-9034-4630-a52b-d6fa78b45b60", "name": "node_46cc23a5-25e5-4f9a-bcc5-96f6c3b30220", "data": { "type": "message", "inputs": 1, "outputs": [ { "title": "Default" } ], "name": "Mensagem Final", "message": "Os dados inseridos foram capturados com sucesso: \n - CPF: {{cpfUsuario}}\n - E-mail: {{emailUsuario}}\n - Código de validação: {{codigoValidacao}}" }, "class": "", "html": "node_default", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "57715024-0bdc-4cac-9047-454e95170210", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "0edf0a8c-7f14-4376-8559-24cd3d983dc9", "output": "input_1" } ] } }, "pos_x": -241, "pos_y": 3098 } }

Mobile Saúde - Mosia Omnichannel