Os estados desempenham um papel crucial na criação de interfaces dinâmicas e responsivas em 4D Qodly Pro. Permitem controlar a exibição e o comportamento de widgets baseados em condições específicas, como o papel de um usuário, privilégios, ou dados de seu banco de dados.
Esse blog explora esse conceito, apresenta os diferentes tipos de estados, e ilustra seu uso através de exemplos da aplicação Performance Review para ajudá-lo a entender como aproveitá-los efetivamente.
Aplicação de análise de desempenho
O que é um estado no Qodly Studio?
Um estado representa uma configuração específica de uma página num determinado momento, definindo o seu aspeto e as suas funcionalidades.
Por exemplo, um estado pode ser utilizado para:
- Mostrar ou ocultar elementos com base em condições definidas.
- Aplicar estilos específicos.
- Ajustar dinamicamente a interface do utilizador de acordo com funções, permissões ou dados.
Para obter uma visão geral completa, consulte a documentação oficial sobre estados.
Tipos de estado no Qodly Studio
O Qodly Studio oferece dois tipos de estados:
estado não condicional
Um estado não condicional é aplicado de forma estática, sem depender de uma condição dinâmica. Permite-lhe ativar ou desativar um widget de uma forma predefinida.
Exemplo: Mostrar um formulário apenas quando o utilizador clica num botão, sem verificar condições adicionais.
Estado condicional
Um estado condicional baseia-se na lógica definida pelo utilizador. Modifica a apresentação ou o estilo dos widgets com base em critérios como as funções do utilizador ou os valores da base de dados.
Exemplo: Ocultar o botão “Submeter” se a tarefa já estiver concluída ou ativar/desativar um campo com base na função do utilizador.
Exemplos de estados
Para ilustrar melhor a utilização dos estados, eis dois exemplos concretos da aplicação Avaliação do desempenho.
Exemplo 1: Restringir a edição com base no estado
Na aplicação Avaliação de desempenho, o estado de uma avaliação determina se um utilizador pode ver ou editar os dados.
- Colaborador: Os dados são apenas de leitura se o estado for Concluído ou Fechar.
- Gestor: Os dados são somente leitura se o status for Fechar.
- RH: Acesso total aos dados, independentemente do estado.
Criar o estado “readOnly
Para restringir a edição de dados com base no estado de uma revisão, criamos um estado específico chamado“readOnly“.
Agora, selecione o estado “readOnly” que acabou de criar. Para garantir que o estado está ativo e que é o que pretende modificar, verifique se o seu nome aparece no canto inferior direito da área de edição da página.
Configurar a exibição do widget
Para cada widget de entrada, modifique o atributo “disabled” para true para desativar a edição do campo
Em seguida, renomeie os botões Editar para Exibir.
Em seguida, oculte os botões Criar e Guardar, definindo a propriedade de visualização para nenhum.
Além disso, aplique as mesmas modificações às caixas de diálogo modais abertas pelo botão Ver:
- Desativar os campos de entrada.
- Ocultar os botões de ação Guardar e Largar.
- Renomear Cancelar para Fechar.
Se um botão estiver inadvertidamente oculto, utilize o painel Esboço no Qodly Studio para localizar e corrigir a configuração.
Implementar a lógica de exibição
O próximo passo é implementar a lógica que ativa ou desativa o estado “readOnly” com base no estado da revisão e na função do utilizador.
A função do utilizador é armazenada nos dados da sessão. Por exemplo, um Gestor tem uma função dupla: atua como Gestor quando gere as revisões da sua equipa, mas como Colaborador quando gere as suas próprias revisões. Na barra de menus da aplicação, selecionar Colaborador atualiza o atributo de função no armazenamento para “colaborador“, enquanto selecionar Gestor atualiza-o para “gestor“.
Adicionamos um atributo computado à entidade Revisão:
exposed Function get isReadOnly() : Boolean
var $status : Boolean:=False
If (ds.getUserInfo()#Null)
If ((ds.getUserInfo().role="Collaborator") && (This.ID_Status>2))
$status:=True
End if
If ((ds.getUserInfo().role="Manager") && (This.ID_Status>3))
$status:=True
End if
End if
return $status
Esta função devolve verdadeiro se o utilizador só puder ver os dados e falso se tiver permissão para os modificar.
Nota: A função getUserInfo() fornece acesso ao armazenamento da sessão.
Ligar a condição ao estado “readOnly
Por fim, clique no botão Condições do estado “readOnly” para definir as regras de exibição.
Adicione uma condição.
Basta introduzir a fórmula: “selectedReview.isReadOnly is True”.
Com esta configuração, a página alterna dinamicamente entre o modo só de leitura e o modo de edição sem necessitar de intervenção manual ou código complexo.
Exemplo 2: Visibilidade do botão de controlo com base no estado dos dados
Na aplicação Análise de desempenho, é apresentada uma barra lateral quando é selecionada uma análise. Os botões apresentados nesta barra lateral dependem de vários fatores:
- Se o status é somente leitura ou leitura-escrita.
- Se um documento PDF está disponível.
- Se a função do utilizador é Gestor, Colaborador ou RH.
- Se o PDF é mostrado.
Para tratar estes diferentes casos de forma eficiente, criamos estados para todas as combinações possíveis.
Para informação, a função é atribuída quando o utilizador inicia sessão e seleciona a página de RH, Gestor ou Colaborador. Esta informação é guardada no armazenamento da sessão. Esse conceito será aprofundado em um próximo post do blog que discutirá a navegação entre as várias páginas do aplicativo.
Criando estados para cada cenário
Para garantir uma experiência de usuário tranquila, definimos estados específicos que controlam a visibilidade do botão com base nas condições acima. Cada estado ajusta dinamicamente a interface para exibir apenas as ações relevantes.
Exemplos:
readOnly
readOnlyPDF
readWriteManager
readWritePDFManager
Guardar condições reutilizáveis
Para simplificar a gestão do estado e evitar lógica redundante, definimos condições nomeadas reutilizáveis:
- Colaborador: userInfo.role é “Colaborador”
- Gestor: userInfo.role é “Gestor”
- RH: userInfo.role é “RH”
- selected: selectedReview é não Null e selectedReview.pdfDocument é Null
- selectedWithPDF: selectedReview.pdfDocument não é nulo
- viewPDF: viewPdf é Verdadeiro
- isReadOnly: selectedReview.isReadOnly é True
- isReadWrite: selectedReview.isReadOnly é False
Para guardar as condições, clique no botão “…” e selecione “Guardar condição” no menu.
Aplicar condições aos estados
Com estas condições predefinidas, a configuração dos estados torna-se muito mais fácil. Em vez de definir manualmente condições complexas para cada estado, basta fazer referência às condições guardadas. Isto garante clareza, consistência e facilidade de manutenção.
Por exemplo, para definir a visibilidade do estado “readWritePDFManager“, definimos a condição: selectedWithPDF, isReadWrite e Manager
Cabe a você descobrir como os outros estados são configurados, e se tiver alguma pergunta, junte-se a nós no fórum 4D.
Essa abordagem garante que a interface se adapta dinamicamente a diferentes papéis de usuário e estados de revisão, fornecendo uma experiência de usuário intuitiva e eficiente.
Conclusão
Aproveitar os estados em 4D Qodly Pro é uma abordagem poderosa para personalizar a experiência do usuário e otimizar interfaces. Ao usá-los efetivamente, pode:
- Adaptar a visibilidade de elementos com base em papéis e permissões.
- Melhorar a interatividade e a relevância das ações disponíveis.
- Conceber aplicações robustas adaptadas às necessidades reais dos utilizadores.
Para saber mais, consulte a nossa documentação completa sobre estados.
Como é que utiliza os estados nas suas aplicações Qodly? Compartilhe suas idéias ou perguntas no fórum 4D!