Kuika's Switch element allows users to activate/deactivate a feature or setting with a single tap. Its simple, intuitive, and visually clear design enhances user interaction. It is typically preferred for connection, notification, security, or visibility settings.

Supported in both web and mobile applications.

Use Cases

• Notification or email subscription management
• In-app dark/light theme switching
• Location, Bluetooth, or device connection control
• Stay logged in or auto-login settings
• User access or feature authorization

Use Case – Enabling Device Connection

In a smart home application, the user manages a pet feeder (Pet Feeder). On this screen, the Switch element indicates whether the device connection is active and is controlled by the user.

In the scenario:

• The user sees a message showing the “Stay Connected” title and the connection status.
• If the Switch is in the open (blue) position, the device connection is active.
• When the user turns off the Switch, the connection is disabled.
• The system saves this value to the database and displays the “Disconnected” message on the interface.

Connecting the Data Source

• Go to the Datasources module.
• Click the “+” icon next to the Tables heading.
• Name the table DeviceConnections.
• Create the following table.

• Then, create a new action in the Actions > SQL Actions tab and name it UpdateConnectionStatus.
• Enter the following SQL command:

UPDATE DeviceConnectionsSET IsConnected = @IsConnectedWHERE DeviceId = @DeviceId‍

• Select the Switch element in the UI Design module.
• Link the OnChange → Managed DB → UpdateConnectionStatus action.
• Configure the parameter mappings:
  
  • @DeviceId = Current.DeviceId
  • @IsConnected = Switch.Value

UI Design Module Operations

1. Go to the UI Design module.
2. From the left panel, select the Elements > Select Input > Switch element.
3. Drag and drop the element onto the appropriate section of the screen.
4. Configure the following settings in the Properties panel:

• Value: true (active by default)

When the Scenario is Complete

• When the user activates the “Stay Connected” switch, the device connection is initiated.
• The Switch appears blue and the system displays the message “Your device is successfully connected.”
• When the user closes the switch, the connection is terminated, and the Switch turns gray.
• In the background, the IsConnected value in the database is updated.

Limitations

• The Switch element only works with true/false values.
• If the OnChange action is not defined, changes are only visual and are not reflected in the database.
• When using multiple Switches on the same page, Lazy Load is recommended for performance.

Tips and Best Practices

• Use the Switch element with short labels (e.g., “Active,” “Enabled,” “Connected”).
• Use color coding to clearly indicate the state (e.g., blue = active, gray = inactive).
• Add a “confirmation popup” before the OnChange action for critical operations.
• Provide explanatory information to the user by adding a “tooltip”.
• Prefer the Switch over the Toggle Button, as it is ideal only for binary (on/off) states.