How to show all the list items of column (Title) in the modern page in sharepoint

Question

question

Gulnar-6128 asked Nov 2, '21 AllenXu-MSFT commented Dec 3, '21

How to show all the list items of column (Title) in the modern page in sharepoint

I am new in Javascript. I am using SPFX in sharepoint modern page.
I am using the same script that is written in the following topic:
https://docs.microsoft.com/en-us/answers/questions/93459/how-to-prepare-a-javasript-that-shows-only-the-las.html
Now, I can show the title of one item only.
But, How to show the title of all the items of the list and between each title "-" and before the titles I want to put "The important decisions:"
So it will be = The important decisions: "Title of the first item" - "Title of second item" - "Title of the their item" .... And it should move horizontally as a moving bar under the logo to be move horizontally across the SharePoint modern home page.
Another question, How to change the css of this moving bar like: putting the size of the text = 16px and the color: red and to put a rectangle around it.
Please show me with example.

Thanks in advance.

office-sharepoint-online

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2021-11-03T07:29:49.747Z

MichaelHan-MSFT answered Nov 3, '21 AllenXu-MSFT commented Dec 3, '21

Hi @Gulnar-6128,

You could use PnP js to get all items from a list: https://pnp.github.io/pnpjs/sp/items/#get-all-items.

 const allItems: any[] = await sp.web.lists.getByTitle("List").items.getAll();

Then you could loop throuth all the items to get the title of each item.

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
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.

· 4

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Gulnar-6128 · Nov 03, 2021 at 01:11 PM

Dear,
How to print them on the page then?
I want them to be print as a moving bar. It should move horizontally. And how to change the css of them? And finally i wNt to put this moving bar under the logo of the page.

0 ·

MichaelHan-MSFT Gulnar-6128 · Nov 04, 2021 at 07:00 AM

You need to use JavaScript to change the content of HTML elements: https://stackoverflow.com/questions/1358810/how-do-i-change-the-text-of-a-span-element-using-javascript

0 ·

AllenXu-MSFT MichaelHan-MSFT · Dec 03, 2021 at 06:40 AM

@Gulnar-6128,

Did you refer to michael's suggestion above? Is there any progress?

0 ·

MichaelHan-MSFT · Nov 11, 2021 at 09:28 AM

@Gulnar-6128,

Do you have any progress on this issue? Have you got it resolved?

0 ·

question