How to prepare a javasript that shows only the last announcement item

Question

How to prepare a javasript that shows only the last announcement item

Gulnar 146

I want to do a javascript that can show only the last announcement in the middle of the main page and If there is no new announcement in the list it should show (no announcements)

Accepted answer

0 additional answers

Your answer

Answer 1

Amos Wu-MSFT 4,051

You could use Ajax to call Rest API to filter the announcement items.

/_api/web/lists/getbytitle('anno')/items?$filter=Created gt datetime'2020-09-01T00:00:00'

This Rest API will return all items created after 2020.09.01 00:00,you need to replace it with a js dynamically calculated value.Then you can show the latest item value in page if this Rest API returns values.
If your main page is a classic page,you could add a script editor in your page add script in it directly.
If your page is a modern page,you need to create a SPFX to achieve this.SPFX Document

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Gulnar 146 Reputation points

2020-09-14T07:03:49.947+00:00

I am new in programming field. How can I use Ajax? Can you show me a full example with images?
Amos Wu-MSFT 4,051 Reputation points

2020-09-14T07:09:26.757+00:00

What is the type of your page, modern page or classic page?
Gulnar 146 Reputation points

2020-09-15T07:51:36.663+00:00

classic page
Amos Wu-MSFT 4,051 Reputation points

2020-09-16T03:01:51.157+00:00

My test code for your reference:code.txt
Gulnar 146 Reputation points

2020-09-16T08:12:20.613+00:00

Thanks a lot. I tried your code but it doesn't work for me. And I don't want the announcement added within one hour to be add in the page as new announcwment. I need the last announcement added in the announcement list.
Amos Wu-MSFT 4,051 Reputation points

2020-09-16T08:23:03.033+00:00
If you only want to display the latest announcement and don’t care about the creation time, you can change the url to this：

/_api/web/lists/getbytitle('anno')/items?$orderby=Created desc
Gulnar 146 Reputation points

2020-09-16T15:39:03.477+00:00

So, how can I add a message using Javascript for if there is no announcement that can show (no new announcement)?
I will try it tomorrow and I will tell you the results
Amos Wu-MSFT 4,051 Reputation points

2020-09-17T05:45:50.74+00:00
If there is no announcement,you could add following code into success callback function:

if (data.d.results.length == 0) { $("#content").html("There is no announcement") }

The code I shared you would display the recently created item in the announcement list on the page.
Don’t forget to use your list title in the rest.
Gulnar 146 Reputation points

2020-09-21T10:27:09.107+00:00

I tried many times, the code is not working for me :(
Amos Wu-MSFT 4,051 Reputation points

2020-09-22T01:31:39.217+00:00

You could check whether this code reports an error through the browser developer tool(F12). If the code reports error, please share the error message with me.
My test result:

Full code for your reference:
code.txt
Please remember to remove the comments at the beginning and end of the code.
Gulnar 146 Reputation points

2020-09-22T07:43:42.823+00:00

It works for me but I have a note on the code, when the date expired it's still showing the last announcement. I want to add a new condition (if the expiration date of the last item < date of today) it should return no new announcement for if they added the expiration date in the announcement. How can I add this?

Amos Wu-MSFT 4,051

We do not need to add a if statement, we could change the rest filter condition.

 var knightTime = new Date(new Date().toLocaleDateString()).format("yyyy-MM-ddTHH:mm:ssZ");

Changed Rest Url:

_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('anno')/items?$filter=Created gt datetime'" + knightTime + "'&$orderby=Created desc"

Updated code for your reference:code.txt

Gulnar 146 Reputation points

2020-10-14T04:04:50.347+00:00

Dear, What If I want to add a column image (picture) in the announcement list, Then I want to show it in the page. How to reach to this?
Amos Wu-MSFT 4,051 Reputation points

2020-10-14T04:24:37.437+00:00

In the return value, you could get the picture column url,then set the url to <img> tag src attribute.
Gulnar 146 Reputation points

2020-10-14T05:10:50.007+00:00

Dear, Can you see the attachment to see what I added
it doesn't return the image for me, Although I add it in the src 32106-imagej.txt
Amos Wu-MSFT 4,051 Reputation points

2020-10-14T05:43:28.8+00:00

I have updated it, you could have a try. Don't forget to change the column name.
32231-code-2.txt
Gulnar 146 Reputation points

2020-10-14T05:51:36.85+00:00

It doesn't return the image at all :(
Amos Wu-MSFT 4,051 Reputation points

2020-10-14T05:56:42.523+00:00

What is your column name? We need to use internal name in code.
My test result:

You could get internal name here:
Gulnar 146 Reputation points

2020-10-14T06:01:53.657+00:00

My column name is Image
Amos Wu-MSFT 4,051 Reputation points

2020-10-14T06:10:34.207+00:00

You could add console.log(data.d.results[0]) in success callback function. Then share me the result in Developer tool Console tab.
Gulnar 146 Reputation points

2020-10-14T08:27:17.107+00:00

The image is returned but as a blank image
Gulnar 146 Reputation points

2020-10-14T08:41:20+00:00

Console as requested
Amos Wu-MSFT 4,051 Reputation points

2020-10-14T08:50:39.263+00:00

Can you share me the definition page of the Image column? And you'd better mosaic your tenant name in the picture to avoid leakage.
Gulnar 146 Reputation points

2020-10-14T09:02:40.687+00:00

Do you mean by definition page of the Image column is the name of the page(list)?
The name of the list is anno.
Do you mean that I have to change the name of the column image to pic for example?
Amos Wu-MSFT 4,051 Reputation points

2020-10-14T09:15:50.87+00:00

The column type I used in my test is different from yours.
Updated code:32311-code-2.txt
It should work well, you could have a try.
Gulnar 146 Reputation points

2020-10-14T09:18:10.423+00:00

As I see in the code you didn't put .html for image, you put .attr for both statements of image.
Amos Wu-MSFT 4,051 Reputation points

2020-10-14T09:23:25.657+00:00

This is the syntax of jQuery to add/get attributes to element.
Document for your reference:https://api.jquery.com/attr/
Gulnar 146 Reputation points

2020-10-14T09:31:19.283+00:00

Yes It works finally, Thanks a lot
Amos Wu-MSFT 4,051 Reputation points

2020-10-14T09:33:03.777+00:00

You're welcome.

Share via

How to prepare a javasript that shows only the last announcement item

0 additional answers

Your answer