Hide/Show "Remember Me" Field on Login Screen with HTML Template

Hide/Show "Remember Me" Field on Login Screen with HTML Template

In this article, we will learn how to enable the "Hide/Show" feature that is available within the "Security -> Settings" option, for the "Remember Login" field that is found on the login screen that was generated with the HTML template.

Currently, this feature is automatically enabled when the security module is generated without using a custom HTML template for the Login screen. However, so that we can enable it in our login screen that has an HTML template, we must add two JavaScript functions inside our template's index file.

Below, let's see the procedures performed in each topic:

Enabling the field inside the HTML template index file

If the field is not enabled in your template, we need to follow the step by step below:

1 - Within the Login application in your ScriptCase, more precisely in "User's HTML", we click on the Check button to verify the fields that are not included in the HTML template file located in the external libraries. The expected result should be as shown in the images below:



2 - By clicking on "SC_FIELD_INFO_remember_me", a modal window will open that will show us an example of where the field should be added within the HTML template:


3 - Go to the "Tools -> External Libraries" option, then "Edit" in the library that we are using for the login HTML template, and look for the ".html" file:



4 - We add the field inside the "form" tag in the HTML code, and save the file:
For this case, we must add, in addition to the field, a "span" tag to insert the field inside it, because the "Remember me" field involves both the text itself, as well as the checkbox we selected. Therefore, we will need to insert the field inside this HTML tag.


5 - We go back to the Login application, and click again on the Check button (according to the first step), and we get the "OK" check for the {remember_me} field:


Enabling "scHideUserField()" and "scShowUserField()" functions to enable "Hide/Show"

For this option to work in the Security Module settings, we will need to add these two functions within the HTML code of our template.

The script for both is available below so we can just copy, paste and save:

  1. <script type="text/javascript>">
  2. // Function to enable and disable the remember me field
  3. function scHideUserField(fieldName)
  4.    {
  5.        if(fieldName == 'remember_me')
  6.       {
  7.         $('#id_sc_field_remember_me_1').hide();
  8.         $('#txtremember').hide();
  9.       }
  10. }
  11. function scShowUserField(fieldName)
  12. {
  13.      if(fieldName == 'remember_me')
  14.     {
  15.         $('#id_sc_field_remember_me_1').show();
  16.         $('#txtremember').show();
  17.    }
  18. }
  19. </script>
It is important to point out that this script must be added inside the "head" tag of the template's HTML file.
Another important point that we must pay attention to is related to the "id" of the field that is passed as a parameter within the conditionals in the functions, and in addition, the "id" of the text that represents the label "Remember me", because for this in case we will have the checkbox and the text separately, as it is possible to identify inside the conditional of the field "remember_me" in the script above.

These "ids" must conform to what is referenced in the template's HTML code, and so that we can capture this information, we can inspect the element with the Login application running, and identify which "ids" represent the field "remember_me" to replace what is found in the above script.

As you can see in the image below, on the right is the HTML code of the template, but highlighted is the "Remember me".

The information that interests us is inside the "div" tag that is above the highlighted code, which is precisely the id "txtremember" and the id "id-remember_me-1". Just replace both script "ids" with the "ids" that appear in your HTML template:


In the example script above, these ids are already included in the conditional, because it is the example template from ScriptCase's samples library.
Once that is done, just save and run the application again, and access the account to enter the "Security -> Settings" option, and enable or disable the field "to be shown or not on the Login screen.




    • Related Articles

    • Hide/Show "Retrieve Password" field on login screen with HTML template

      In this article, we will learn how to enable the "Hide/Show" feature that is available within the "Security -> Settings" option, for the "Retrieve Password" field that is found on the login screen that was generated with HTML template. Currently, ...

    • Hide/Show "New User" field on login screen with HTML template

      In this article, we will learn how to enable the "Hide/Show" feature that is available within the "Security -> Settings" option, for the "New User" field found in the login screen that was generated with HTML template. Currently, this feature is ...

    • Using the sc_field_display macro

      To dynamically hide a field in this example, the macro sc_field_display is used, which is responsible for hiding or dynamically displaying a field or several. This macro has scope in the following events: In this example, it will be used within an ...

    • Hide certain fields in a Grid by means of various conditions

      When you need to hide fields through various conditions within the Grid, we can do it through a query. The first thing we are going to do is a query and we will store it inside a variable. Then we use the macro sc_lookup. After using said macro, we ...

    • Creating a Field grouping

      See how to create groups of fields in a simple way in the query application. 1. In a grid application, access the Fields menu and click New field. 2. Set the quantity and click Continue. In this case we only need one field. 3. On the field inclusion ...