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
without Rest APIAfter applying Rest API


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


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:


Connect using REST API


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


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:


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). 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.



Format
L
                                   06/09/2014
l
                                   6/9/2014`
LL
                                   June 9 2014
ll
                                   Jun 9 2014
LLL
                                   June 9 2014 9:32 PM
lll
                                   Jun 9 2014 9:32 PM
LLLL
                                   Monday, June 9 2014 9:32PM
llll
                                   Mon, Jun 9 2014 9:32 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:


Map results


Click Connect and wait for connection to load:


Click connect button


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


Indicator when successfully connected


Step 3. Map the Items


Switch to the Items tab:


Map the items


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:


Map the title


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.


Map a subtitle


You may click the Preview button to check the results:


Click Preview


Then, click Insert/Update and save your page:


Insert the Design Element to save changes


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