diff --git a/Client-Side Components/Client Scripts/Dynamically Switch Form View Based on Field Value/README.md b/Client-Side Components/Client Scripts/Dynamically Switch Form View Based on Field Value/README.md new file mode 100644 index 0000000000..3b22ef62bf --- /dev/null +++ b/Client-Side Components/Client Scripts/Dynamically Switch Form View Based on Field Value/README.md @@ -0,0 +1,20 @@ +## Dynamically Switch Form View Based on Field Value + +This client script demonstrates how to **automatically switch form views** based on the value of a field. + +**Use case:** +For example, if the **Category** field is set to *Hardware*, the form view switches to **ess**. +You can extend this by updating the mapping object to support additional fields and values (e.g., *Software → itil*, *Network → support*). + +**Benefit:** +Improves user experience by guiding users to the **most relevant form view**, ensuring the right fields are shown for the right scenario. + +**Test:** +- Change the **Category** field to *Hardware* → Form view should switch to **ess**. +- Update mapping to add new conditions (e.g., *Software → itil*) and verify the view switches accordingly. + +**How to Use:** +1. **Modify the table name** in the `switchView` function to match your target table: + ```javascript + switchView("section", "", targetView); +2. **Modify the view mapping** diff --git a/Client-Side Components/Client Scripts/Dynamically Switch Form View Based on Field Value/dynamic-form-view-onchange.js b/Client-Side Components/Client Scripts/Dynamically Switch Form View Based on Field Value/dynamic-form-view-onchange.js new file mode 100644 index 0000000000..07e32f6441 --- /dev/null +++ b/Client-Side Components/Client Scripts/Dynamically Switch Form View Based on Field Value/dynamic-form-view-onchange.js @@ -0,0 +1,33 @@ +/** + * dynamic-form-view-onchange.js + * + * Dynamically switches the form view automatically depending on the value of a specific field. + * Example: If Category = Hardware → switch to ess view. + * Extendable by modifying the mapping object for different fields/values. + * + */ + +function onChange(control, oldValue, newValue, isLoading) { + if (isLoading || !newValue) { + return; + } + + // Field value → view name mapping + var viewMapping = { + "hardware": "ess", + "software": "itil", + "network": "support" + }; + + var fieldValue = newValue.toLowerCase(); + var targetView = viewMapping[fieldValue]; + + if (targetView) { + try { + // Here for example the table name is incident + switchView("section", "incident", targetView); + } catch (e) { + console.error("View switch failed: ", e); + } + } +}