How can we help you today?

How to Format Date and Time in ShortPoint REST API Connection Query Results

If you are using ShortPoint REST API Connection and would like to change the date/time format instead of showing it in ISO format, this article is for you.


BeforeAfter



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


Step 1. Set up REST API connection


Add ShortPoint Design Element to your page (we will be using Simple Lists Design Element as example). 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 redyellow and green require editing):


https://siteURL/_api/web/lists/getByTitle('listTitle')/items?$select=columnName,FileLeafRef

  • 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;
  • columnName - should be replaced with the date/time column name that we will be updating the date/time format.


For example, our REST API URL looks like this:

https://mycompany.sharepoint.com/_api/web/lists/getbytitle('Documents')/items?$select=Modified,FileLeafRef

where:

  • mycompany.sharepoint.com is the site collection URL where our SharePoint library is located;
  • Documents is the title of our SharePoint library;
  • Modified is the name of the date/time column we will be updating the date/time format for.

Step 2. Update the date format


If you click Connect and wait for the connection to load, you will see your date/time column in ISO format in the Data Example field:



To change the date/time format, click Disconnect and then Enable Advanced Settings:



Here is the mapping function that we will be using (items highlighted with red and yellow require 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/time column name that we will be updating the date/time format;
  • dateTimeFormat - should be replaced with the date/time 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('LLL');

});

return data;

where:

  • Modified is the name of the date/time column we will be updating the date/time format for;
  • LLL is the custom date/time format, that represents date in Month name, day of month, year, time format (e.g., September 4, 1986 8:30 PM).


To get yourself familiar with other custom date and time formats, supported by ShortPoint, check our solution article on How to Use Custom Date and Time Formats with ShortPoint Design Elements. 
You may also follow this article if you want to change the date and time formats for News and Outlook Connection Types.



Note: You can also format date and time for multiple columns (in such case, do not forget to include all necessary columns to the REST API URL configuration). Then, your code will look similar to this:

var moment = shortpoint.base.libs.moment;
data.d.results.forEach(function(item) {
  item.columnName1 = moment(item.columnName1).format('dateTimeFormat');
  item.columnName2 = moment(item.columnName2).format('dateTimeFormat');
});
return data;


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



Click Connect and wait for connection to load:



After you see that the connection is set up, proceed to the next step to map the items.



Step 3. Map the Items


Switch to the Items tab:



Press the chain icon on the right of the Design Element field (for example, Title) and select which column of your SharePoint List or Library correspond to it:



Note: Check our ShortPoint Connect: Basic Tutorial to know more about ShortPoint Connect and Items Mapping.


In our example we have mapped Title with the FileLeafRef (document title), and Subtitle with the Modified columns.



You may click the Preview button to check the results:



Then, click Insert/Update and save your page:



That's it! Happy connecting.


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 25 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