Polymer cuba-entity-form problem in nested entity

[nur.assanali]

I got a cuba-entity-form for the RequestJoin entity.
Here is my portal-request-join-edit.html with the code inside it.

This is the screen of that html

So the problem is in the power field. When i put the value there, it doesn’t save in database.
However, the “Successfully saved” message appears. Meanwhile, there log in tomcat
Entity portal$RequestJoin doesn’t contain a ‘_instanceName’ property
Entity portal$Customer doesn’t contain a ‘_instanceName’ property

This is requestJoin-edit-view

So the question is how can i create nested object and than put the value in nested field?

Sorry for my English.
Maybe this is an obvious issue but i’m a junior

[minaev (Vladislav Minaev)]

Hi, the problem is that initially the customer property is empty so data-binding does not work. You should initialize it with empty object. Here is an example of such preparation: polymer-data-samples/pld-service-form.html at master · cuba-labs/polymer-data-samples · GitHub

[nur.assanali]

Hi, Vlad. Thank you for the answer
I tried your suggestion, but i did something wrong. It still doesn’t create new Customer and doesn’t save the value for the power field.
Also, my enumerators(reason, consumption) doesn’t load anymore.
I tried load them using this.app.loadEnums but unsuccessfully.
How should i initialize nested custom and enums(reason, consumption)?

Other fields are ok.
Here is the code of my page

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/cuba-app/cuba-localize-behavior.html">
<link rel="import" href="../../bower_components/cuba-ui/cuba-entity-edit-view-behavior.html">
<link rel="import" href="../../bower_components/cuba-data/cuba-entity.html">
<link rel="import" href="../../bower_components/cuba-form/cuba-entity-form.html">
<link rel="import" href="../../bower_components/cuba-styles/cuba-styles.html">

<link rel="import" href="../../bower_components/cuba-ui/cuba-lookup.html">

<link rel="import" href="../../bower_components/cuba-data/cuba-entities.html">

<link rel="import" href="../../bower_components/vaadin-combo-box/vaadin-combo-box.html">

<link rel="import" href="../../bower_components/paper-input/paper-input.html">

<link rel="import" href="../shared-styles.html">

