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

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
• Step 2. Update the date format
• Step 3. Map the Items

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

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;

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:

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