Home Docs Gallery Fiddle
versionCodeSandbox

Documentation

IntroConceptsWidgetsChartsExamples
Basic
StoreWidgetsData BindingControllersInner LayoutsCSSFormattingSelection
Basic
Data Views
RepeaterRescopeSandboxData ProxyPrivate Store
Data Views
Advanced
RouterOuter LayoutsFunctional ComponentsLocalizationChartsDrag & DropData AdaptersKeyboard ShortcutsTyped ModelsImmer.js IntegrationCreating ComponentsCx Component
Advanced
Report Edit

Sandbox

import { Sandbox } from 'cx/widgets';

The Sandbox control works as a data multiplexer. It selects a value pointed by the key from the storage object and exposes it as a new property.

Results
1.
2.
3.
Sandbox
<div>
    <div preserveWhitespace>
        <Radio value={{bind: "$page.place", defaultValue: "winner"}} option="winner">1st Place</Radio>
        <Radio value-bind="$page.place" option="second">2nd Place</Radio>
        <Radio value-bind="$page.place" option="third">3rd Place</Radio>
    </div>
    <hr/>
    <Sandbox key-bind="$page.place" storage-bind="$page.results" recordAlias="$contestant">
        <div layout={LabelsLeftLayout}>
            <TextField value-bind="$contestant.firstName" label="First Name"/>
            <TextField value-bind="$contestant.lastName" label="Last Name"/>
        </div>
    </Sandbox>
</div>
<div style="width:200px">
    <strong>Results</strong>
    <Rescope bind="$page.results">
        <div>
            1. <Text tpl="{winner.firstName} {winner.lastName}" />
        </div>
        <div>
            2. <Text tpl="{second.firstName} {second.lastName}" />
        </div>
        <div>
            3. <Text tpl="{third.firstName} {third.lastName}" />
        </div>
    </Rescope>
</div>
Copied!Cx Fiddle

Sandboxed routes

Sandbox is commonly used in single page applications to isolate data belonging to different pages being identified by the URL address. See Router for more info.

Configuration

PropertyDescriptionType
key
accessKey

Key value used to access the data from the storage.

string
recordName
recordAlias

Name used to expose local data. Defaults to $page.

string
storage

Storage binding. All data will be stored inside.

string
immutable

Indicate that the data in the parent store should not be mutated. Defaults to false.

boolean
sealed

Indicate that the data in the store should not be mutated by child stores. Defaults to false.

boolean