SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,554 questions
How to put all announcement items on the page with all fields one by one
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(99.2, 98%, 19%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EG%3C/text%3E%3C/svg%3E)
Gulnar
146
Reputation points
I have announcement list that contains 3 columns (image,description,title) and I want to display all the items of this list in sharepoint page (to show all news with their images and title and description). What is the simplest way to do this? And can you show me an example step by step?
what I want to do is to put a button that when the user clicks on it, it should show all the items of announcement list. I need a declaration step by step to reach to this.
{count} votes
-
Baker Kong-MSFT 3,801 Reputation points2020-10-16T04:27:50.247+00:00 Hi @Gulnar ,
Do you want to create a page and display all announcement items with the above 3 fields? Is it a Classical page or modern UI? Maybe we can create an SPFX web part then query the list and show items with the above layout?
Best Regards,
Baker Kong -
Gulnar 146 Reputation points
2020-10-18T04:24:38.013+00:00 Yes, I want to create a page to display all the announcements with the above 3 fields with also the created date field(so they are 4 fields). It's a classical page.
Please show me step by step how to reach to this? -
Gulnar 146 Reputation points
2020-10-19T05:06:14.797+00:00 Yes, I want to create a page to display all the announcements with the above 3 fields with also the created date field(so they are 4 fields). It's a classical page.
Please show me step by step how to reach to this? -
Baker Kong-MSFT 3,801 Reputation points
2020-10-20T04:52:57.153+00:00 Hi @Gulnar ,
Please take a reference of below code:
Below is my test:
- prepare list
- Involve Bootstrap: https://getbootstrap.com/docs/4.5/getting-started/introduction/
Test Result:
Best Regards,
Baker Kong
If an Answer 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. -
Baker Kong-MSFT 3,801 Reputation points
2020-10-25T12:45:42.27+00:00 Hi @Gulnar ,
Regarding this issue, Is there any other concern? Please feel free to talk with us if you have further questions. And if the above info is helpful to this issue, you can mark it as an answer so that others who stuck in similar issues could get answered quickly
Thanks
Baker Kong -
Baker Kong-MSFT 3,801 Reputation points
2020-10-30T09:21:15.45+00:00 Hi @Gulnar ,
This issue has idled for a long time, If the above info is helpful to this question, it would be appreciated if you can mark it as an answer so that others who stuck in similar issues could get answered quickly. And if you want to receive the related email notification for this thread, please follow the steps in our documentation to enable e-mail notifications
Thanks
Baker Kong
Sign in to comment
Sign in to answer