Server Event Basics

Create a new Project called verjioBasics, if it doesn't already exist:

1. Click New .
2. Select Project.
3. Select the Create Project tab.
4. Choose Empty Project.
5. Name your project verjioBasics.
6. Click Finish.

Create a Form called serverEventsBasics in a serverEventsBasics Folder in this Project:

1. Right-click on the verjioBasics Project and select New > Folder.
2. Name the Folder serverEventsBasics.
3. Right click on the SserverEventsBasics Folder and select New > Form.
4. Name the Form serverEventsBasics.
5. Click OK.

Add two Fields to the Form. One Field to store user input and one to define the text we expect the user to enter before hiding the welcome message:

1. Add the userInput Field:
   1. In the Fields view, click New .
   2. Name the new Field user_input.
   3. Change its Label text to Please enter '&&required_text' to hide the welcome message in the Properties View
2. Add the requiredText Field:
   1. In the Fields view, click New .
   2. Name the new Field required_text.

Your Fields View should look like this:

Create a main section with a welcome and a reshow panel:

1. Select Page_1 from the  Pages View.
2. Add a  Main by dragging it from the Palette into the Outline View as a child of the  Page_1 Page Control.
3. Add a  Bootstrap Container as a child of the Main.
4. Add a  Heading as a child of the  Main Bootstrap Container and write Server Side Events in the Create New Control dialog.
5. Create the welcome Panel:
   1. Add a  Panel underneath the  Heading and change its Control name to welcomePanel in the  Properties View.
   2. Add a  Heading as a child of the welcomePanel and in the Create New Control dialog, change the Headling Level to H2 then write Hello! Welcome to Server Side Event Basics. 
   3. Drag the user_input Field from the  Fields View to the  Outline View as a child of the welcomePanel, underneath Heading H2.
   4. Add a  Button underneath user_input and write Hide Welcome Message in the Create New Control dialog.
   5. Click on the Hide Welcome Message  Button and change its Control name to hideButton in the  Properties View.
6. Create the reshow Panel:
   1. Add a  Panel underneath welcomePanel and change its Control name to reshowPanel in the  Properties View.
   2. Add a  Button as a child of the reshowPanel and write  Show Welcome Message in the Create New Control dialog.

Your Outline View should look like this:

Create some shared functions:

1. Open the Form Properties dialog by clicking  in the Form Editor's toolbar.
2. Click on the Events tab and click the Shared Functions button.
3. Click Create New Script and name it utility.
4. In the new script paste the following code:
   

   /**
    * Has the user entered the required text to hide the welcome message?
    * @return {true} if the user has entered the required text.
    */
   function hasUserTypedInCorrectHideText() {
   	return fields.user_input.value && fields.user_input.value == fields.required_text.value;
   }
   
   /**
    * Shows or hides the Welcome Panel.
    * If hidden the reshow panal is shown.
    */
   function showOrHideWelcomePanel(show) {
   	if(show) {
   		controls.welcomePanel.show();
   		controls.reshowPanel.hide();
   	}
   	else {
   		controls.welcomePanel.hide();
   		controls.reshowPanel.show();
   	}
   }

5. Save the script.

Initialise the serverEventsBasics Form:

1. Click on the serverEventsBasics tab to move to its Form Editor.
2. Open the Form Properties dialog by clicking  in the Form Editor's toolbar.
3. Click on the Events tab and click the Before Form tab.
4. Click Create New Script  in the Before Form toolbar and name it initialiseForm.
5. In the new script paste the following code:
   

   // Set the text the user must enter to hide the welcome message
   fields.required_text.value = "hide me";
   
   // Disable the hide button - they must type the required text in before they can hide the welcome message.
   controls.hideButton.setDisabled(true);
   
   // Show the welcome panel.
   showOrHideWelcomePanel(true);
   

6. Save the script.

Hide the welcome Panel when the Hide Welcome Message Button is clicked:

1. Click on the serverEventsBasics tab to move to its Form Editor.
2. Click on the Hide Welcome Message Button Control to select it.
3. In the  Properties View click on the On Click property button.
4. In the resulting Configure dialog, click Create New Script and name it hideWelcomePanel.
5. In the new script paste the following code:
   

   // Check the user has inputed the correct text before hiding the welcome panel.
   if(hasUserTypedInCorrectHideText()) {
   	// Hide the welcome panel.
    	showOrHideWelcomePanel(false);
   }

6. Save the script.

Show the welcome Panel when the Show Welcome Message Button is clicked:

1. Click on the serverEventsBasics tab to move to its Form Editor.
2. Click on the Show Welcome Message Button Control to select it.
3. In the  Properties View click on the On Click property button.
4. In the resulting Configure dialog, click Create New Script and name it showWelcomePanel.
5. In the new script paste the following code:
   

   // Reset the text, if any, that the user may have previously entered.
   fields.user_input.value = "";
   
   // Disable the hide button - they must type the required text in before they can hide the welcome message.
   controls.hideButton.setDisabled(true);
   
   // show the welcome panel.
   showOrHideWelcomePanel(true);

6. Save the script.

Validate the text users enter to hide the welcome message:

1. Click on the serverEventsBasics tab to move to its Form Editor.
2. Click on the user_input Field Control to select it.
3. In its  Properties View tick the Immediate validation Field Control property anf then click on the Validation Event property button.
4. In the resulting Configure dialog, click Create New Script and name it validateUserInput.
5. In the new script paste the following code:
   

   // Check whether the user has typed in the required text correctly.
   if(hasUserTypedInCorrectHideText()) {
   	// Enable the hide button - they must type the required text in before they can hide the welcome message.
   	controls.hideButton.setDisabled(false);
   }
   else {
   	// If not then add an error message to the Control. 
   	event.owner.addErrorMessage("Please enter <i>" + fields.required_text.value + "</i> to hide the welcome message.", false);}

6. Save the script.

Test the Form in your browser:

1. Press the Save All  button in the main toolbar. 
2. Click the Test  button in the main toolbar and press Submit in the resulting dialog.
3. Enter hide me into the input box to enable the Hide Welcome Message button. Entering anything other than hide me will result in an error message appearing below the input.