# WebPage Sample Scripts

The following illustrate some code snippets that can be used with WebPages:

## $HMI Functions

- Switching to another WebPage

  $HMI.ShowPage("PageName");

- Getting the width of a WebPage ("MyPage") and saving it into a tag ($page.width)

      $page.width = $HMI.GetPageWidth("MyPage");

- Log in to a controller with a user named 'admin' and a password of 'asd'

      $HMI.Login("admin", "asd");

  Note: This function does not return whether the login and/or logout has been successful. To evaluate the result, use a Data Change Scripts (WebHMI) script referencing the CurrentUser tag.

- Getting the Red value of an element's ("1stButton") background color and saving the value to a tag ($element.color)

      $element.tag = $HMI.GetControlProperty("1stButton", "BackgroundColor").R;

- Setting the properties of an element

      $HMI.SetControlProperty("Slider1", "Max", 300);

      $HMI.SetControlProperty("Button2", "BackgroundColor", new CjsColor(255, 128, 128, 128));

- Using the CjsDateTime class

      $WebPages.WebPage.DateTimePicker.Value = new CjsDateTime(new Date(2016, 10, 03, 12, 0, 0));

      $WebPages.WebPage.DateTimePicker.Value = new CjsDateTime("1993-01-02T10:10:00Z");

- Using the TableData class

      $WebPages.WebPage.DataTable.Content = new TableData(["FirstHeader", "SecondHeader"], [["Row1", "Text"], ["Row2", ""], ["Row3", "234457"]]);

- Raising a Question dialog and using the resulting answer

      $HMI.ShowQuestion("message", "title").then(function(result) {
          if (result) alert("Yes has been clicked");
          else alert("No has been clicked");
      }, function(result) {
          alert("Dialog was closed without Yes or No");
      });

- Showing a message and logging out a user if they click "Yes"

      $HMI.ShowMessage("Clicking Ok will log you out","Logout").then(function() {
          $HMI.Logout();
      }, function() {
          console.log("User closed the dialog, do nothing");
      });

- Displaying a simple message, without using the returned value

      $HMI.ShowMessage("Hello", "Title");

  Note: See WebPages JavaScript Promises for more information about JavaScript Promises and the .then() syntax.

## $System Functions

- Log the uptime into the Web browser's console log

      $System.GetUptimeMilliseconds().then(function(ms) {
          console.log("System is up for " + ms + " milliseconds")
      });

- Log an error message: If a tag ($mytag) is False, and a Slider's value is above 80, this is an error scenario which necessitates setting some values to 0 and issuing a log message

                          // log message and setting values to zero
      if($myTag == false && $WebPages.WebPage.Slider.Value > 80) {
          $System.Log.Write("Error; setting all values to 0");
          $WebPages.WebPage.Slider.Value = 0;
          $WebPages.WebPage.NumericEntry.Value = 0;
      }

- Query the current system log filter level, and set it to 1 if it less than 1

      $System.Log.GetFilter().then(function(res) {
          $myTag = res;
          if (res < 1) {
              $System.Log.Write("Setting filter level to 1.", 1);
              $System.Log.SetFilter(1);
          }
      });