How can we help you today?

Known Issue: Incorrect Date Format on ShortPoint Design Elements

If you have a ShortPoint Design Element that is connected to a SharePoint library and you have set the SharePoint Regional Setting to show a different date format, but ShortPoint is not showing the customizations that you applied, then this article would be definitely helpful for you.


One example that we are going to show in this article, is when you are trying to change the date format to show DD/MM/YYYY but it is still showing MM/DD/YYYY on your ShortPoint Design Elements. 


SharePoint List
Actual Result
Sample SharePoint listSample ShortPoint actual result


Note: For the purpose of this article, we are using the Modified column, but this article is not limited to Modified column only, you can use this solution for any date column you want.

TABLE OF CONTENTS



Reason


ShortPoint may not be able to display the date format that you set in the SharePoint Regional Settings and this will most likely happen for on premise environments. Please know that this issue is just temporary and we will be fixing it with our new release. 


In the Connect tab, you will find that only the News and the Outlook connection are the ones that can give you option to modify the dates for on premise environments. However, Date Lists and Events Design Element can also give you an option to modify or fix date format issues as these Design Elements are intended to display date/time information.


Note: Here are some support articles that we have created for you to learn more about Date Lists and Events Design Element.

Solution


This workaround will show you how to modify the date format using REST API. If you are using any type of connection to your ShortPoint Design Element, please disconnect it as we will be showing the solution as we go along this article.


In this example, we will be using the Simple List Design Element.


Note: You may check out this support article we have if you want to know more about REST API connection.

Step 1. Set up REST API connection


On your Simple List Design Element, open its settings and switch to the Connect tab. Choose REST API from the connection types:


Choose REST API from the connection tab


In the REST API URL, paste the following URL (items highlighted with red and yellow require editing):


https://siteURL/_api/web/lists/getByTitle('ListTitle')/items


  • siteURL - should be replaced with the site URL (root site, site collection, subsite) where the SharePoint list is located;
  • ListTitle - should be replaced with the SharePoint list/library title you would like to connect to.


For example, our REST API URL looks like this:


https://mycompany.sharepoint.com/_api/web/lists/getbytitle('Documents')/items


Where:


  • mycompany.sharepoint.com is the site collection URL where our SharePoint library is located;
  • Documents is the title of our SharePoint library.

Step 2.  Update the date format


Once the REST API URL has been pasted, switch the toggle button to Enable Advanced Settings:


Enable advanced settings


Here is the mapping function that we will be using (Items highlighted in green and red requires editing):


var moment = shortpoint.base.libs.moment;


data.d.results.forEach(function(item) {


  item.columnName = moment(item.columnName).format('datetimeformat');


});


return data;


  • columnName - should be replaced with the date column name that we will be updating the date format;
  • datetimeformat - should be replaced with the date format you would like to use.


For example, in our case, the mapping function will look like this:


var moment = shortpoint.base.libs.moment;


data.d.results.forEach(function(item) {


  item.Modified = moment(item.Modified).format('DD/MM/YYY');


});


return data;


Where: 


  • Modified is the name of the date column from our sample SharePoint list that we will be updating the date format for;
  • DD/MM/YYYY is the custom date format, that represents date in day of month, Month name, year format (e.g., 02/08/2021).


Information: You may also use date formats such as 'LLL' or 'dddd'. By visiting Moment.js website, you will be seeing information about other date formats and the information they will represent in your site.


Scroll down to the Map Results field and paste the copied code block:


Paste the code block in the Map Results field


Click Connect and wait for the connection to be successful. 


Step 3: Map the items


Once connection is successful, you my now map the items that you want to present in your site. In this example, our SharePoint date column is named Modified, so we will only be needing to map that as well as its Title.


Switch to the Items tab and select the column that you want to map.


Map the Items from your SharePoint list


You may click the Preview button if you want to see the changes, then click the Update button once you are satisfied with how it looks.


That's it, you should now see the updated date format on your Design Element after using the REST API connection.


Result after applying the workaround


Related articles:


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 28 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more