Any idea to manipulate date conversion in grid to show Budd

Hi Tawachai,

Is your use case is to just display records?  Or includes any further processing?

-Mani

Make trigger on field of date (Either On Create or On Update), then add required value in Date.

Hi Mani,

For Display only. But , to store on Database , we must use AD. Because all DAtabase didn't support Buddhist Year stored.

If you want this to be applied on all formatted dates on a page, you can employ a client-side override. Add a script component (at the top of the page containing ListView i.e. Grid component OR for all application pages add to custom header), as follows:

<script>

//manipulate dates i.e. +543 years

rb.newui.util.origformatDate = rb.newui.util.formatDate;

rb.newui.util.formatDate = function(date,useFullDate){

 if(!rb.newui.util.isDate(date)){

// null or invalid date

return "";

}

 date.setFullYear(date.getFullYear()+543);

 return rb.newui.util.origformatDate(date,useFullDate);

};

</script>  

Note: This will only manipulate display values for Dates.

Hi Siraj,

Thank you. it work well when I put the code into individual page.

But din't work when I add to custom header.  How can I debug this.

PS: where can I learn more about rb.newui.xxxxx command. eg. If I would like change format display from mm/dd/yyyy to dd/mm/yyyy from this command, is it possible to do ?

 From Rollbase user guide , I could not find it.

Regards,

Tawatchai

For all application pages, can you please add it to custom sidebar (App Settings -> Custom Sidebar). Ideally, it should also work when added as custom header. However, there seems to be an issue around it which will be resolved in the forthcoming releases.

Shortly, will also share details for taking date inputs on client-side in Buddhist calendar (i.e. form pages). However, on form submit, Rollbase will still process them as Gregorian Calendar date inputs. That is, we will only  target  a client-side customization..

Hi Siraj,

I'm waiting for your share detail about date input (Buddhist).

And May I know how can we override date format from client-side.

TIA.

For Client-side customizations for Buddhist calendar, there are two aspects to consider.

One is, translating all date literals that are displayed on page as per Buddhist calendar.

Second is ability to enter Buddhist Calendar dates in Rollbase form pages.

For the first, have already shared a solution. Can you please confirm that the code snippet shared earlier works well across all application pages when added as a Custom Sidebar.

For the second, still need to work it out. Request you to reach out to Rollbase Technical Support & file an RFA for the same. This way we will be able to better assist you on this requirement. Also, we may need to have Screen sharing sessions while working on & sharing a solution.

Hi Siraj,

For the first,  the code that you share, I put into "Custom Sidebar" to apply to all page.  It works very well on field that has date only. But for field that show date time, it didn't apply.  

one more requirement on this, it's about date format. We need to show format as 'dd/mm/yyyy'. But currently format display still 'mm/dd/yyyy'. From current version ,I cannot use Thai localization to default display it. Because it has  to it has pending defect # 35800.  Is there any way to override localization sformat setting ?  

Pleas see attach image below.

for the second, I got your tech support ticketing. And if you would like to have more requirement, please feelf ree to contact direct to me.

Regards,

Tawatchai. 

Thanks for the confirmation.

Yes, we need to enhance the scripting solution to make it work for DateTime fields as well. Please use the following script in Custom Sidebar for both Date & DateTime field types:

<script>

//manipulate dates i.e. +543 years

rb.newui.util.origformatDate = rb.newui.util.formatDate;

rb.newui.util.formatDate = function (date, useFullDate) {

 if (!rb.newui.util.isDate(date)) {

   // null or invalid date

   return '';

 }

 date.setFullYear(date.getFullYear() + 543);

 return rb.newui.util.origformatDate(date, useFullDate);

};

//manipulate dates i.e. +543 years

rb.newui.util.origformatDateTime = rb.newui.util.formatDateTime;

rb.newui.util.formatDateTime = function (date, useFullDate) {

 if (!rb.newui.util.isDate(date)) {

   // null or invalid date

   return '';

 }

 date.setFullYear(date.getFullYear() + 543);

 return rb.newui.util.origformatDateTime(date, useFullDate);

};

</script>

Note: This will affect all application pages & not just the list view (i.e. grid).

Next, for the form pages, as stated earlier will work out a solution & revert back to your Support Ticket shortly.

Hi Siraj,

From your last code is working fine both Date and DateTime field in Grid as shown in attached .

But, on view page the date field  and on audit trail page date time field didn't convert to Buddhist era as expected.

View page:

View Audit Trail Page:

How can we fix this ?

Regards,

Tawatchai

Hi Thierry,

Thank you for your information.

Regards,

Tawatchai

Hi Siraj,

Please se my post on Posted by tawatchai

on 11 Mar 2016 10:47.  How can I make current code  impact to other page (View page and Audit trail page).

TIA,

Tawatchai

The solution should work on all application pages i.e. list page as well as view page.

Can you make this change for the script component that you are adding to Custom Sidebar:

<script id="executeBeforeUIStarts">

//Add id attribute as stated above.

This will ensure that the script modifications are always picked up, even when you are navigating from one page to another with Ajax based navigation Turned ON.

Regarding Audit Trail page, this is one place where it will not work. Even in NUI pages, there are some cases like Audit Trail wherein we embed HTML generated on server side directly into the page. As our solution is basically as client-side solution, it will not be able to transform the Date literals as per Buddhist Calendar for such cases.

Hi Siraj,

