7/24 | Livestream: Training AI on your design system

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io
Contact salesGo to app

7/24 | Livestream: Training AI on your design system

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Use Data binding to create a minimal but functional implementation of password protection within your content entry.

Note: This tutorial requires the use of the Classic UI.

  • Set state with data binding to capture input field values.
  • When a button is clicked, compare the stored state value to your password. If successful, display your protected content and clear the form field.

This tutorial results in a password field that, when provided the correct password, displays a previously hidden block within the content entry. There is some minor error handling involved.

To complete this tutorial, you need:

  • A content entry such as a Page or Section.
  • Three blocks on the page: an Input block, a Button block, and any other block such as a Box or Text block.

Begin by tracking the Input block's current value in state.

  1. Select the Input block within your content entry.
  2. Go to the Data tab, followed by the Element events panel.
  3. Create a new event, with a Trigger event of Change.
  4. For that event, create a new Action and choose the Custom code option.
  5. Copy and paste the code block below into the available space.
state.passwordText = event.target.value;

Whenever the input value changes, the state.passwordText value updates to be the current value of the Input block.

Next, add an alert that displays when the button is clicked that displays the current value of the input field. This step is not strictly necessary, but it is helpful to understanding how data binding works in Builder.

To display an alert:

  1. Select the Button block within your content entry.
  2. Go to the Data tab, followed by the Element events panel.
  3. Create a new event, with a Trigger event of Click.
  4. For that event, create a new Action and choose the Custom code option.
  5. Copy and paste the code block below into the available space.
alert(state.passwordText);

You can then test out the functionality by opening a preview of your content entry by clicking on the eye icon and then View current draft. Type some text into your input field and then click the button to see the alert message displayed with your current input's text.

Now it is time to bring all of the content entry's elements together. To implement the basic functionality of protecting content:

  1. Select the block you've chosen to be protected content.
  2. Within the Element data bindings panel of the Data tab, choose the Show if dropdown option from the Get field.
  3. In the next input, where it says from, click the code icon and enter state.displaySecrets.
  4. Next, modify the Element event for the button to the code below.
if (state.passwordText === 'secret') {
  state.displaySecrets = true;
}

Test the functionality by opening a preview of your content entry by clicking on the eye icon and then View current draft. If you type the word secret into the input field and press the button, your hidden content should appear.

There are still a few improvements you can make:

  1. Select the Input block.
  2. Within the Element data bindings panel of the Data tab, connect the Input block's Value to the code state.passwordText.
  3. Go to the Style tab for the Input block.
  4. Within the Border panel, click the Color option and bind it to the code state.inputBorderColor || "#cccccc".
  5. Select the Button block.
  6. Update the Element events trigger code to the code block below.
if (state.passwordText === 'secret') {
  state.displaySecrets = true;
  state.inputBorderColor = '#cccccc';
} else {
  state.inputBorderColor = 'red';
}

state.passwordText = '';

By taking these steps, the following is true:

  • When the Button block is clicked, the password text is cleared.
  • If the password is incorrect, the border of the Input block is changed to red.
Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

  • Fusion

  • Publish

  • Product Updates

  • Figma to Code Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

© 2025 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Compliance

Cookie Preferences

Gartner Cool Vendor 2024