Two web components pointing to the same form variable

[jeremiahb]

I have made two different little web components that I want to point to the same form variable.

They each have a model defined in the .spec file like this:
"model":
{
"foo" : {"type": "dataprovider"}
}

Inside the properties for the instance of that component on my form, I have set "foo" on each of them to point to "myFormVariable" which is defined on that form.

One of the web components has a button which when clicked changes the value of "foo". The intention is that this value is passed through to myFormVariable, and thus the second web component updates its own "foo" variable. But instead clicking the button seems to create a separate variable inside an isolated scope. I have tried both ng-click and svy-click, making myFormVariable an object rather than a string, and the various values for "pushToServer", but have had no success.

What is the basic, standard way of binding 2 separate components to the same form variable?

[sbutler]

I'm going to guess that the problem isn't using the same dataprovider on 2 different web components, but rather that your change to the model isn't getting pushed. A quick way to test is is to just drop a servoy text field on your form connected to the same form variable, and see if it updates. If not, then try this...

Servoy has an svy-autoapply that will automatically push the changes that were made. It works on some basic components like a text field, text area, etc. However anything outside of that, like a button changing the model, then you need to push it yourself (at least thats been my experience). Below is an example...

In the SPEC file, you'll have something like:

Code: Select all

"dataProviderID" : { "type":"dataprovider", "pushToServer": "allow", "tags": { "scope": "design" }},

In the HTML you'll have something like:

Code: Select all

ng-click="onClick($event)"

In the JS you'll have something like this:

Code: Select all

   scope: {
          model: '=svyModel',
          handlers: "=svyHandlers",
          api: "=svyApi",
          svyServoyapi: "="
      },
      controller: function($scope, $element, $attrs) {
      },
      link: function (scope, element, attrs) {
          scope.onClick= function (event) {
                scope.svyServoyapi.apply('dataProviderID');
        };
      },

The "link" property in the JS is handling the click and pushing the change with scope.svyServoyapi.apply('dataProviderID') since svy-autoapply won't work in that scenario. You can hopefully tweak that to get what you need.

You can also see a more complex example in Servoy's combobox: https://github.com/Servoy/servoy-client ... ombobox.js