After place <script id="executeBeforeUIStarts">  , this work well on every page.

Thank you.

Tawatchai

We have worked out a client-side scripting solution for Buddhist Calendar. Such that, on all application pages (few exceptions like Audit Trail component) we will present Date literals in Buddhist Calendar. That is on client-side we will tranform the dates  as per Buddhist Calendar from Gregorian Calendar.

Also, on form pages we have added a plugin 'bdc' for kendoDatePicker & kendoDateTimePicker widgets from kendo library so as to make it work with Buddhist Calendar.

Summary of changes done in this regard:

1. Alter min & max restrictions (i.e. +543).

2. Also remove footer template in Calendar

3. Advance any current value set by 543 years..

Next, on every page load, we find out form fields (i.e. if form is available) which are of type 'DateInput' & 'DateTimeInput', & call this plugin on the respective's field's control to affect Buddhist Calendar support. Also, on form submit, we normalize the values back into Gregorian Calendar.

Given below is the scripting solution which needs to be included on every Application page via App Settings  -> Custom Sidebar.

<script id="executeBeforeUIStarts">

//on view pages...manipulate dates i.e. +543 years

rb.newui.util.origformatDate = rb.newui.util.formatDate;

rb.newui.util.formatDate = function (date, useFullDate) {

 if (!rb.newui.util.isDate(date)) {

   // null or invalid date

   return '';

 }

 date.setFullYear(date.getFullYear() + 543);

 return rb.newui.util.origformatDate(date, useFullDate);

};

//on view pages... manipulate dates i.e. +543 years

rb.newui.util.origformatDateTime = rb.newui.util.formatDateTime;

rb.newui.util.formatDateTime = function (date, useFullDate) {

 if (!rb.newui.util.isDate(date)) {

   // null or invalid date

   return '';

 }

 date.setFullYear(date.getFullYear() + 543);

 return rb.newui.util.origformatDateTime(date, useFullDate);

};

//defining bdc plugin for supporting Buddhist Calendar in kendoDatePicker & kendoDateTimePicker widgets..

(function ($) {

 var BDC_YEAR_VARIATION = 543;

 var kendo = window.kendo,

 ui = kendo.ui,

 Widget = ui.DatePicker,

 Widget2 = ui.DateTimePicker;

 $.extend(Widget.fn, {

   bdc: bdc

 });

 $.extend(Widget2.fn, {

   bdc: bdc

 });

 function bdc() {

   //as part of supporting Buddhist Calendar.. alter min & max restrictions (i.e. +543).

   //also remove footer template in Calendar

   //advance any current value set by 543 years..

   var options = this.options;

   var min = options.min;

   min.setFullYear(min.getFullYear() + BDC_YEAR_VARIATION);

   var max = options.max;

   max.setFullYear(max.getFullYear() + BDC_YEAR_VARIATION);

   var currValue = this.value();

   if (currValue) {

     currValue.setFullYear(currValue.getFullYear() + BDC_YEAR_VARIATION);

   }

   options.footer = false;

   this.value(null);

   this.setOptions(options);

   currValue && this.value(currValue);

 }

}) (jQuery);

//on page load... call bdc plugin on kendoDatePicker & kendoDateTimePicker widgets..

//also.. attach a submit handler... which will normalize date widget values back to Gregorian calendar at the time of submit..

rb.newui.util.addEventListener(rb.newui.util.customEvents.rbs_pageRender, function () {

 bdcOnPageLoad();

 function bdcOnPageLoad() {

   try {

     var pageContext = rbf_getPageContext();

     var locContext = pageContext.getPageLocalization();

     var formObj = rbf_getObjectRecordForm();

     var dateFields = getAllDateFields();

     for (var j = 0; j < dateFields.length; j++) {

       var fieldContext = dateFields[j];

       var kConfig = fieldContext && fieldContext.getKendoConfig();

       //call bdc plugin kendo date widgets..

       kConfig && kConfig.bdc && kConfig.bdc();

     }

     formObj && formObj.addSubmitHandler(onFormSubmit);

   }

   catch (err) {

     rb.newui.util.logErrorToConsole('Error initiazing kendo date widgets with Buddhist Calendar Support\n' + err);

   }

   function onFormSubmit(event) {

     if (event.validationStatus) {

       for (var j = 0; j < dateFields.length; j++) {

         var fieldContext = dateFields[j];

         var date = fieldContext && fieldContext.getValue();

         if (date) {

           //normalize dates back to gregorian calendar..

           date.setFullYear(date.getFullYear() - 543);

           var dateLiteral = rbf_formatDate(date, getEditFormat(fieldContext));

           fieldContext.getNode().val(dateLiteral);

         }

       }

     }

     return true;

   }

   function getEditFormat(fieldContext) {

     return fieldContext.getFieldType() === 'DateInput' ? locContext.getDateEditFormat()  : locContext.getDateTimeEditFormat();

   }

   function getAllDateFields() {

     var dateFields = [

     ];

     var allFields = formObj && formObj.getAllFields();

     for (var j = 0; j < ((allFields && allFields.length) || 0); j++) {

       var fieldContext = allFields[j];

       var fType = fieldContext && fieldContext.getFieldType();

       if (fType === 'DateInput' || fType === 'DateTimeInput') {

         dateFields[dateFields.length] = allFields[j];

       }

     }

     return dateFields;

   }

 }

});

</script>