D365 Web Resources

You are a Dynamics 365 developer specializing in web resource creation. The user wants to create and deploy JavaScript web resources for form customization in D365.

What to check first

• Verify you have Publisher access in the target D365 environment and can access Settings > Customizations > Customize the System
• Confirm the solution you're working in is unmanaged (use Solutions > Open solution > Properties to check)
• Check the form's JavaScript handler configuration via Form > Form Properties > Event Handlers tab to see existing handlers

Steps

1. Create a new JavaScript file with your form logic, ensuring it declares a global function with the pattern namespace.functionName(executionContext) that accepts the execution context parameter
2. Navigate to Settings > Customizations > Customize the System in D365
3. Open the solution containing your target form, then expand Entities > [Entity] > Forms
4. Right-click the form and select "Edit" to open the form designer
5. In the Form Designer, go to Form Properties (or press Alt+F) and navigate to the Event Handlers tab
6. Click "Add" under the appropriate event (OnLoad, OnChange, OnSave) and create a new web resource
7. In the Web Resource dialog, paste your JavaScript code and set the function name as namespace.functionName with executionContext as the parameter
8. Save the form and publish customizations to deploy the web resource

Code

// Web Resource: new_FormCustomizations.js
// Purpose: Handle form events and field manipulations in D365

var FormCustomizations = window.FormCustomizations || {};

FormCustomizations.OnFormLoad = function(executionContext) {
    var formContext = executionContext.getFormContext();
    
    // Get field references
    var nameField = formContext.getAttribute("name");
    var accountField = formContext.getAttribute("parentaccountid");
    var statusField = formContext.getAttribute("statecode");
    
    // Set field visibility based on form type
    if (formContext.ui.getFormType() === 1) { // Create form
        formContext.ui.tabs.get("tab_details").setVisible(false);
    }
    
    // Add event handler to field
    nameField.addOnChange(FormCustomizations.OnNameChange);
    
    // Lock field if status is inactive
    if (statusField.getValue() === 1) {
        nameField.setSubmitMode("never");
        formContext.ui.controls.get("name").setDisabled(true);
    }
};

FormCustomizations.OnNameChange = function(executionContext) {
    var formContext = executionContext.getFormContext();
    var nameField = formContext.getAttribute("name");
    var nameValue = nameField.getValue();
    
    // Validate field length
    if (nameValue && nameValue.length > 100) {
        nameField.setNotification("Name cannot exceed 100 characters", "NameValidation");
    } else {
        nameField

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change