Concorde functional component — Mix. Mix allows you to mix several subsets of dataProvider in a new key/value structure which is itself associated with a new dataProvider. The data update is then bidirectional. Doc ID: core/components/functional/mix/mix. Keywords: Concorde, supersoniks, core/components/functional/mix/mix, mix, Mix, functional component, sonic-mix, web component. URL: https://concorde.supersoniks.org/crawl/core/components/functional/mix/mix.html.

Mix

Mix allows you to mix several subsets of dataProvider in a new key/value structure which is itself associated with a new dataProvider. The data update is then bidirectional.

Dot notation is supported to extract a sub-part of the data.

For example, if we declare dataproviders as follows :

<sonic-subscriber dataProvider="dataToMixA" props='{"foo":{"bar":2}}'></sonic-subscriber>
    <sonic-subscriber dataProvider="dataToMixB" props='{"baz":3}'></sonic-subscriber>

We can rearrange the data as follows

<sonic-mix dataProvider="mixedData" composition='{"either":"dataToMixB","orThat":"dataToMixA.foo.bar"}'>
      <div>Value of dataToMixA.foo.bar and mixedData.orThat : <sonic-value key="orThat"></sonic-value></div>
      <div>Value of dataToMixB.baz and mixedData.either.baz : <sonic-value key="either.baz"></sonic-value></div>
    </sonic-mix>

Then we can change values in both dataProviders programaticaly this way, they will stay in sync

SonicPublisherManager.get("mixedData").either.baz=6;
  SonicPublisherManager.get("dataToMixB").baz=8;
  SonicPublisherManager.get("dataToMixA").foo.bar=8;
  SonicPublisherManager.get("mixedData").orThat=6;

Or by using a form element

<sonic-input label="mixedData.orThat" formDataProvider="mixedData" name="orThat"></sonic-input>