Set background color of simple container

Function: Set background color of simple container

This action allows you to easily change the background color of any simple container element on your application's page. This is useful for highlighting specific sections, indicating status, or improving the visual design of your user interface without writing any code.

Input

• Simple container UI element (PART): This is the specific container on your page whose background color you want to change. You will typically select this directly from your application's design canvas.
• Background color (STRING): This is the color you want to apply to the container's background. You can enter a color name (like "red", "blue", "green"), a hexadecimal code (like "#FF0000" for red), or an RGB value (like "rgb(255, 0, 0)").

Output

After this action runs, the selected simple container on your page will display with the new background color you specified. There is no direct data output from this action; its effect is visual.

Execution Flow

Real-Life Examples

Here are some ways you can use the "Set background color of simple container" action in your application:

1. Highlighting an important section:

   • Inputs:
     • Simple container UI element: Important Notice Box
     • Background color: #FFFFCC (a light yellow)
   • Result: The "Important Notice Box" on your page will now have a light yellow background, making it stand out to users.

2. Indicating status visually:

   • Inputs:
     • Simple container UI element: Order Status Panel
     • Background color: Green (if order status is "Completed")
   • Result: If an order is marked as "Completed," the "Order Status Panel" will automatically turn green, providing a clear visual cue to the user.

3. Changing theme or mood:

   • Inputs:
     • Simple container UI element: Main Content Area
     • Background color: #F0F8FF (Alice Blue)
   • Result: The entire "Main Content Area" of your page will adopt a soft, light blue background, subtly changing the overall look and feel.