🔹 Dynamic Visibility and Conditional Formatting in Power Apps

📌 Introduction

Dynamic Visibility and Conditional Formatting in Power Apps allow elements to appear, disappear, or change their properties based on certain conditions. These techniques improve user experience, interactivity, and usability by dynamically adjusting the UI.

✅ Why Use Dynamic Visibility & Conditional Formatting?

• 🎯 Show or hide elements based on user actions or roles.
• 🎨 Change colors, sizes, and styles dynamically.
• 🚀 Improve app usability and interactivity.

---

🔹 Step 1: Controlling Visibility of Components

✅ Example: Hide a Button Based on User Role

1️⃣ Insert a Button
2️⃣ Set its Visible property:

If(User().Email = "admin@company.com", true, false)

📌 Now, only the admin can see the button!

✅ Example: Show a Label Only When a Checkbox is Checked

1️⃣ Insert a Checkbox (CheckBox1) and a Label (Label1)
2️⃣ Set the Visible property of the label:

CheckBox1.Value

📌 Now, the label appears only when the checkbox is checked!

---

🔹 Step 2: Changing Control Properties Dynamically

✅ Example: Changing Button Color Based on Status

1️⃣ Insert a Button (Button1)
2️⃣ Set its Fill property:

If(
   ThisItem.Status = "Approved", Green,
   ThisItem.Status = "Pending", Orange,
   ThisItem.Status = "Rejected", Red
)

📌 Now, the button color changes dynamically based on status!

✅ Example: Making a Field Read-Only for Certain Users

1️⃣ Insert a Text Input (TextInput1)
2️⃣ Set its DisplayMode property:

If(User().Email = "admin@company.com", DisplayMode.Edit, DisplayMode.View)

📌 Now, regular users can only view the field, while admins can edit it!

---

🔹 Step 3: Conditional Formatting in Galleries

✅ Example: Highlight Rows in a Gallery Based on Conditions

1️⃣ Insert a Gallery
2️⃣ Set the TemplateFill property:

If(
   ThisItem.Status = "Urgent", RGBA(255, 0, 0, 0.3), // Red for Urgent
   ThisItem.Status = "In Progress", RGBA(255, 165, 0, 0.3), // Orange for In Progress
   RGBA(0, 255, 0, 0.3) // Green for Completed
)

📌 Now, each row in the gallery gets a different background color!

✅ Example: Display an Icon Based on Data Values

1️⃣ Insert an Icon (Check Icon) inside a Gallery
2️⃣ Set its Visible property:

ThisItem.Status = "Completed"

📌 Now, the check icon appears only for completed tasks!

---

🔹 Step 4: Formatting Forms Based on Data

✅ Example: Changing Text Color Based on Input

1️⃣ Insert a Text Label (Label1)
2️⃣ Set its Color property:

If(Value(TextInput1.Text) > 100, Red, Black)

📌 Now, if the input value is greater than 100, the text turns red!

✅ Example: Disabling a Submit Button Until All Fields Are Filled

1️⃣ Insert a Button (SubmitButton)
2️⃣ Set its DisplayMode property:

If(
   IsBlank(TextInput1.Text) || IsBlank(Dropdown1.Selected.Value),
   DisplayMode.Disabled,
   DisplayMode.Edit
)

📌 Now, the submit button is disabled until all fields are filled!

---

🔹 Step 5: Using Toggles to Control Visibility

✅ Example: Show/Hide a Section Using a Toggle

1️⃣ Insert a Toggle (Toggle1)
2️⃣ Insert a Container or Section
3️⃣ Set the Visible property of the section:

Toggle1.Value

📌 Now, toggling the switch hides or shows the section!

---

🔹 Step 6: Best Practices for Dynamic Visibility & Formatting

✅ Use Global Variables for app-wide visibility settings:

Set(ShowAdminControls, User().Email = "admin@company.com")

✅ Use Collections to Store UI States

ClearCollect(UIStates, { Section: "Dashboard", Visible: true })

✅ Test on Different Devices to ensure proper formatting.

✅ Use Clear Logic to avoid unnecessary complexity.

---

🔹 Conclusion

Dynamic Visibility and Conditional Formatting in Power Apps help in creating interactive, user-friendly, and responsive applications.

💡 Key Takeaways:
✅ Use conditions to show/hide elements.
✅ Apply color changes based on data.
✅ Make fields read-only for specific users.
✅ Use toggles and checkboxes for interactive UI.
✅ Ensure performance optimization by avoiding excessive calculations.

Now, you’re ready to implement smart UI behaviors in Power Apps!

---