Skip to Content
Author's profile photo Former Member

Trigger Server roundtrip for date field

The date picker for a date input field is made using javascript on client side. To trigger a round trip , you have to write some code on client side.

Code mentioned below has to be written on .htm page of the view.

 

<script>

thtmlbCalendar.pick = function(e) {

var o = (e.target) ? e.target : e.srcElement;

var sId = this.lastInstance;

var oInput = thtmlbGetElement(sId);

if (o.id === “currentDate”) {

e.cancelBubble=true;

return;

}

var currentDateValue = document.getElementById(‘currentDate’).value;

while (o.tagName != “TD”) {

o = o.parentNode;

if (o == null){

return;

}

}

var sDay = o.id;

if (sDay==null || sDay==“”){

return;

}

if (sDay) {

var aDate = sDay.split(“-“);

var arrValue = [];

arrValue[0]=parseInt(aDate[2]);

arrValue[1]=parseInt(aDate[1]);

arrValue[2]=parseInt(aDate[0], 10);

var newValue = this.getFormattedDate(arrValue[0], arrValue[1], arrValue[2]);

thtmlbSetInputFieldAttribute(oInput, ‘encodedValue’, newValue);

e.cancelBubble=true;

oInput.focus();

this.hide();

var element_event = sId + “:submitonenter”;

htmlbSL(this,2,element_event,‘0’);

}

};

</script>

 

You don’t need to change anything in the above code.

 

If you want to avoid writing the code on .htm page then you can also write the above code in a js file and upload in your component through tcode se80->MIME repository->SAP->BC->BSP->SAP->Your component name->right click for Import MIME Objects->select your JS file.

After the js file upload is complete, include js file in your htm page.

 

<script type=“text/javascript” src=“/sap/bc/bsp/sap/your_compoent_name/your_js_name.js”></script>

 

Thanks and Regards,

Ritu

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Thank you! Worked like a charm! 🙂

      Author's profile photo Former Member
      Former Member

      Was stuck at this part for a long time. It works perfectly.Thanks a ton Ritu 🙂

      Author's profile photo André Borck
      André Borck

      Thanks for this solution. I have developed it a bit further.

      Sharing my  approach:

      <script>
         $(
           function( ){
             var dateField = thtmlbGetElement("<%= controller->component_id %>_myDateField");
       
             if ( dateField ){
               dateField.addEventListener( "keyup", eventHandlerFct );
       
               var oldPickFct = thtmlbCalendar.pick;
               thtmlbCalendar.pick = function( e ){
                 oldPickFct.apply( this, new Array( e ) );
                 eventHandlerFct( );
               };
             }
       
             function eventHandlerFct( e ){
      
               if ( e ){
                 var code = ( e.keyCode || e.which );
       
                 if ( code == 37 || code == 38 || code == 39 || code == 40 )
                   return;
               }
       
               var strLen = dateField.value.toString().length;
               if ( strLen == 0 || strLen == 10 ){
                 var inpFieldDate = dateField;
                 var inpFieldDateEventName = inpFieldDate.id + ":submitonenter";
                 return htmlbSL( inpFieldDate, 2, inpFieldDateEventName, '0');
               }
             }
           }
         );
       </script>

      This will trigger submitonenter when the user picks a date with the date picker and also when entering a value in the date input field.

      As you see the main part has been reduced to:

      var oldPickFct = thtmlbCalendar.pick;
      thtmlbCalendar.pick = function( e ){
        oldPickFct.apply( this, new Array( e ) );
        eventHandlerFct( );
      };
      Author's profile photo Former Member
      Former Member

      Hi Andre,

      I tried implementing the same for table view but its nor working. Do you have idea how can it work for a date field on a table view? I think there is an issue with the element id. My table field name is 'CONTSTART' so is the below statement correct?

      " var dateField = thtmlbGetElement("<%= controller->component_id %>CONTSTART");"

       

      Thanks & Regards,

      Ajeet Gautam

       

      Author's profile photo Jakub Wozniak
      Jakub Wozniak

      Hi,

       

      I used Andre´s approach and found out myDateField value like so:

       

      1. display WEB UI in place where you want to enhance date field and go to Developers Tools in browser (F12)
      2. put a breakpoint where variable displayedDate is getting filled (I searched for datePicker and looked through code)
      3. then I used Select element functionality and pointed to my date field

       

      Like so, I was able to find out how my field name is being comprised (e.g. _btdate_table[2].date_from)

       

       

      But I found out another complication, since I used this JavaScript code, I am unable to select year from the datePicker manualy. Whenever I try to write different year on Web UI, it fires server roundtrip. Somehow I have a feeling it is due to the fact, that year column is directly in front of the field that is being handled. But I am still rather unsure. It would be nice if someone gave a feedback, whether they have encoutered something similar during implementation.

       

      Best Regards.

      Author's profile photo satya siva prasad kondiparthy
      satya siva prasad kondiparthy

      Hi,

       

      Now i have implemented the code and unfortunately server event is getting triggered only for transactions which are already stored in database from webUI. Means that if i go to Solution manager web UI and navigate to already existing charm ID and select a date from calendar its working fine, but if we are creating charm in WEB UI then if we select calendar then it is not working.

      I am not sure where it is going wrong, Could you please help me here.

      Thanks

      Best Regards,