In this article, we will guide you how to use HTML and CSS code to hide fields in Submission Form, Single Record Update, Details, List, Gallery or Calendar DataPages. This procedure is commonly used to hide read-only fields or virtual fields and then get their values with JS code.

Tip: You can also use Hidden form element to hide a single field or Rule to conditionally show and hide fields in the DataPages.

  1. Edit the DataPage.
  2. In the Configure Fields screen, insert one HTML block above the fields you want to hide, and another below these fields in the DataPage Elements panel.
  3. In these HTML blocks, disable the HTML editor in Advanced tab.
  4. Add the following code for Form DataPage with Responsive option enabled.

    HTML1:

    <div style="display:none;"><div>

    HTML2:

    </div></div>

    Add the following code for Form, Single Record Update and Details DataPages with Responsive option disabled.

    HTML1:

    <table style="display:none;"><tr><td>

    HTML2:

    </td></tr></table>

    Add the following code for List, Gallery and Calendar DataPages with Responsive option enabled or disabled.

    HTML1:

    </dd><div style="display:none;"><dd>
    

    HTML2:

    </dd></div><dd>
    

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.