Common Widget Properties

While working with widgets, you may find some features or properties that are common across various widgets. This page will guide you on how to implement these common functionalities or modify properties that are applicable to multiple widgets.

Here are the properties: you can also use the links on the right side to navigate to a property.

Use keyboard to increase/decrease property value

You can adjust the property value using your keyboard's up and down arrow keys. Tip: Use the shift key in combination with the arrow keys, which increments or decrements the value by 10 units at a time.

Visibility

Conditional

Conditional visibility allows you to control the display of UI elements (i.e., widgets) based on certain conditions or criteria. It enables you to create dynamic and personalized user experiences by showing or hiding specific content or features.

For example, using this, you could display features, options, or actions based on the user's role or permissions, such as admins might see admin-only controls.

Let's see how to add conditional visibility with an example that allows users to add doctors to their favorites list only if logged in. In essence, the favorite icon will only be displayed for logged-in users.

Here's what the final result looks like:

Left side: user not logged in | Right side: user logged in

Here are the steps:

1. Select the widget from the widget tree or canvas area.

2. Move to the properties panel > enable Conditional.

3. Click on the Unset and provide the condition that determines whether a UI element should be displayed or hidden. For this example, we'll directly use the Is User Logged In global property. This will show the widget if the user is logged in.

4. You can toggle Show in UI Builder to test the effect of showing/hiding that widget in the UI builder. Note that this option is only to help you visualize the effect of visibility on the widget, and it does not affect your app.

Responsive Properties

When developing user interfaces with widgets, you'll notice certain properties and features that are universally applicable. This section provides guidance on adjusting these shared attributes across different widgets.

Below are the common properties; you can use the navigation links on the right to quickly access detailed information about each property.

The navigation menu on the web and mobile

You can achieve this by creating two separate widgets and setting their responsive visibility (under the properties panel).

In the example above, the navigation menu created for the web or desktop (on the left side) is made visible only on a wider screen by enabling the desktop icon. Similarly, the navigation menu for the mobile (on the right side) is made visible only on a small screen by enabling the mobile icon.

Here is how it is done:

Responsive visibility for mobile

Responsive visibility for web

Customize Responsive Breakpoint

Sometimes, you might want to override the default responsive breakpoint to suit unique requirements; whether it's accommodating a specific device or catering to a particular user experience, having the flexibility to customize breakpoints can be advantageous.

To customize responsive breakpoints, open Theme Settings (from the navigation menu) > Design System > Breakpoints and change the values.

For example, if you define a custom breakpoint at 575 pixels, positioning it between the 'Mobile' and 'Tablet' range. In this case, when your app is accessed on a screen larger than 575 pixels, the layout will be adjusted as per the Tablet configuration.

Furthermore, you can utilize these breakpoint values throughout your app to tweak the widget properties based on the screen size. For example, you might set different width and height values for a Container widget depending on whether the screen size matches with small, medium, or large.

You can access the breakpoint values via the Set from Variable menu. Here's an example of setting the Container width based on the screen size.

Opacity

Controlling the opacity of any widget opens up a plethora of creative opportunities. For instance, you can create an aesthetically pleasing effect using transparent buttons, dynamic themes, overlay effects, etc.

You can control the transparency from Properties Panel > Visibility > Opacity property. It accepts value between 0 and 1. e.g., 0 means full transparency, one is opaque, and 0.5 is half transparent.

Padding & Alignment

Add padding

Padding is the empty space around the outer side of the widget.

To add a padding:

1. Select the widget from the widget tree or from the canvas area.
2. Move to the Properties Panel and navigate to the Padding & Alignment section.
3. Enter values for Left (L), Top (T), Right (R), Bottom (B).
4. To apply the same padding on all sides, switch to the Uniform Padding option. You can then adjust the padding by either moving the slider or entering the desired value directly.
5. Use the refresh icon button to reset all values.

If you prefer watching a video tutorial, here is the guide for you:

Adjust Alignment

This property helps you position the widget in two ways.

Horizontal Alignment determines where the widget will be placed horizontally inside of its parent. A value of -1 will place the widget to the left, while a value of 1 will place the widget to the right.

