Skip to main content

Client Script Use-Case Scenario Questions

This document outlines various scenarios where Client Scripts can be used to enhance form functionality and user experience.

General Concepts

Before diving into the specifics, it's important to understand the general role of Client Scripts:

  • Client-Side Execution: Client Scripts run in the user's web browser (or the client application), not on the server. This means they can provide immediate feedback and interactivity without requiring a round-trip to the server.
  • Event-Driven: Client Scripts are typically triggered by user actions (events) such as:
    • onChange: A field's value changes.
    • onSubmit: The form is submitted.
    • onLoad: The form loads.
    • onSave: The form is about to be saved (can be used to prevent saving).
  • Form Manipulation: Client Scripts can interact with form elements (fields, sections, etc.) to:
    • Show/hide elements.
    • Set field values.
    • Validate input.
    • Display messages.
    • Make AJAX calls (asynchronous requests to the server).
  • API is crucial: the specific implementation details will depend on what API is being used. This will be the biggest impact.

Use-Case Scenarios and Explanations

Here are answers and examples for each question, focusing on the "how" and "why":

  1. Validate user input in a form field:

    • How: Use an onChange script. Get the field's value, apply validation logic (e.g., regular expressions, range checks, custom functions), and display an error message if invalid.

    • Example (Conceptual JavaScript):

      function validatePhoneNumber(executionContext) {
    let formContext = executionContext.getFormContext(); // Important: Get the form context
    let phoneField = formContext.getAttribute("phone");
    let phoneNumber = phoneField.getValue();

    if (phoneNumber && !/^\d{3}-\d{3}-\d{4}$/.test(phoneNumber)) {
        formContext.ui.setFormNotification("Invalid phone number format. Use XXX-XXX-XXXX.", "ERROR", "phoneError");
        phoneField.controls.forEach(control => control.setNotification("Invalid format.")); // Field-level notification
    } else {
         formContext.ui.clearFormNotification("phoneError");
        phoneField.controls.forEach(control => control.clearNotification());

    }
}

  2. Dynamically hide/show form fields based on user selections:

    • How: Use an onChange script on the controlling field. Get the selected value and use the form's API to show or hide the target fields.

    • Example: If a "Contact Method" choice field is set to "Email," show the "Email Address" field; otherwise, hide it.

      function contactMethodOnChange(executionContext) {
  let formContext = executionContext.getFormContext();
  let contactMethod = formContext.getAttribute("contactmethod").getValue();
  let emailField = formContext.getControl("emailaddress");

  if (contactMethod === "email") { // Assuming 'email' is the value for the email option
    emailField.setVisible(true);
  } else {
    emailField.setVisible(false);
  }
}

  3. Auto-populate a field based on another field's value:

    • How: Use an onChange script on the source field. Get the source field's value and set the target field's value.

    • Example: Auto-populate a "Full Name" field by concatenating "First Name" and "Last Name."

      function firstNameOnChange(executionContext) {
    let formContext = executionContext.getFormContext();
    let firstName = formContext.getAttribute("firstname").getValue();
    let lastName = formContext.getAttribute("lastname").getValue();
    let fullNameField = formContext.getAttribute("fullname");

    if (firstName || lastName) {
      fullNameField.setValue((firstName || "") + " " + (lastName || ""));
    }
}

