Neste artigo, iremos aprender como habilitar o recurso de "Esconder/Mostrar" que está disponível dentro da opção "Segurança -> Configurações", para o campo "Novo Usuário" que encontra-se na tela de login que foi gerada com template HTML.

Atualmente esse recurso é habilitado de forma automática quando o módulo de segurança é gerado sem a utilização de um template HTML customizado para a tela de Login. No entanto, para que possamos habilitar na nossa tela de login que possui um template HTML, devemos adicionar duas funções *JavaScript* dentro do arquivo index de nosso template.

Vejamos abaixo os procedimentos realizados em cada tópico:

**Habilitando o campo dentro do arquivo index do template HTML**

Caso o campo não esteja habilitado no seu template, precisamos seguir o passo a passo abaixo:

1 - Dentro da aplicação de Login no seu ScriptCase, mais precisamente em "HTML do usuário", clicamos no botão *Checar* para que seja feita uma verificação dos campos que não constam dentro do arquivo do template HTML que fica nas bibliotecas externas. O resultado esperado deve ser o que consta nas imagens abaixo:

![](https://help.scriptcase.net/galleryDocuments/edbsn0bfa6015f77c226a7276e060387ee6b4b2329efe0052a0ebf52bf1cb1f3a89110942cff20e0dcbee4a49f1b3f11c98aa?inline=true)![](https://help.scriptcase.net/galleryDocuments/edbsn0edc01db1edab1ea9eed8691b0e07155fc110c3782f0d325ea4a209d4d592fb149271679930159e9f8e6332e6dfecb5c?inline=true)![](https://help.scriptcase.net/galleryDocuments/edbsnededf61cd74fdf55eb98566067c2ad15c0d6fc5e4933dcf6cc14cf06b402aec33745866da52d7a02b28d259ea5d568a8?inline=true)

2 - Ao clicar em "SC\_FIELD\_INFO\_new\_user", abrirá uma janela modal que nos mostrará um exemplo de onde o campo deve ser adicionado dentro do template HTML:

![](https://help.scriptcase.net/galleryDocuments/edbsnb7a492aef2f8bbc46790512183e78b1cf4178cbc6b4dff643aaf0cee1ea1af92f37f162c254a48d63733d38a659587be?inline=true)

3 - Vamos até a opção "Ferramentas -> Bibliotecas Externas", logo em seguida "Editar" na biblioteca que estamos utilizando para o template HTML do login, e buscamos o arquivo ".html":

![](https://help.scriptcase.net/galleryDocuments/edbsn0bfa6015f77c226a7276e060387ee6b4e1513115d14fbe1459bc6b6f37b7d11685fd1d6fe41daab9638baa84977744cb?inline=true)![](https://help.scriptcase.net/galleryDocuments/edbsn1c8811804b88c49a4e1101671a665b8bb4a8a84248115e6b62df5609bd9ffdce0299475e3ff3d764807763e27fcfd823?inline=true)

![](https://help.scriptcase.net/galleryDocuments/edbsnededf61cd74fdf55eb98566067c2ad1526d11971acb9851411b222b3d448db6de93bace21d2fa2f98fc423edb9c32820?inline=true)

4 - Adicionamos o campo dentro da tag "form" no código HTML, e salvamos o arquivo:

![](https://help.scriptcase.net/galleryDocuments/edbsn1c8811804b88c49a4e1101671a665b8be71b36548838c15d859bc5a4f7ff8f4667f3c765232923e7f37722a54b3ae90e?inline=true)![](https://help.scriptcase.net/galleryDocuments/edbsn0edc01db1edab1ea9eed8691b0e071558bedad276e386b9538fc136dd440766069b807bfc23d82bd71411971b336c240?inline=true)

5 - Voltamos a aplicação de Login, e clicamos novamente no botão ***Checar***(conforme o primeiro passo), e obtemos o check "OK" para o campo {new\_user}:

![](https://help.scriptcase.net/galleryDocuments/edbsn8c157cf6d53aeed46a8e5f0b09f5952cc8f4cf2b89a42288ee4d19f53178163b0e95d81bd9b18805db26de48b3627675?inline=true)

**Habilitando as funções****"*scHideUserField()*"****e****"*scShowUserField()*"****para habilitar o "Esconder/Mostrar"**

Para que essa opção funcione nas configurações do Módulo de Segurança, precisaremos adicionar essas duas funções dentro do código HTML do nosso template.

O script de ambas está disponível abaixo para que possamos apenas copiar, colar e salvar:

1. </li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">// Função para habilitar e desabilitar o campo novo usuario</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">function scHideUserField(fieldName)</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">{</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">  if(fieldName == 'new\_user')</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">  {</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">    $('#id-new\_user-1').hide();</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">  }</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">}</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">function scShowUserField(fieldName)</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">{</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">     if(fieldName == 'new\_user')</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">    {</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">    $('#id-new\_user-1').show();</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">    }</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">}</li>
   <li style="background-color: rgb(245, 245, 245); border-left: 2px solid rgb(204, 204, 204); margin: 1px; padding: 2px">

![](https://img.zohostatic.com/zde/static/images/exclamation.png)

**É importante salientar que este script deve ser adicionado dentro da tag "head" do arquivo HTML do template.**

Outro ponto antes de finalizar é relacionado ao "id" do campo que é passado como parâmetro dentro das condicionais nas funções.

Esse "id" deve estar de acordo com o que é referenciado no código HTML do template, e para que possamos capturar essa informação, nós podemos inspecionar o elemento com a aplicação de Login em execução, e identificar qual o "id" representa o campo "new\_user" para substituir o que encontra-se no script acima.

Como é possível verificar na imagem abaixo, à direita está o código HTML do template, mas em destaque está o "Novo Usuário".

A informação que nos interessa está dentro tag "div" que está acima do código em destaque, que é justamente o **"id-new\_user-1".**Basta substituir o "id" do script pelo "id" que consta no seu template HTML.

![](https://help.scriptcase.net/galleryDocuments/edbsn11ef5390f5ac4c28fef69462921b9ea4d52cf237b995d02c234f4323e02a081b056d1c5aaaa4f8e164ad74db3b37e6a7?inline=true)

![](https://img.zohostatic.com/zde/static/images/file.png)

***No script de exemplo acima, esse id já consta dentro da condicional, porque trata-se do template de exemplo da biblioteca samples do ScriptCase.***

Feito isso, basta salvar e executar a aplicação novamente, e acessar a conta para entrar na opção "Segurança -> Configurações", e habilitar ou desabilitar o campo novo usuário para ser mostrado ou não na tela de Login.

![](https://help.scriptcase.net/galleryDocuments/edbsn323f7d1b449698f0cbcff08db07254b58e0402b5261b0b84d5a4be0b6a02ebdc8dc0b8fd0900cb699a1755ee81ff1242?inline=true)![](https://help.scriptcase.net/galleryDocuments/edbsne500c4b0787b9b6b3c98cb5e5a1dd37e0de099b19ba56a5e7ef644e9f025199725a17aaf234e14424a448f005070c925?inline=true)