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.

Before	After

The example presented above is just one of the many date formats that you can modify and display using ShortPoint REST API connection. Please follow the rest of the instructions in this article.

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

• Before we begin
• Step 1. Set up REST API connection
• Step 2. Update the date format
• Step 3. Map the Items

Before we begin:

• We recommend you always have the latest version installed. Visit our Download ShortPoint page to get the latest version of ShortPoint, or you can use the ShortPoint SPFx Auto Upgrade Feature to ensure you always have the latest version. 
• You have ShortPoint installed on your SharePoint site(s).
• You are a ShortPoint user with an active license.

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 red, yellow 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

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;

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). If you are looking for a different representation of this format, you may refer to this to these samples below: 

To view full the information regarding this type of format, please go the Moments.js website. However, if you are having issues with your desired date output even when you already set it from the SharePoint Regional Settings, you may take a look at Incorrect Date Format on ShortPoint Design Elements.

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:

• ShortPoint Connect: Basic Tutorial
• Connection Type: REST API
• How to Use Custom Date and Time Formats with ShortPoint Design Elements