The author of this article is Courtney Dascenzo, Principal Technical Evangelist with ISV Partner Enablement Team
In part one of this series, we covered how to leverage some of the settings from the user’s profile in Salesforce to control the locale settings in angularJS. In this post, we will build off that initial example and extend it to cover time zone conversions. This will enable us to see all the data presented to the logged in user in that user’s time zone. This example could be further extended to allow the logged in user to see the data presented in another user’s time zone. An example of this is if an activity, task, or event needs to be assigned to a user in a different time zone, it is created in their time zone, not the time zone of who has created the activity. As long as the correct time zone is pulled from their profile, the new task is created in their time zone using the techniques outlined below.
Note: Be sure to reference the assumptions from part one of this series before continuing.
The default behavior in angularJS is to leverage the time zone setting in the browser. We do not want to depend on this to be correct so we are going to use the user’s time zone setting from their profile. In part one of this series, we stored this setting into a $rootScope variable:
1. Create a custom date filter in app.js file to leverage the Moment.js and Moment-Timezone libraries to do the conversion. Inject the $rootScope so you have access to the user’s time zone from their Salesforce profile. Pass in the date format that you want displayed as well.
2. Now you can display the date in the user’s time zone in the Visualforce page. You can use a Visualforce component to do this or straight HTML. ‘LLL’ is a Moment.js date format.
Example using Visualforce Component:
Example using just HTML:
1. To be able to use the <script> tag in your Visualforce page, include the JQuery.js file prior to including the angular.js file. Otherwise, angular will not recognize a <script> tag. It is best practice to use minified files.
4. Store the array as a $scope variable to be rendered in HTML and used elsewhere in angular.
5. Leverage the $scope variable in the HTML page (or Visualforce page).
The final option we evaluated for time zone conversion takes place in the Apex Controller. This assumes Visualforce Remoting is used, and not Remote Objects.
1. In the Remote Action of the Apex Controller, convert the DateTime field into the user’s time zone using the format() method. Note a String is returned.
3. Now you can use the newly created DateTime variable in a standard angular data filter in the HTML/Visualforce page.
An untested option that may exist is to leverage the TimeZone methods available in the DateUtil Class of the SfdcCore.js file available for download when header information is not shown in a Visualforce page. If you decide to experiment with this class, download the file and include it as a static resource in your project. Salesforce can change this file from release to release; so do not reference it dynamically.
This concludes part two on Internationalization Options in angularJS and Salesforce. Be sure to check out the next post in this series on Language Conversions.
Code samples for the whole series can be found in Github at: https://github.com/cdascenzo/salesforce_angular_internationalization
Don’t want to mess with the code? Spin up a trial and see the demo in action (some images do not resolve on the Heroku site, don’t worry, the signup still works): https://pacific-inlet-1581.herokuapp.com/