Caso de negócio 2: usar scripts de cliente para preencher automaticamente os campos com base na entrada do usuário
Ao projetar formulários, às vezes queremos exibir diferentes conjuntos de campos para diferentes respostas de usuário. Esse preenchimento automático de campo pode ser tratado usando scripts de cliente.
Cenário de negócios
Helen cria um formulário de inscrição para seu produto usando Qntrl. O requisito de Helen é exibir campos relevantes para os usuários com base em sua ocupação: estudante, profissional ou empreendedor.
Os alunos têm direito a descontos, enquanto outros profissionais de trabalho têm a opção de comprar o produto individualmente ou para toda a organização. Helen está procurando automatizar esse processo de preenchimento automático de campos usando Qntrl.
Solução
Os campos podem ser preenchidos automaticamente no Qntrl usando scripts de cliente.
- Helen cria um formulário e adiciona um campo suspenso para registrar a ocupação do novo usuário.
- Com base na opção selecionada pelo usuário, os campos relevantes são preenchidos e exibidos usando scripts de cliente.
Configuração de exemplo
Etapa 1 – criar uma orquestração
Crie uma nova orquestração, Orquestração de inscrição de usuário e adicione todos os campos a serem exibidos quando os usuários escolherem ocupações diferentes.
- Adicione um campo suspenso, Profissão do usuário e adicione Aluno , Profissional e Eu administro minha própria empresa como opções no menu suspenso.
- Crie um campo de linha única para obter o Nome da sua escola ou faculdade e um campo de botão de opção para exibir Gostaria de aproveitar um desconto? . Esses campos podem ser exibidos quando o usuário seleciona Aluno como ocupação.
- Crie 2 campos de linha única para obter o Nome da sua empresa e Cargo na organização . Esses campos podem ser exibidos quando o usuário selecionar Profissional como ocupação.
- Crie um campo de linha única para obter o Nome da organização e Gostaria de comprar o Qntrl para sua organização? . Esses campos podem ser exibidos quando o usuário selecionar Eu administro minha própria empresa como ocupação.
Depois que o formulário for criado, prossiga para projetar o blueprint, definir permissões e publicar a orquestração.
Etapa 2: codificar scripts do cliente
O processo de Helen requer 2 scripts de cliente, um para ocultar todos os campos inicialmente até que o usuário faça uma seleção e o outro script para exibir campos relevantes quando o usuário fizer uma seleção.
Script 1: Ocultar campos inicialmente na inscrição do usuário
- Crie um novo script e insira um nome - Oculte campos na inscrição do usuário.
- Escolha User Signup Orchestration (Orquestração de inscriçãode usuário) no menu suspenso Form (Formulário).
- Escolha Add new card (Adicionar novo cartão) como Execution Location (Local de execução) para executar o script quando um novo cartão for adicionado.
- Escolha onLoad como Execution Trigger (Gatilho de execução) para permitir que o script oculte campos específicos quando o formulário for carregado.
- Copie e cole o script abaixo em seu editor de script e substitua os nomes dos parâmetros.
- Você pode usar o ícone ? no canto superior direito do editor de script para fazer referência aos nomes dos parâmetros.
- Quando o script estiver pronto, Publish (Publique) -o.
Script de amostra
async function onLoad(forpage) {
current.Layout.Fields.<select-Name-of-your-school-or-college-parameter-here>.hide();
current.Layout.Fields.<select-Would-you-like-to-avail-a-discount-parameter-here>.hide();
current.Layout.Fields.<select-Name-of-your-company-parameter-here>.hide();
current.Layout.Fields.<select-Your-designation-in-the-company-parameter-here>.hide();
current.Layout.Fields.<select-Name-of-your-organization-parameter-here>.hide();
current.Layout.Fields.<select-Would-you-like-to-purchase-Qntrl-for-your-org-parameter-here>.hide();
return;
}
Script 2: preenchimento automático de campos na inscrição do usuário
- Crie um novo script e insira um nome: Preenchimento automático de campos na inscrição do usuário.
- Escolha User Signup Orchestration (Orquestração de inscrição de usuário) no menu suspenso Form (Formulário).
- Escolha Add new card (Adicionar novo cartão) como Execution Location (Local de execução) para executar o script quando um novo cartão for adicionado.
- Escolha onChange como Execution Trigger (Gatilho de execução) para permitir que o script preencha automaticamente os campos quando a ocupação do usuário estiver preenchida. Ao selecionar essa opção, uma lista suspensa Fields (Campos) será exibida no painel direito, onde você poderá escolher os campos cuja atualização deve acionar o script.
- Copie e cole o script abaixo em seu editor de script e substitua os nomes dos parâmetros.
- Você pode usar o ícone ? no canto superior direito do editor de script para fazer referência aos nomes dos parâmetros.
- Quando o script estiver pronto, Publish (Publique) -o.
Script de amostra
async function onChange(forpage,oldVal,newVal,executeOnLoad){
if(executeOnLoad){
return;
}
var val = current.Job.getValue(current.Layout.Fields.<select-User-occupation-parameter-here>.id);
if ("Student" === val.value.display_name)
{
current.Layout.Fields.<select-Name-of-your-school-or-college-parameter-here>.show();
current.Layout.Fields.<select-Would-you-like-to-avail-a-discount-parameter-here>.show();
current.Layout.Fields.<select-Name-of-your-company-parameter-here>.hide();
current.Layout.Fields.<select-Your-designation-in-the-company-parameter-here>.hide();
current.Layout.Fields.<select-Name-of-your-organization-parameter-here>.hide();
current.Layout.Fields.<select-Would-you-like-to-purchase-Qntrl-for-your-org-parameter-here>.hide();
}
else if ("Working Professional" === val.value.display_name)
{
current.Layout.Fields.<select-Name-of-your-school-or-college-parameter-here>.hide();
current.Layout.Fields.<select-Would-you-like-to-avail-a-discount-parameter-here>.hide();
current.Layout.Fields.<select-Name-of-your-company-parameter-here>.show();
current.Layout.Fields.<select-Your-designation-in-the-company-parameter-here>.show();
current.Layout.Fields.<select-Name-of-your-organization-parameter-here>.hide();
current.Layout.Fields.<select-Would-you-like-to-purchase-Qntrl-for-your-org-parameter-here>.hide();
}
else if ("I run my own business" === val.value.display_name)
{
current.Layout.Fields.<select-Name-of-your-school-or-college-parameter-here>.hide();
current.Layout.Fields.<select-Would-you-like-to-avail-a-discount-parameter-here>.hide();
current.Layout.Fields.<select-Name-of-your-company-parameter-here>.hide();
current.Layout.Fields.<select-Your-designation-in-the-company-parameter-here>.hide();
current.Layout.Fields.<select-Name-of-your-organization-parameter-here>.show();
current.Layout.Fields.<select-Would-you-like-to-purchase-Qntrl-for-your-org-parameter-here>.show();
}
}
Etapa 3 - adicionar um cartão
Quando os scripts de formulário, blueprint e cliente estiverem prontos, podemos testar o script criando um novo cartão.
- Navegue até Cards (Cartões) e clique em Add Card (Adicionar cartão) .
- Selecione User Signup Orchestration (Orquestração de inscrição de usuário) no menu suspenso Form (Formulário).
- Selecione a User occupation (Ocupação do usuário) na lista suspensa.
-
Ao selecionar Student (Aluno), você verá as seguintes opções:
-
Ao selecionar Working Professional (Profissional), serão apresentadas as seguintes opções:
-
Ao selecionar I run my own business (Eu administro meu próprio negócio), serão exibidas as opções abaixo:
Related Articles
Caso de negócio 1: usar scripts de cliente para executar cálculos matemáticos e validações em dados
Ao projetar formulários para replicar documentos relacionados a finanças, como ordem de compra, fatura ou faturas de reembolso, nossos fluxos de trabalho podem exigir o cálculo do custo total ou a soma das despesas incorridas. Para automatizar esses ...Gerenciar scripts do cliente
Os scripts do cliente são usados para incorporar validações adicionais aos dados de negócios enquanto são registrados no Qntrl. Em scripts de cliente, você pode codificar usando JavaScript e executar o código no navegador do usuário final enquanto ...Caso de negócio 3: usar scripts de cliente para buscar dados de aplicativos ou sites de terceiros
Ao projetar formulários, às vezes podemos querer exibir dados de outros sites ou aplicativos, como taxas de estoque, status de voo, detalhes de frete, atualizações meteorológicas etc. Para buscar essas informações de sites ou aplicativos de terceiros ...Caso de negócio 4: definir condições para que os usuários excluam cartões usando scripts de servidor (antes de excluir)
As organizações fornecem permissões e privilégios a várias seções da equipe de acordo com suas funções e perfis. Para garantir que os dados no Qntrl só possam ser excluídos pelo pessoal certo, as organizações podem implementar critérios e condições ...Caso de negócio 1: preencher a lista de destinatários lidos de um cartão usando scripts de servidor (ao carregar)
Os gerentes consideram útil saber quais funcionários visualizaram um novo cartão ou comentário, como uma lista de recibos de leitura. Ela ajuda os gerentes a saber se um funcionário visualizou sua tarefa atribuída e avaliar como os funcionários ...