If you have created a web page with multiple authenticated DataPages, you’ve probably noticed that by default each DataPage loads with its own log-in screen. After a user logs into one, a session is created and all of the DataPages display as normal. Although this is occasionally the desired behavior, you have the option of hiding extra log-in pages when the web page loads.

Steps to hide Login Screen

This article assumes that you already deployed your DataPages.

In this article, you hide multiple log-in screens by creating and configuring a new Authentication and inserting a JavaScript to your HTML.

  1. In the Caspio Bridge homepage, select and open an app. In the App Overview page, click Authentications on the sidebar menu and click New Authentication.
  2. Select a table or view as the authentication data source and select Custom. Select the authentication type: Caspio data source (recommended).

  1. Select your username and password fields and configure them if needed. The password data type field is automatically set to show as a password and case sensitivity is enforced.

  1. Insert a header and footer. Click the Insert button at the upper right of the Authentication Elements panel and select Header & Footer.

  1. Add a code to identify the log-in screens.
    • In the Header, disable HTML Editor on Advanced tab and add the following code:
      <div name="cb-auth-box">
    • In the Footer, disable HTML Editor on Advanced tab and add the following code:
      </div>
  2. Click Save.
  3. Insert a name to your new authentication, e.g. Cb_auth_box and click Save.
  4. You have created an authentication which will be your one visible login form. Now apply the authentication to all your DataPages which will be placed on one web page.
    • Edit each DataPage.
    • On the DataPage Data Source screen enable Restrict Access.
    • Choose Cb_auth_box and click Finish.

  1. Add a JavaScript to your HTML to hide the extra log-in screens. Go to the HTML of your web page.
    • Add the following lines of JavaScript before the Caspio Bridge deployment code sections.
      <script>
        var v_dpTotalCount = 3;
        var v_dpCounter = 0;
      </script>

      Where v_dpTotalCount is the number of DataPages deployed within the host page authenticated with the same authentication. You should count it and change this in your script. In case on specifying wrong number script will also work, but with redundant checks.

    • Add the following lines of JavaScript after the Caspio Bridge deployment code sections. This script will locate the log-in screens on your web page, and hide all except the first one.

      <script type="text/javascript">
      document.addEventListener('DataPageReady', function (v_e) 
        {try{document.getElementsByName('cb-auth-box')[v_dpCounter].style.display = "none";}catch(v_e){}
          v_dpCounter +=1;
      	  if( v_dpTotalCount <= v_dpCounter) 
           {if(document.getElementsByName("cb-auth-box")) 
              {var v_box = document.getElementsByName("cb-auth-box").length-1 ;
      	       for (i=0; i < v_box; i++) { document.getElementsByName("cb-auth-box")[i].style.display = "none" ; }
      		try{document.getElementsByName("cb-auth-box")[v_box].style.display = "" ;}catch(v_e){}
      	       }
      	    }
      	 });
      
      </script>

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.