Merge pull request #4249 from SkylineCommunications/toggle-component

Toggle component
SkylineCommunications · Feb 7, 2025 · 2f112bc · 2f112bc
2 parents d24ceb1 + eddb5a2
commit 2f112bc
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 4 deletions.
diff --git a/...shboards_and_Low_Code_Apps/Configuring_components/Customize_Component_Layout.md b/...shboards_and_Low_Code_Apps/Configuring_components/Customize_Component_Layout.md
@@ -26,6 +26,8 @@ Each component in a dashboard or low-code app has a number of default options. B
 
      - In the *Colors* section, specify a custom background color and/or font color, either by specifying the color in RGB format, by entering the hex value or HTML color name, or by using the color picker box on the right.
 
+       Under *Colors* > *Accent color* (available from DataMiner 10.4.0 [CU12]/10.5.3 onwards<!--RN 41859-->), you can specify an accent color. If a component supports an accent color (e.g. the [toggle component](xref:Toggle)), it will inherit the selected color. By default, this is set to *Default*, meaning the accent color will match the theme of the dashboard or low-code app.
+
        Under *Colors* > *Data colors* or *Colors* > *Color palette* (prior to DataMiner 10.3.0 [CU16]/10.4.0 [CU4]/10.4.7<!--RN 39739-->), you can customize additional component colors, e.g. for the lines in a line chart.
 
        From DataMiner 10.3.0 [CU16]/10.4.0 [CU4]/10.4.7 onwards<!--RN 39739-->, under *Colors* > *Data colors*, you can specify conditional colors. If a display label of the data matches the specified text, that data will inherit the conditional color. These conditional colors override the normal data colors.

diff --git a/...nd_Low_Code_Apps/Configuring_components/Dynamically_Referencing_Data_in_Text.md b/...nd_Low_Code_Apps/Configuring_components/Dynamically_Referencing_Data_in_Text.md
@@ -49,11 +49,22 @@ To create component references inside textual settings, use the following syntax
 > - Any parts of this syntax that contain spaces should be enclosed in double quotation marks.
 > - All parts of this syntax are case-sensitive.
 
-Example: If the linked component provided the element name "Localhost" and the protocol name "Microsoft Platform", the following example would result in the text "*The element Localhost uses the protocol Microsoft Platform*":
+Examples:
 
-```txt
-The element `{COMPONENT."Page 1"."Dropdown 3"."Selected item".Elements.Name}` uses the protocol `{COMPONENT."Page 1"."Dropdown 3"."Selected item".Elements."Protocol Name"}`.
-```
+- If the linked component provided the element name "Localhost" and the protocol name "Microsoft Platform", the following example would result in the text "*The element Localhost uses the protocol Microsoft Platform*":
+
+  ```txt
+  The element `{COMPONENT."Page 1"."Dropdown 3"."Selected item".Elements.Name}` uses the protocol `{COMPONENT."Page 1"."Dropdown 3"."Selected item".Elements."Protocol Name"}`.
+  ```
+
+- If the linked component represents a toggle switch, where "Toggle 1" is either enabled (`true`) or disabled (`false`), the following example would result in the text "*Toggle state: true*" when Toggle 1 is enabled and "*Toggle state: false*" when Toggle 1 is disabled:
+
+  ```txt
+  Toggle state: {COMPONENT."Current view"."Toggle 1".Value.Booleans.Value}.
+  ```
+
+  > [!NOTE]
+  > Dynamically referencing boolean values is supported from DataMiner 10.4.0 [CU12]/10.5.3 onwards<!--RN 41845-->.
 
 #### URLs
 

diff --git a/...Creating_and_configuring_dashboards/Specifying_data_input_in_a_dashboard_URL.md b/...Creating_and_configuring_dashboards/Specifying_data_input_in_a_dashboard_URL.md
@@ -222,3 +222,5 @@ Within the dashboard URL, the following data objects can be specified:
   For example, to add a query row with two columns to the URL, of which the first column, *ID*, contains string values, and the second column, *Value*, contains numbers:
 
   `v:1\u001FIDColumn\u000EID\u000Estring\u001FValueColumn\u000EValue\u000Enumber\u001Evalue1\u000EValue 1\u001F5\u000EFive\u001ERowKey`
+
+- *booleans*: Supported from DataMiner 10.4.0 [CU12]/10.5.3 onwards<!--RN 41845-->. Used to specify whether a boolean value is set to "true" or "false" when the dashboard is loaded.
diff --git a/user-guide/Advanced_Modules/Dashboards_and_Low_Code_Apps/Variables/Variables.md b/user-guide/Advanced_Modules/Dashboards_and_Low_Code_Apps/Variables/Variables.md
@@ -28,6 +28,8 @@ To create a new variable:
 
    - Text
 
