Detect screen orientation changes

Learn how to use the Condition component to detect screen orientation changes and automatically display a pop-up that blocks the app usage in landscape mode.

When the user switches their device to landscape mode, a pop-up appears to inform them that the app is optimized for portrait mode only. This feature is particularly useful to ensure a consistent user experience on mobile and tablet devices.

Step 1: Add a pop-up

1. In your PandaSuite project, add a Pop-up component.
2. Customize its content by adding a clear message, for example: "This application works only in portrait mode."
3. Adjust the design so that it covers the entire visible area and prevents interaction with the underlying content.

Step 2: Add the Condition component

1. Add a Condition component
2. Rename this component (e.g., "Orientation Condition") to make it easier to identify.

Step 3: Configure the Condition component

Create a new condition based on screen dimensions:

1. In the Condition component properties, click Add a condition
2. Define the orientation detection condition: Width > Height (this detects the switch to landscape mode)
   
   ○ Data: choose project data and select the Width of the current screen.
   ○ Function: choose Greater than
   ○ Value: choose project data and select the Height of the current screen.

1. Enable Automatic Evaluation so that the condition is continuously checked.

Step 4: Add actions to the Condition

Add an action to the Condition component to open the pop-up when the condition is met:

• Action: Interact with a component > Pop-up > Open pop-up

Add an action for the opposite condition to close the pop-up:

• Action: Interact with a component > Pop-up > Close pop-up

Step 5: Test the configuration

1. Save your project.
2. Test by changing the orientation of your device or resizing the window in the simulator.
3. Verify that the pop-up appears in landscape mode and disappears in portrait mode.

Congratulations! You have now implemented automatic orientation detection using the Condition component. You can also explore other use cases by combining this component with additional actions to enhance the user experience.

Feel free to test and adapt this functionality according to your specific needs in your PandaSuite projects!