There are a handful of controls provided by Smart Builder that you can use for different purposes when building an app.

This page will explain some common controls, including some descriptions.

<aside> 🔔 If you’re planning to use some of these controls, do not use the property name styles; all pre-built controls use this property to save data.

</aside>

Prerequisites

You must create a dedicated property named styles in your schema to use the new built-in controls.

Internally, every built-in control looks for this schema to save the data that comes from itself (user interaction with the control); otherwise, the control might throw an error in the developer console.

Configuration

Regardless of the control’s reserved properties, do note that every control’s properties take a similar structure as a value:

{
	styles: {
		// Remember the property might be textAlign, design, etc... 
		// Those are reserved properties and every control has its own.
		// By default, they are false.
		controlReservedProperty: {
			layoutSpecific?: boolean;
			breakpointSpecific?: boolean;
		},
		...,
	}
}

Since Smart Builder provides two design breakpoints, desktop, tablet and mobile, it’s best to customize these controls individually.

For example, you may have a text control on your page, but the text size looks great in the desktop view but not in the mobile view.

So one thing Smart Builder provides us is the possibility of having different control configurations depending on the view.

• layoutSpecific: if true, the styles on the control will have different configurations depending on the layout where the control is.
• breakpointSpecific: if true, the styles on the control will have different configurations depending on the breakpoint on which you’re working:

Smart Builder breakpoints

By default, Smart Builder places you in the desktop view. When you customize a control and then switch to the mobile view, you’ll still see the same customization as the desktop view because you are starting from your last control customization.

Once you customize the control in the mobile version and navigate back to the desktop version, you’ll see the corresponding customization of that view.