//You would likely also add this to the Last Name onChange event.

  4. Prevent form submission until certain conditions are met:

    • How: Use an onSubmit script. Check the conditions. If conditions are not met, use the form's API to prevent submission (often preventDefault()) and display a message.
    • Example: Prevent submission if a required field is empty.
    ```javascript
function formOnSubmit(executionContext) {
    let formContext = executionContext.getFormContext();
    let requiredField = formContext.getAttribute("requiredfield").getValue();

    if (!requiredField) {
        formContext.ui.setFormNotification("Required field cannot be empty.", "ERROR", "submitError");
        executionContext.getEventArgs().preventDefault(); // Prevent submission
    } else {
        formContext.ui.clearFormNotification("submitError");
    }
}
```

  5. Client-side validation for a date field to ensure it's in the future:

    • How: Use an onChange script. Get the date value, compare it to the current date, and display an error if it's in the past.

      function validateFutureDate(executionContext) {
   let formContext = executionContext.getFormContext();
   let dateField = formContext.getAttribute("futuredate");
   let selectedDate = dateField.getValue();

   if (selectedDate && selectedDate < new Date()) {
       formContext.ui.setFormNotification("Date must be in the future.", "ERROR", "dateError");
       dateField.controls.forEach(control => control.setNotification("Date must be in the future"));
   } else {
      formContext.ui.clearFormNotification("dateError");
       dateField.controls.forEach(control => control.clearNotification());
   }
}

  6. Display a confirmation dialog before submitting a form:

    • How: Use an onSubmit script. Use the platform's dialog API (e.g., Xrm.Navigation.openConfirmDialog in Dynamics 365 or confirm() in standard JavaScript). If the user confirms, allow submission; otherwise, prevent it.
    • Example (Conceptual): 
    ```javascript
function confirmSubmission(executionContext) {
    let formContext = executionContext.getFormContext();
    let confirmed = confirm("Are you sure you want to submit?"); // Standard JavaScript confirm

    if (!confirmed) {
        executionContext.getEventArgs().preventDefault(); // Prevent submission
    }
}
```

  7. Restrict certain users from editing specific fields:

    • How: Use an onLoad script. Check the user's role or other identifying information. Use the form's API to disable or make read-only the relevant fields.
    • Example (Conceptual): 
    ```javascript
function formOnLoad(executionContext) {
  let formContext = executionContext.getFormContext();
  //  Check User roles (this is platform dependent)
  let userRoles = Xrm.Utility.getGlobalContext().userSettings.roles; //example using Dynamics 365

    if (!userRoles.some(role => role.name === "Manager")) { //if user does NOT have Manager role
      formContext.getControl("sensitivefield").setDisabled(true);
  }
}
```

  8. Enforce character limits in a text area field:

    • How: Use an onChange script. Get the field's value, check its length, and if it exceeds the limit, truncate the value or display a warning. You might also use the maxlength HTML attribute, but client-side scripting provides more control over the user experience.

    • Example:

        function enforceCharacterLimit(executionContext) {
      let formContext = executionContext.getFormContext();
      let textField = formContext.getAttribute("mytextarea");
      let text = textField.getValue();
      const maxLength = 100;

      if (text && text.length > maxLength) {
          textField.setValue(text.substring(0, maxLength)); // Truncate
          formContext.ui.setFormNotification("Text limited to " + maxLength + " characters.", "WARNING", "charLimit");
      } else {
            formContext.ui.clearFormNotification("charLimit");
      }
  }

  9. Dynamically set the value of a choice field based on a user's role:

    • How: Use an onLoad Script, and use the setValue method to set a value to the choice field.

    • Example:

      function setPriorityBasedOnRole(executionContext) {
    let formContext = executionContext.getFormContext();
    let userRoles = Xrm.Utility.getGlobalContext().userSettings.roles; //example using Dynamics 365
    let priorityField = formContext.getAttribute("priority");

    if (userRoles.some(role => role.name === "HighPriorityUser")) {
        priorityField.setValue(2); // Assuming 2 is the value for 'High' priority
    } else {
        priorityField.setValue(1); // Default to 'Normal' priority (assuming 1 is the value)
    }
}

  10. Automatically calculate the total cost based on item quantity and price:

    • How: Use onChange scripts on both the quantity and price fields. Get both values, perform the calculation, and set the value of the total cost field. Handle potential errors (e.g., non-numeric input).

    • Example:

      function calculateTotalCost(executionContext) {
  let formContext = executionContext.getFormContext();
  let quantity = formContext.getAttribute("quantity").getValue();
  let price = formContext.getAttribute("price").getValue();
  let totalCostField = formContext.getAttribute("totalcost");

  if (quantity && price && !isNaN(quantity) && !isNaN(price)) {
    totalCostField.setValue(quantity * price);
  } else {
    totalCostField.setValue(null); // Clear the total if input is invalid
  }
}

  11. Display a custom error message when certain conditions are met:

    • How: Use an onChange or onSubmit script (depending on when the check should occur). Check the conditions and use the form's API to display a notification.

    • Example: Display an error if a discount percentage exceeds a limit.

      function validateDiscount(executionContext) {
    let formContext = executionContext.getFormContext();
    let discount = formContext.getAttribute("discount").getValue();
    const maxDiscount = 0.2; // 20%

    if (discount > maxDiscount) {
        formContext.ui.setFormNotification("Discount cannot exceed 20%.", "ERROR", "discountError");
        formContext.getAttribute("discount").controls.forEach(control => control.setNotification("Discount too high!")); // Field-level

    } else {
        formContext.ui.clearFormNotification("discountError");
        formContext.getAttribute("discount").controls.forEach(control => control.clearNotification());
    }
}

  12. Automatically update the priority field based on the selected category:

    • How: Use an onChange script on the category field. Get the selected category and set the priority field's value accordingly.

    • Example:

      function updatePriority(executionContext) {
   let formContext = executionContext.getFormContext();
   let category = formContext.getAttribute("category").getValue();
   let priorityField = formContext.getAttribute("priority");

   if (category === "critical") { //assuming "critical" is a value from category
       priorityField.setValue(1); // Assuming 1 is the value for 'High'
   } else if (category === "normal") {
       priorityField.setValue(2); // Assuming 2 is 'Normal'
   } else {
       priorityField.setValue(null); // Or a default value
   }
}

  13. Prevent users from adding attachments larger than a specified size:

    • How: This is tricky to do reliably with pure client-side scripting before the file is uploaded. Client-side checks can be bypassed. The best approach combines client-side pre-checks with server-side validation. A client-side pre-check can use the File API in JavaScript to get the file size before upload.
    • Example (Conceptual Pre-Check - Needs Server-Side Enforcement): 
    ```javascript
//This would typically be on an event related to selecting the file.
function checkAttachmentSize(executionContext, fileInput) { //fileInput needs to point to an HTML file input.
  const maxSize = 5 * 1024 * 1024; // 5MB
  let file = fileInput.files[0];

  if (file && file.size > maxSize) {
      alert("File is too large. Maximum size is 5MB.");
      fileInput.value = ""; // Clear the file input
      //Or prevent form submission.
  }
}
```

  14. Dynamically change the background color of a form field based on its value:

    • How: Use an onChange script. Get the field's value and use JavaScript to modify the field's CSS style (specifically, the backgroundColor property). This requires direct DOM manipulation, which is generally discouraged in platform-specific frameworks (like Dynamics 365) in favor of their APIs.

    • Example (Conceptual - Direct DOM Manipulation - Use with Caution):

      function changeBackgroundColor(executionContext) {
   let formContext = executionContext.getFormContext();
    let field = formContext.getAttribute("myfield");
  let value = field.getValue();

  //This is bad practice in managed environments like Dynamics, but demonstrates concept
  let fieldElement = document.getElementById(field.controls.get(0).getName()); // VERY FRAGILE!

  if (value > 100) {
    fieldElement.style.backgroundColor = "red";
  } else if (value > 50) {
    fieldElement.style.backgroundColor = "yellow";
  } else {
    fieldElement.style.backgroundColor = "white";
  }
}

  15. Validate email addresses entered in a form field:

    • How: Use an onChange script. Use a regular expression to validate the email format. 
      function validateEmail(executionContext) {
    let formContext = executionContext.getFormContext();
  let emailField = formContext.getAttribute("email");
  let email = emailField.getValue();

  if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
     formContext.ui.setFormNotification("Invalid email address format.", "ERROR", "emailError");
    emailField.controls.forEach(control => control.setNotification("Invalid Email")); // Field-level notification
  } else {
      formContext.ui.clearFormNotification("emailError");
    emailField.controls.forEach(control => control.clearNotification());
  }
}

  16. Enforce mandatory fields before submitting a form:

    • How: Use an onSubmit script. Iterate through the required fields (you might have a list or use the form API to identify them). Check if each field has a value. If any are missing, prevent submission and display an error message. This is often redundant if fields are marked as "required" in the form definition, but it can be used for conditional requirements.
    • This is usually better handled by making the fields Required at the form level.

  17. Perform an AJAX call to retrieve additional data for a form field:

    • How: Use an onChange script on the field that triggers the lookup. Use JavaScript's XMLHttpRequest or the fetch API to make an asynchronous request to a server-side endpoint. When the data is received, update the target field(s).
    • Example (Conceptual - using fetch): 
    ```javascript
function getAdditionalData(executionContext) {
    let formContext = executionContext.getFormContext();
  let lookupValue = formContext.getAttribute("lookupfield").getValue();

  if (lookupValue) {
    fetch(`/api/getdata?lookup=${lookupValue}`) // Replace with your API endpoint
      .then(response => response.json())
      .then(data => {
        formContext.getAttribute("targetfield").setValue(data.result);
      })
      .catch(error => {
        console.error("Error fetching data:", error);
         formContext.ui.setFormNotification("Failed to retrieve data.", "ERROR", "ajaxError");
      });
  }
}
```

  18. Disable form fields based on certain conditions:

    • How: Use an onChange or onLoad script. Check the conditions and use the form's API to disable the relevant fields. 
        function disableFields(executionContext) {
     let formContext = executionContext.getFormContext();
     let condition = formContext.getAttribute("conditionfield").getValue();

    if (condition === "readonly") {
        formContext.getControl("field1").setDisabled(true);
        formContext.getControl("field2").setDisabled(true);
    } else {
        formContext.getControl("field1").setDisabled(false);
        formContext.getControl("field2").setDisabled(false);
    }
  }

  19. Display a warning message when a certain date is approaching:

    • How: Similar to date validation, use onChange or onLoad. Calculate the time difference and use notifications.

    • Example:

      function warnApproachingDate(executionContext) {
    let formContext = executionContext.getFormContext();
   let targetDate = formContext.getAttribute("targetdate").getValue();

    if (targetDate) {
      let now = new Date();
      let diff = targetDate.getTime() - now.getTime();
      let daysLeft = Math.floor(diff / (1000 * 60 * 60 * 24));

      if (daysLeft <= 7 && daysLeft > 0) {
         formContext.ui.setFormNotification(`Target date is approaching: ${daysLeft} days left.`, "WARNING", "dateWarning");
      } else {
        formContext.ui.clearFormNotification("dateWarning");
      }
    }
}

  20. Restrict access to a form based on the user's department:

    • How: This is usually handled through security roles and form assignments at the platform level, not through Client Scripts. Client Scripts can be bypassed. However, you could use an onLoad script to check the user's department (if available via the API) and then redirect them to a different form or display a message. This is a weak form of security. True access control should be done server-side.
    • Security Roles are best for this.

  21. Validate phone numbers entered in a form field:

    • See #1, using the regular expression appropriate for your use case.

  22. Automatically populate location information based on GPS coordinates:

    • How: Uses the browser's Geolocation API (navigator.geolocation). This requires user permission. You'd typically use a button or an onLoad script (with appropriate checks for user consent and API availability) to trigger the geolocation request. Once you have the coordinates, you can populate the relevant fields.
    • Requires user permission and may not work in all environments.

  23. Dynamically update options available in a choice field based on another field's value:

    • How: Use an onChange script on the controlling field. Get the selected value. Use the form's API to clear the existing options in the dependent choice field and then add the new options.

    • Example (Conceptual):

      function updateDependentOptions(executionContext) {
    let formContext = executionContext.getFormContext();
  let controllingField = formContext.getAttribute("controllingfield").getValue();
  let dependentField = formContext.getControl("dependentfield");

  dependentField.clearOptions(); // Clear existing options

  if (controllingField === "value1") {
    dependentField.addOption({ value: 1, text: "Option A" });
    dependentField.addOption({ value: 2, text: "Option B" });
  } else if (controllingField === "value2") {
    dependentField.addOption({ value: 3, text: "Option C" });
  }
}

  24. Display a warning when a form has been idle for too long:

    • How: Use setTimeout and event listeners for user activity (e.g., mousemove, keydown). Start a timer when the form loads. Reset the timer whenever there's user activity. If the timer expires, display a warning.
    • Example (Conceptual): 
    ```javascript
let idleTimeout;

function resetIdleTimer(executionContext) {
     let formContext = executionContext.getFormContext();
    clearTimeout(idleTimeout);
    idleTimeout = setTimeout(() => {
       formContext.ui.setFormNotification("Form has been idle. Please save your changes.", "WARNING", "idleWarning");
    }, 600000); // 10 minutes
}

function formOnLoad(executionContext) {
    let formContext = executionContext.getFormContext();
  // Reset timer on any activity
  document.addEventListener("mousemove", resetIdleTimer);
  document.addEventListener("keydown", resetIdleTimer);
    formContext.data.entity.addOnSave(resetIdleTimer);
  resetIdleTimer(executionContext); // Start the timer
}
```

  25. Validate numeric input within a specified range:

    • How: Use an onChange script, convert the input value to a number, check if it is within the range.

      function validateNumericRange(executionContext) {
  let formContext = executionContext.getFormContext();
    let numberField = formContext.getAttribute("numberfield");
  let number = numberField.getValue();
  const min = 10;
  const max = 100;

  if (number !== null && (number < min || number > max)) {
    formContext.ui.setFormNotification("Number must be between " + min + " and " + max + ".", "ERROR", "rangeError");
    numberField.controls.forEach(control => control.setNotification("Out of range."));
  } else {
      formContext.ui.clearFormNotification("rangeError");
    numberField.controls.forEach(control => control.clearNotification());
  }
}

  26. Hide certain form sections based on user roles:

    • How: Use an onLoad script. Check the user's role and use the form's API to set the visibility of the relevant sections.
    • This is usually better handled using Form customization settings, if possible.

  27. Display a progress indicator while submitting a form:

    • How: Use onSubmit. Show a progress indicator (e.g., a spinner or a progress bar) before starting any long-running operations (like AJAX calls). Hide the indicator when the operation is complete (or if there's an error).
    • Example (Conceptual): 
    ```javascript
function submitWithProgress(executionContext) {
    let formContext = executionContext.getFormContext();
  // Show progress indicator (implementation depends on your UI framework)
  showProgressIndicator();

  // Simulate an asynchronous operation (e.g., an AJAX call)
  setTimeout(() => {
    hideProgressIndicator();
      formContext.data.save(); // Save the data after "processing."
  }, 2000); // Simulate a 2-second delay
    executionContext.getEventArgs().preventDefault(); //prevent submission, since we submit after the timeout.
}
```

  28. Validate URL formats entered in a form field:

    • How: Use an onChange script. Use a regular expression to validate the URL format.

      function validateURL(executionContext) {
    let formContext = executionContext.getFormContext();
  let urlField = formContext.getAttribute("url");
  let url = urlField.getValue();

  if (url && !/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/.test(url)) {
    formContext.ui.setFormNotification("Invalid URL format.", "ERROR", "urlError");
    urlField.controls.forEach(control=>control.setNotification("Invalid URL"));
  } else {
    formContext.ui.clearFormNotification("urlError");
    urlField.controls.forEach(control => control.clearNotification());
  }
}

  29. Automatically calculate due dates based on selected options:

*   **How:** Use an `onChange` script on the field that determines the due date calculation. Get the selected option, perform date calculations (adding days, weeks, etc., to a base date), and set the value of the due date field.
  1. Prevent users from submitting duplicate records: 
*   **How:** This is *best* handled on the server-side (e.g., with database constraints or server-side logic) to ensure data integrity.  Client-side checks can provide a better user experience by preventing obvious duplicates, but they cannot guarantee uniqueness.  A client-side approach could involve:
    *   An `onSubmit` script that makes an AJAX call to check if a record with similar key fields already exists.
    *   Using a local cache (e.g., `localStorage`) to track recently submitted records (but this is unreliable across sessions).
*   **Server-side validation is essential for true duplicate prevention.**
  1. Perform real-time validation of a credit card number: 
*   **How:** Use an `onChange` script. Implement the Luhn algorithm (or a similar credit card validation algorithm) to check the card number's validity.  **Important:** This only checks the *format* of the card number, *not* whether it's a valid, active card.  Do *not* store full credit card numbers on the client-side.  For actual payment processing, use a secure, PCI-compliant payment gateway.
  1. Auto-populate user information based on the logged-in user: 
*   **How:** Use an `onLoad` script. Access the logged-in user's information through the platform's API (e.g., `Xrm.Utility.getGlobalContext().userSettings` in Dynamics 365). Set the values of the relevant fields.

  1. Dynamically update the available choices in a dependent choice field: See #23.

  2. Display tooltips for form fields:

*   **How:** Many platforms have built-in tooltip functionality. If not, you can use JavaScript to add `title` attributes to form field elements or use a JavaScript library to create custom tooltips.

  1. Restrict past dates from being selected in a date field: See #5 (but reverse the logic to prevent past dates).

  2. Limit the number of characters entered in a text field: See #8.

  3. Automatically populate form fields based on data from an external source: See #17 (AJAX calls).

  4. Validate input against a predefined list of values:

    • How: Use an onChange script. Compare the entered value against your list.

  5. Dynamically adjust form field visibility based on screen size:

    • How: Use an onLoad script and potentially a resize event listener. Use JavaScript to detect the screen size (e.g., window.innerWidth) and show/hide fields accordingly. This is often better handled with responsive design techniques (CSS media queries) if possible.

  6. Prevent users from submitting forms outside of business hours:

    • How: Use an onSubmit script. Get the current date and time. Check if it's within the allowed business hours. Prevent submission if outside the hours.

  7. Validate special characters entered in a form field:

    • How: Use an onChange script. Use regular expressions to check for the presence or absence of specific special characters.

  8. Enforce unique values in a form field:

    • See #30 (Duplicate records), but the principle applies. Requires server-side check.

  9. Display notifications for users when specific conditions are met: See #11.

  10. Describe a scenario where you would use a Client Script to validate alphanumeric input in a form field.

    • How: Use an onChange script, and a regular expression to check for both letters and numbers.

  11. Can you explain how to use a Client Script to automatically fill in form fields based on the selected user?

    • How: Use an onChange script on a user lookup field. Once a user is selected, retrieve additional information about that user (likely through an AJAX call to a server-side endpoint) and populate the relevant fields.

  12. Explain how to use Client Scripts to prevent users from submitting forms with invalid file formats in attachments.

    • See #13 (File size), but extend the logic to check the file extension.

  13. Describe a scenario where you would use a Client Script to validate user input against a regular expression pattern.

    • See many of the previous validation examples (email, phone, URL, etc.).

  14. Provide an example of using a Client Script to dynamically adjust form field labels based on user selections.

    • How: Use an onChange script to get the selected value, then update the text of the label.

  15. How do you use Client Scripts to display contextual help text for form fields?

    • Similar to tooltips (#34). You could show/hide help text elements based on focus or other events.

  16. Describe a scenario where you would use a Client Script to automatically update related records based on form input.

    • How: This is generally better handled with server-side logic (workflows, plugins, etc.) to ensure data consistency and avoid race conditions. Client-side updates to related records can be unreliable. However, a client script could make an AJAX call to a server-side endpoint that performs the update. This is more complex and requires careful error handling.

  17. Explain how to use Client Scripts to calculate and display the age based on a selected birthdate.

    • How: Use an onChange script on the birthdate field. Get the birthdate, calculate the age, and set the value of an "Age" field.

  18. Provide an example of using a Client Script to prevent users from submitting forms if certain conditions are not met. * See #4

  19. How would you implement a Client Script to automatically capitalize the first letter of input in a text field?

```javascript
function capitalizeFirstLetter(executionContext) {
   let formContext = executionContext.getFormContext();
  let textField = formContext.getAttribute("mytext");
  let text = textField.getValue();

  if (text) {
    textField.setValue(text.charAt(0).toUpperCase() + text.slice(1));
  }
}
```

  1. Describe a scenario where you would use a Client Script to validate checkbox selections in a form.

    • How: Use an onChange or onSubmit script. Check the values of the relevant checkboxes.

This comprehensive guide should cover all the scenarios presented and provide a solid understanding of how Client Scripts can be utilized. Remember to always prioritize server-side validation for critical data integrity and security.

No Comments
Back to top