Changing values in polymer using javascript

Support
#1

Hey,

I have been trying to get todays date written to an object using JavaScript in my polymer screens. I have found some information on this in the tutorial from Cuba Studio here: CUBA Platform. Polymer UI Tutorial

The issue is that I can’t seem to get this working properly. What I want is to use a paper card, and when it is pressed it will change the value of laatstUitgevoerd (means last executed) to today’s date. The part where I call the method on press of the paper card works properly, but I can’t get seem to get the correct JavaScript code for changing the value of laatstUitgevoerd into today’s date.

In the tutorial it states that I should use: this.set('user.name', 'value');

In my case this would be: this.set('onderhoudsregel.laatstuitgevoerd', 'today');

But this will not work, I defined the variable today before as var today = new Date(); in order to get today’s date.

I have also tried different syntax for the laatstUitgevoerd and today in JavaScript like [[item.laatstuitgevoerd]], item.onderhoudsregel.laatstuitgevoerd, ‘[[laatstuitgevoerd]]’ and pretty much any combination of these.

What am I doing wrong here? Or is the Date datatype from JavaScript not compatible with the Date datatype from Cuba?

The total code for this screen looks like this (to give you all information)

<dom-module id="machineonderhoud-onderhoudsregel-cards">
  <template>
    <style include="cuba-styles"></style>
    <style include="shared-styles"></style>
    <style>
      :host {
        display: block;
      }
      paper-card {
        cursor: pointer;
      }
    </style>

    <cuba-entities id="data"
                   entity-name="machineonderhoud$Onderhoudsregel"
                   data="{{entities}}"
                   view="onderhoudsregel-view-browse"
                   loading="{{dataLoading}}"
                   limit="10"
                   provide-count="true"
                   count="{{entitiesCount}}"
                   auto="[[active]]">
    </cuba-entities>

    <iron-selector id="selector" on-iron-activate="_handleSelectionChange">
      <template id="entitiesList" is="dom-repeat" items="{{entities}}" filter="isNeeded" observe="type item.prioriteit">
        <paper-card heading="[[item.taak]] op [[item.machine.code]]" on-tap="regelAfronden" class="page-widget">
          <div class="card-content">
            
            <b>Laatst uitgevoerd</b>: [[item.laatstuitgevoerd]]<br>
            <br>
            <b>Prioriteit</b>: [[item.prioriteit]]<br>
            <br>
            <b>ID</b>: [[item._instanceName]]<br>
			
				  
          </div>
        </paper-card>
      </template>
    </iron-selector>

    <vaadin-button on-tap="_loadMore" class="load-more" hidden$="[[!moreDataAvailable]]">
      [[msg('Load more')]]
    </vaadin-button>

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

        static get is() { return 'machineonderhoud-onderhoudsregel-cards' }
		
		isNeeded(item) 	{
          return item.prioriteit > '0' && item.instructieNodig == false;
		}
		
		regelAfronden() {
			var today = new Date();
			if (confirm("Wil je de regel afronden?")) {
				this.set('onderhoudsregel.laatstuitgevoerd', 'today');
			}
			else {
			}
			
		}
		
	  }	
		
      customElements.define(MachineonderhoudOnderhoudsregelCards.is, MachineonderhoudOnderhoudsregelCards);
		
	}
  </script>
</dom-module>
#3

Try today without quotes, you are setting the string 'today' not the content of the var today

Paolo

2 Likes
#4

Hey Paolo,

Thank you for the help. I have tried this as well and unfortunately it did not change the result. You are right though and I should use today without quotes.

I did find out that Java and JavaScript dates are different, and that one method could be converting the Java date to milliseconds and then to the JavaScript format. (Java date format to JavaScript date format - Stack Overflow)

But I am wondering if the onderhoudsregel.laatstuitgevoerd is still in the Java format or somehow got converted into the JavaScript format along the way already by the framework because it is being used in Polymer.

#5

Yes, date/time serialization/deserialization is a common issue when two foreign platforms need to interop. Another problem you need to plan ahead is timezones. If the users of your polymer client will be always in the same timezone as your server, then you can ignore this issue, otherwise you need to take TZ conversions into account.

Unfortunately I never used the built-in JS libraries that CUBA framework provides, I’ve always built my client-side SPAs from scratch.
If you plan to build some non-trivial SPAs where dates/times play an important role, I suggest you to study and implement the http://momentjs.com/ library, as already suggested in that SO thread. When I need TZ conversions, I also add the Moment Timezone | Home to the mix.

Regarding your specific problem, dates are serialized into strings when Java->JSON serialization is performed on the server, and vice-versa when you send an update from the client back to the server (JSON->Java).
Normally this conversion should be done “transparently” by the service/data layer on your SPA, that is the framework (or you) should put the serialization/deserialization logic in a central place, so you can deal only with plain Date JS objects in your code (or moment instances like I do in my apps, because plain Date objects are too “dumb” and they do not carry TZ data needed in internationalized apps).

Given that I don’t know how the CUBA polymer client implements this “service/data layer” I cannot help you more, but IMHO this Date <-> String conversion should be already in place when making REST calls, so maybe there’s something else wrong with your setup (but it’s only a speculation though).

1 Like
#6

Paolo,

Thanks for the extended explanation, it really helps to understand the situation bit better. I will definitely be using the http://momentjs.com/ library in this project since it is pretty much centered around dates (it’s a planner for when workplace machinery needs certain maintenance done, and mechanics should use the Polymer front-end to say that certain tasks have been executed by setting the last executed date to today).

With your feedback I am actually considering adding the time to this as well. Right now they simply set the date field themselves with a fieldpicker, and I didn’t want to give them the hassle to have to pick both a date and a specific time. But since this will be automated with the function, I might as well add the time to this. This could give additional insights in how long certain tasks would take.

I’ll try and take a different approach to see if it is something related to my setup. Until I find something I will leave this forum post open. Maybe one of the Cuba employees can help me further with the way this is implemented on the framework.

Thanks a lot!