<dom-module id="portal-request-join-edit2">
  <template>
    <style include="cuba-styles"></style>
    <style include="shared-styles"></style>
    <style>
      paper-card {
        display: block;
      }
    </style>

    <cuba-entity entity-name="portal$RequestJoin" entity-id="[[entityId]]" view="requestJoin-edit-view" data="{{entity}}"></cuba-entity>
    <cuba-entity-form id="form"
                      entity-name="portal$RequestJoin"
                      entity="{{entity}}"
                      on-cuba-form-response="_onSuccess"
                      on-cuba-form-error="_onError"
                      server-errors="{{serverErrors}}">
      <paper-card>
        <div class="card-content">

          <paper-input value="{{entity.customer.power}}"
                       label="[[msg('power')]]"
                       
                       maxlength="255" 
                       error-message="[[serverErrors.customer]]"
                       invalid="[[_isInvalid(serverErrors.customer)]]">
          </paper-input>
          
          <paper-input value="{{entity.address}}"
                       label="[[msg('address')]]"
                       
                       maxlength="255" 
                       error-message="[[serverErrors.address]]"
                       invalid="[[_isInvalid(serverErrors.address)]]">
          </paper-input>
          
          <vaadin-combo-box label="[[msg('reason')]]"
                            items="[[enumValues('kz.ensoft.portal.entity.IssuanceReasonEnum')]]"
                            value="{{entity.reason}}"
                            error-message="[[serverErrors.reason]]"
                            invalid="[[_isInvalid(serverErrors.reason)]]"
                            >
          </vaadin-combo-box>
          
          <vaadin-combo-box label="[[msg('consumption')]]"
                            items="[[enumValues('kz.ensoft.portal.entity.NatureConsumptionEnum')]]"
                            value="{{entity.consumption}}"
                            error-message="[[serverErrors.consumption]]"
                            invalid="[[_isInvalid(serverErrors.consumption)]]"
                            >
          </vaadin-combo-box>
          
          <paper-input value="{{entity.objectName}}"
                       label="[[msg('objectName')]]"
                       
                       maxlength="255" 
                       error-message="[[serverErrors.objectName]]"
                       invalid="[[_isInvalid(serverErrors.objectName)]]">
          </paper-input>
          
          <paper-input value="{{entity.issuanceReasonNote}}"
                       label="[[msg('issuanceReasonNote')]]"
                       
                       maxlength="255" 
                       error-message="[[serverErrors.issuanceReasonNote]]"
                       invalid="[[_isInvalid(serverErrors.issuanceReasonNote)]]">
          </paper-input>
        </div>
        <div class="card-actions">
          <paper-button on-tap="_delete" hidden$="[[!entityId]]">
            [[msg('Delete')]]
          </paper-button>
          <paper-button on-tap="_cancel">
            [[msg('Cancel')]]
          </paper-button>
          <paper-button on-tap="_save">
            [[msg('Save')]]
          </paper-button>
        </div>
      </paper-card>
    </cuba-entity-form>

    <paper-toast id="errorMessage" horizontal-align="right">[[msg('Failed to save')]]</paper-toast>

  </template>
  <script>
    {
      /**
       * @extends {Polymer.Element}
       * @appliesMixin CubaLocalizeBehavior
       * @appliesMixin CubaEntityEditViewBehavior
       */
      class PortalRequestJoinEdit2 extends Polymer.mixinBehaviors([CubaLocalizeBehavior, CubaEntityEditViewBehavior], Polymer.Element) {

        static get is() { return 'portal-request-join-edit2'; }
        
        static get properties() {
          return {
            entity: {
              type: Object,
              value: function() {
                return createCustomer();
              }
            }
          }
        }
        
        createCustomer() {
          customer: null
        }

      }

      customElements.define(PortalRequestJoinEdit2.is, PortalRequestJoinEdit2);
    }
  </script>
</dom-module>

[nur.assanali]

Dear, Vlad
Could you reply to my question above, please

[minaev (Vladislav Minaev)]

@nur.assanali
Hi, sorry for the delay.

I’ve made an example for you: GitHub - cuba-labs/polymer-data-samples at nested-entity

Please see pld-create-order component.

I think in your particular case createCustomer should be changed to:

createCustomer() {
 customer: {}
}

Also make sure your customer attribute type is Composition

[nur.assanali]

Vlad, your solution was really helpful. I understand a lot. Thank you very much.
I just create new html and implement all the things as in your sample, push it directly to the menu and it works.
It creates nested customer and saves values.

Файл из Облака Mail.ru

But actually, I create Polymer UI screens using cuba-studio. They are not so easy
I mean i click Polimer UI → New → Entity-Management → Select appropriate views and finally tap on ‘Create’ button.
Then studio creates three html: edit, list, management.
And then i do all the same staff for edit-page:
write

        createCustomer() {
             customer: {}
        }

in edit.html
It doesn’t work. I suppose i should do something in management.html, because edit-page calls from it.
But i don’t know what exactly.
Here they are https://cloud.mail.ru/public/Jovm/WbqRsRjNN
Maybe you could make sample about nested object with entity-management functionality?
I will be so gratefull

[nur.assanali]

Dear, Vald
please help

[minaev (Vladislav Minaev)]

Hi, sorry for the late answer:

In order to initialize customer in -edit component you should bear in mind that it could be loaded (via cuba-entity). You can initialize customer sub-property using Polymer’s observer e.g.:

class PortalRequestJoinEdit ...

  static get observers() { // https://www.polymer-project.org/2.0/docs/devguide/observers#complex-observers
    return [
      'entityChanged(entity)'
    ]
  }

  entityChanged(entity) {
    if (entity != null && entity.customer == null) {
      this.set("entity.customer", {}); // https://www.polymer-project.org/2.0/docs/devguide/data-binding#path-binding
    }
  }

Also double-check that type of customer attribute is Composition.