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 |
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:
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:
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:
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.
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.
Related articles:
- How to Display Start Date and End Date in the Same Size in Events Design Element
- Difference Between the Item URL and Item Dialog URL in ShortPoint Connections
- Connection Type: Site News
- How to Format Date and Time in ShortPoint REST API Connection Query Results