diff --git a/ui-ngx/src/assets/help/en_US/scada/symbol_state_render_fn.md b/ui-ngx/src/assets/help/en_US/scada/symbol_state_render_fn.md
index 7270066f80..9a2c811817 100644
--- a/ui-ngx/src/assets/help/en_US/scada/symbol_state_render_fn.md
+++ b/ui-ngx/src/assets/help/en_US/scada/symbol_state_render_fn.md
@@ -20,36 +20,44 @@ A JavaScript function used to render SCADA symbol state.
 
 ##### Examples
 
-* Change colors for many tags on the value of the “active, value, minValue, maxValue”
+This JavaScript snippet manages the enablement and appearance of SVG buttons used to control volume settings based on device connectivity and value thresholds.
+The 'Up' button is disabled when the volume reaches its maximum allowable value (`maxValue`), and the 'Down' button is disabled when the volume is at its minimum allowable value (`minValue`). 
+Both buttons are disabled when the device is offline. The visual cues for enabled/disabled states are represented by color changes.
 
 ```javascript
-var levelUpButton = ctx.tags.levelUpButton;
-var levelDownButton = ctx.tags.levelDownButton;
-var levelArrowUp = ctx.tags.levelArrowUp;
-var levelArrowDown = ctx.tags.levelArrowDown;
 
-var active = ctx.values.active;
-var value = ctx.values.value;
-var minValue = ctx.properties.minValue;
-var maxValue = ctx.properties.maxValue;
+var levelUpButton = ctx.tags.levelUpButton; // Button for increasing volume
+var levelDownButton = ctx.tags.levelDownButton; // Button for decreasing volume
+var levelArrowUp = ctx.tags.levelArrowUp; // Visual arrow for 'Up' button
+var levelArrowDown = ctx.tags.levelArrowDown; // Visual arrow for 'Down' button
 
+var active = ctx.values.active; // Device connectivity status
+var value = ctx.values.value; // Current volume level
+var minValue = ctx.properties.minValue; // Minimum volume level
+var maxValue = ctx.properties.maxValue; // Maximum volume level
+
+var enabledColor = '#4CAF50'; // Color for enabled state
+var disabledColor = '#A1ADB1'; // Color for disabled state
+
+// Determine if the 'Up' button should be enabled
 var levelUpEnabled = active && value < maxValue;
-var levelDownEnabled = active && value > minValue;
-
 if (levelUpEnabled) {
-  ctx.api.enable(levelUpButton);
-  levelArrowUp[0].attr({fill: '#647484'});
+  ctx.api.enable(levelUpButton); // Enable 'Up' button
+  levelArrowUp[0].attr({fill: enabledColor}); // Set arrow color to indicate enabled state
 } else {
-  ctx.api.disable(levelUpButton);
-  levelArrowUp[0].attr({fill: '#777'});
+  ctx.api.disable(levelUpButton); // Disable 'Up' button
+  levelArrowUp[0].attr({fill: disabledColor}); // Set arrow color to indicate disabled state
 }
 
+// Determine if the 'Down' button should be enabled
+var levelDownEnabled = active && value > minValue;
 if (levelDownEnabled) {
-  ctx.api.enable(levelDownButton);
-  levelArrowDown[0].attr({fill: '#647484'});
+  ctx.api.enable(levelDownButton); // Enable 'Down' button
+  levelArrowDown[0].attr({fill: enabledColor}); // Set arrow color to indicate enabled state
 } else {
-  ctx.api.disable(levelDownButton);
-  levelArrowDown[0].attr({fill: '#777'});
+  ctx.api.disable(levelDownButton); // Disable 'Down' button
+  levelArrowDown[0].attr({fill: disabledColor}); // Set arrow color to indicate disabled state
 }
+
 {:copy-code}
 ```
diff --git a/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md b/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md
index 2ff6b87569..8675419803 100644
--- a/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md
+++ b/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md
@@ -23,27 +23,28 @@ A JavaScript function invoked when user clicks on SVG element with specific tag.
 
 ##### Examples
 
-* Set new value action
+The example demonstrates how to dynamically call the 'turnOn' or 'turnOff' actions based on the 'active' status from the context. The actions are implemented using the following methods from the <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolapi" target="_blank">Scada Symbol API</a>:
 
-*callAction: (event: Event, behaviorId: string, value?: any, observer?: Partial\<Observer\<void\>\>): void*
+- **callAction**: *(event: Event, behaviorId: string, value?: any, observer?: Partial\<Observer\<void\>\>): void* - Triggers a specific behavior action identified by its ID, allowing for the optional passing of values and observer callbacks.
 
-*setValue: (valueId: string, value: any): void*
+- **setValue**: *(valueId: string, value: any): void* - Updates a specific value within the `ctx.values` object and initiates all related rendering functions.
 
-Avoid manually setting behavior values, as shown in the example, see <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#best-practices" target="_blank">best practice</a> for Device Interaction
+For more detailed guidelines on device interaction, consider reviewing the <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#best-practices" target="_blank">best practices</a>.
 
 ```javascript
-var active = ctx.values.active;
-var action = active ? 'turnOn' : 'turnOff';
+var active = ctx.values.active; // Current active status from context
+var action = active ? 'turnOn' : 'turnOff'; // Determine action based on active status
+var parameter = "any object or primitive"; // Parameter to pass with the action
 
-ctx.api.callAction(event, action, active, {
+// Call the action with observer callbacks for next and error handling
+ctx.api.callAction(event, action, parameter, {
   next: () => {
-    // To simplify debugging in preview mode
+    // Action succeeded; toggle the 'activate' status for debugging
     ctx.api.setValue('activate', !active);
   },
   error: () => {
-    // To simplify debugging in preview mode
+    // Action failed; reset the 'activate' status for debugging
     ctx.api.setValue('activate', active);
   }
 });
-{:copy-code}
 ```