+   - Boolean (available from DataMiner 10.4.0 [CU12]/10.5.3 onwards<!--RN 41845-->)
+
    - Number
 
    - Table <!--RN 41132-->
@@ -55,6 +57,8 @@ To create a new variable:
 
    - Default text: Enter custom text.
 
+   - Default boolean: Choose *True* to enable the boolean variable by default, *False* to disable it, or *Empty* to leave it unset until a value is specified.
+
    - Default number: Enter a number or use the arrow icons to increase or decrease the value.
 
    - Default table: Configure a static table<!--RN 41132-->.

diff --git a/...Modules/Dashboards_and_Low_Code_Apps/Visualizations/Available_visualizations.md b/...Modules/Dashboards_and_Low_Code_Apps/Visualizations/Available_visualizations.md
@@ -278,3 +278,9 @@ Many visualizations are available in the Dashboards app and Low-Code Apps, in th
     <a href="/user-guide/Advanced_Modules/Dashboards_and_Low_Code_Apps/Visualizations/Available_visualizations/Basic_controls/Timerange.html" title="Time Range" target="_self"><img src="~/user-guide/images/Time_Range.svg" style="width:100%"></a>
   </div>
 </div>
+
+<div class="row"> 
+  <div class="column">
+    <a href="/user-guide/Advanced_Modules/Dashboards_and_Low_Code_Apps/Visualizations/Available_visualizations/Basic_controls/Toggle.html" title="Toggle" target="_self"><img src="~/user-guide/images/Toggle.svg" style="width:100%"></a>
+  </div>
+</div>
diff --git a/..._Low_Code_Apps/Visualizations/Available_visualizations/Basic_controls/Toggle.md b/..._Low_Code_Apps/Visualizations/Available_visualizations/Basic_controls/Toggle.md
@@ -0,0 +1,29 @@
+---
+uid: Toggle
+---
+
+# Toggle
+
+This basic control (available from DataMiner 10.4.0 [CU12]/10.5.3 onwards<!--RN 41903-->) allows you to enable or disable specific capabilities.
+
+The toggle component accepts boolean input (e.g. variables of type boolean), but can also be used as data output (*Data* > *Components* > *Toggle #* > *Value* > *Booleans*) to drive GQI queries, Automation scripts, and more. For example, you can use one toggle component to trigger a second toggle component.
+
+![Two toggle switches](~/user-guide/images/Notification_and_Vibration_Controls.gif)<br>*Toggle components in DataMiner 10.5.3*
+
+To configure the toggle component:
+
+1. In the *Component* > *Settings* pane, determine whether the component's default value should be "false" (toggle switch disabled) or "true" (toggle switch enabled). By default, this is set to "false".
+
+1. Optionally, fine-tune the component layout. In the *Component* > *Layout* pane, the following options are available:
+
+   - The default options available for all components. See [Customizing the component layout](xref:Customize_Component_Layout).
+
+   - *Label*: Text that will be displayed next to the toggle switch.
+
+   - *Icon*: Icon that will be displayed next to the toggle switch.
+
+## Component actions
+
+When you have added a toggle component to a low-code app, you can configure the following [component action](xref:LowCodeApps_event_config#executing-a-component-action) in your low-code app to interact with the component:
+
+- *Set value*: Allows you to set the current value of the component to either a static value (true, false, or empty) or data input (variables of type boolean)<!--RN 41911-->.
diff --git a/user-guide/Advanced_Modules/toc.yml b/user-guide/Advanced_Modules/toc.yml
@@ -502,6 +502,8 @@ items:
                 topicUid: DashboardTextInput
               - name: Time range
                 topicUid: TimeRange
+              - name: Toggle
+                topicUid: Toggle
       - name: Component data
         topicUid: Component_Data
       - name: URL data

diff --git a/user-guide/images/Notification_and_Vibration_Controls.gif b/user-guide/images/Notification_and_Vibration_Controls.gif
diff --git a/user-guide/images/Toggle.svg b/user-guide/images/Toggle.svg
Original file line number	Diff line number	Diff line change
Expand Up		@@ -222,3 +222,5 @@ Within the dashboard URL, the following data objects can be specified:
		For example, to add a query row with two columns to the URL, of which the first column, ID, contains string values, and the second column, Value, contains numbers:

		`v:1\u001FIDColumn\u000EID\u000Estring\u001FValueColumn\u000EValue\u000Enumber\u001Evalue1\u000EValue 1\u001F5\u000EFive\u001ERowKey`

		- booleans: Supported from DataMiner 10.4.0 [CU12]/10.5.3 onwards<!--RN 41845-->. Used to specify whether a boolean value is set to "true" or "false" when the dashboard is loaded.