Property Scopes

Most component properties (such as text & positioning) can be configured to use alternate values based the current scope of a widget. The scope is tied to the current language, breakpoint and variant of the widget.

Use Cases

• Multilingual widgets — The same widget can be used on website that support multiple languages by defining alternate values for text and button components based on the widget's language scope.

• Responsive widgets — Widget can be made to adjust to different browser and device widths by adjusting the position and dimensions of components based on the widget's breakpoint scope.

• Alternate designs — A single widget can be configured with one or more alternate designs that are activated based on the widget's variant scope.

How Are Property Values Determined?

Property scopes use an inheritance model. The initial values you specify for component properties are stored in the Default scope. Values in the default scope form a base which are inherited and overridden by other, more specific scopes.

For example, a Button component could have default values for its text, and dimensions (width & height). The text could be overridden to provide a specific French translation and the dimensions could be overridden to make the button smaller for mobile devices.

In the following example, if the widget is displayed in any language other than French, the button text will read "Hello".

Figure: Example of property inheritance for a component called "Button1"

Changing Editing Scopes

The current property editing scope can be changed from dropdowns near the top of the editor. These editor scope dropdowns are only visible if you have defined additional property scopes via the Widget Settings.

Figure: Editing Scope Dropdowns

Language Scope

A widget's language is tied to the current offer that is attached to it. Each offer defined in the Fanplayr Portal has a language attribute and widgets take on this value at runtime.

Breakpoint Scope

Breakpoints allow you to create responsive widgets that use alternate styles based on the device used to view your website. Breakpoints can be utilized in two different modes: simple and advanced.

Simple Breakpoints

The simple mode splits the breakpoint scope into two types, desktop or mobile. This can be used to make simple changes to a widget to ensure its design works for both large and small screens. At runtime, the widget will assume the appropriate breakpoint based on the device viewing it.

Advanced Breakpoints

The advanced mode allows you to define and name specific breakpoint scopes which are based on the maximum width of view components.

For example, this can be used to create an embeddable banner that adjusts responsively to fit different screen sizes. The view component can be made to take up 100% width of its container and then styled differently at specific widths to progressively reduce visible content in the widget for smaller screens.

Variant Scope

The variant scope can be used to override certain properties in a widget to create alternate designs that do not necessarily relate to translations or responsive design.

Similar to the language scope, a widget's variant is tied to the current offer that is attached to it. Each offer defined in the Fanplayr Portal has a variant name attribute and widgets take on this value at runtime.

For example, you could use variants to create alternate designs for each season instead of having to create a new widget entirely.

Component Deletion Confirmation

It is important to note that when you delete a component, it is removed from the widget entirely, not just from the particular scope you are editing. If you want a component to be hidden for a particular scope (e.g. hidden for smaller devices using a breakpoint scope) you can simply set the component's Visible property to "hidden" for that scope.

When you attempt to delete a component in a widget that has scoped properties you will be shown a confirmation dialog similar to the one below. This is to protect you from accidentally deleting a component entirely when you intention may have been to only hide it instead.

Figure: Delete component confirmation dialog

Adding Components To Non-Default Scopes

When you add a component to your widget while editing in a non-default scope, the component's properties will be initially configured so that it is only visible for the current scope. This allows you to quickly and conveniently add components to your widget that are only visible to the current editing scope, without needing to hide it from other scopes you have defined.

The editor does this automatically by:

1. Setting the component's default Visible property to "hidden".

2. Setting the component's Visible property for the current editing scope to "visible".

The then causes all other property scopes to inherit the "hidden" property from the default scope.