Vertical Alignment determines where the widget will be placed vertically inside of a parent. A value of -1 will place the widget at the top, while a value of 1 will place the widget at the bottom.

To change the alignment:

1. Select the widget, and head over to Properties Panel > Padding & Alignment section.
2. Use the alignment box to align the widget at a fixed position or directly enter a value in the Horizontal and Vertical input box.

If you prefer watching a video tutorial, here is the guide for you:

Testing Widgets

This property enables you to specify the Value Key for the current widget, which serves as a reference point during automated test runs. Please refer to the detailed guide provided here.

Set Width & Height Properties

To change the size, navigate to the Width and Height properties, and then you have three choices for setting the size:

• For a specific size, choose PX and type in the size you want.
• For a size based on the screen, choose % and type in the percentage.
• To make the widget fill the whole screen width or height, click on the infinity symbol (∞).

Change Color

To change color for any widget property:

1. Navigate to a widget property that allows you to set a color.
2. Click on the currently selected color to either pick a new color or enter the Hex Code directly.
3. By default, theme colors are displayed. Simply click on a color to apply it.
4. For a custom color, switch to the Custom Color tab, select your desired color, and then click Use Color.
5. You can also set a color from variable.

Set Color From Variable

You may want to apply dynamic colors to widget properties like Container backgrounds or Text colors, which can be achieved by assigning colors from a variable. For instance, you can display temperature color dynamically based on an app state variable, data from a Firestore document, responses from API calls, or other similar sources.

To set a color from a variable:

1. Navigate to a widget property that allows you to set a color.
2. From the Set from Variable menu, you can select the source of your color. Below is an example of setting color from an app state variable.

You can also set the color from a conditional value.

Copy Variable

If you have a complex variable value (e.g., using Conditional Logic) and want to use the same logic in another variable value, you can do so by copying a variable.

To copy-paste a variable:

1. Open the Set from Variable menu and select the Variable Options (three dots) icon.
2. Select the Copy Variable.
3. Move to the place where you want to paste the variable, and open the Set from Variable menu.
4. Click on the Paste Variable icon.
5. Click Confirm.

Edit multiple widgets simultaneously

We also allow you to modify the properties of multiple widgets at once. This can be a time-saving and efficient way to make bulk changes to the user interface of an app.

For example, imagine that you want to change the background color of multiple buttons in an app from blue to green. Without the ability to edit multiple widgets simultaneously, you would need to select and edit each button individually. However, with this feature, you can select all of the buttons at once and modify their fill color property.

To edit multiple widgets simultaneously, you can select all the widgets you want to modify by clicking on each one while holding down the shift key. Once you have selected all the desired widgets, you can access and modify their common properties all at once from the properties panel.

Add Image from Unsplash

You can also add images directly from the Unsplash right inside the properties panel. To do so, simply click on the search icon and search and select the image. Tip: You can also choose the size of the image to add (i.e., Small, Regular, Full).

UI Builder Display Value

For widgets like Text and RichText, when their content is set from a variable, you can set a placeholder value to be displayed only in the app builder. Keep in mind that this placeholder is solely for visualization purposes within the canvas and will be replaced by the actual variable value when the app runs.

This feature is useful for assessing spacing and alignment without removing variable bindings.

Trigger action on selection change

Here, you will see how to trigger an action when the selection changes for any Form widget such as Dropdown, RadioButton, ChoiceChips, Slider, and RatingBar.

info

To simplify, we've used the Dropdown widget as an example. However, the same instructions apply to other Form widgets as well.

To do so:

1. Select the widget.
2. Select Actions from the properties panel, and click + Add Action.
3. You will notice that the Type of Action (aka callback) is already set to On Selected. That means actions added under this will be called whenever the selection changes.
4. Now you can add any action here.

Here is an example showing the snackbar message when the Dropdown selection changes.

Adding border

To add a border to any widget:

1. Find the Border Color property and change the color.
2. To create the rounded border, use the Border Radius property.
3. Enter values for TL (Top left), TR (top right), BL (bottom left), and BR (bottom right).
4. To apply the same radius on all sides, switch to the Uniform Radius option. You can then adjust the radius by either moving the slider or entering the desired value directly.
5. Use the refresh icon button to reset all values.
6. To increase the border thickness, use the Border Width property.