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.
Begin by tracking the Input block's current value in state.
- Select the Input block within your content entry.
- Go to the Data tab, followed by the Element events panel.
- Create a new event, with a Trigger event of Change.
- For that event, create a new Action and choose the Custom code option.
- 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:
- Select the Button block within your content entry.
- Go to the Data tab, followed by the Element events panel.
- Create a new event, with a Trigger event of Click.
- For that event, create a new Action and choose the Custom code option.
- 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:
- Select the block you've chosen to be protected content.
- Within the Element data bindings panel of the Data tab, choose the Show if dropdown option from the Get field.
- In the next input, where it says from, click the code icon and enter
state.displaySecrets. - 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:
- Select the Input block.
- Within the Element data bindings panel of the Data tab, connect the Input block's Value to the code
state.passwordText. - Go to the Style tab for the Input block.
- Within the Border panel, click the Color option and bind it to the code
state.inputBorderColor || "#cccccc". - Select the Button block.
- 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.
To learn more about Data binding, visit Bind data, State and actions, and Custom code.