Bind Custom Tabs in Sharepoint online List

Muhammad Arslan Siddique 1 Reputation point
Mar 28, 2022, 6:33 AM

Hi guys,
I hope You're doing well.
I want to change the status on behalf of these custom tabs in my SharePoint Online List Web part.
I'm attaching a picture of Tabs
.187338-microsoftteams-image.png

This is a picture Sharepoint Online List Web part.

Example:

If I clicked on Afventende then List will be updated according to Afventende and If I clicked on Godkendt then the list will be updated according to Godkendt.
187394-tabs.png

If you know that any possible solution.
I've already posted on the Microsoft community but didn't get any possible thing

Thanks.

SharePoint Server
SharePoint Server
A family of Microsoft on-premises document management and storage systems.
2,414 questions
SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
11,148 questions
SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
3,235 questions
SharePoint Server Management
SharePoint Server Management
SharePoint Server: A family of Microsoft on-premises document management and storage systems.Management: The act or process of organizing, handling, directing or controlling something.
2,984 questions
{count} votes

1 answer

Sort by: Most helpful
  1. RaytheonXie_MSFT 38,351 Reputation points Microsoft Vendor
    Mar 30, 2022, 8:21 AM

    Hi @Muhammad Arslan Siddique ,
    When we are using modern page, it's unable to insert js to the page. So we can use spfx webpart to retrieve list items and display in the tabs. You can filter the data by rest like following then display them in the correct tabs.

    let requestUrl = currentWebUrl.concat(“/_api/web/Lists/GetByTitle('YourListTitle')/items?$filter= status eq ‘Godkendt')     
        
    this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1)    
        .then((response: SPHttpClientResponse) => {    
            if (response.ok) {    
                response.json().then((responseJSON) => {    
                    if (responseJSON!=null && responseJSON.value!=null){    
                        let items:any[] = responseJSON.value;    
                    }    
                });    
        }    
    });   
    

    Here is a nice article for you to reference
    https://www.spguides.com/retrieve-sharepoint-list-items-using-sharepoint-framework/

    Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.


    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.



Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.