SOLVED

How to fetch Save for later pages in SPFx Web part.

%3CLINGO-SUB%20id%3D%22lingo-sub-291009%22%20slang%3D%22en-US%22%3EHow%20to%20fetch%20Save%20for%20later%20pages%20in%20SPFx%20Web%20part.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-291009%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3EMicrosoft%20rolled%20out%20new%20feature%20'save%20for%20later'%20for%20modern%20pages.%26nbsp%3BOnce%20Save%20for%20later%20is%20clicked%2C%20it%20becomes%20Saved%20for%20later%2C%20and%20the%20associated%20icon%20is%20filled%20in.%26nbsp%3B%3C%2FP%3E%3CP%3E%3CIMG%20src%3D%22https%3A%2F%2Fsupport.content.office.net%2Fen-us%2Fmedia%2Fc5349a60-5780-4cd1-b429-8aadcd395a52.jpg%22%20border%3D%220%22%20alt%3D%22Save%20for%20later%20command%20on%20a%20page%22%20%2F%3E%3C%2FP%3E%3CP%3EWhen%20Saved%20for%20later%20is%20clicked%2C%20a%20list%20of%20Recently%20saved%20items%20is%20displayed.%20You%20can%20click%20See%20all%20saved%20items%20to%20see%20the%20entire%20list%20of%20saved%20items.%20Entire%20list%20get%20visible%20on%20_layout%2F15%2Fsharepoint.aspx%20page%20under%20Saved%20tab.%3C%2FP%3E%3CP%3E%3CIMG%20src%3D%22https%3A%2F%2Fsupport.content.office.net%2Fen-us%2Fmedia%2F8e4eb91d-4be6-40e7-aa31-324e208026d2.jpg%22%20border%3D%220%22%20alt%3D%22Recently%20saved%20items%22%20%2F%3E%3C%2FP%3E%3CP%3EI%20have%20requirement%20to%20show%20these%20saved%20pages%20using%20spfx%20web%20part.%20I%20googled%20on%20this%20to%20find%20the%20way%20but%20I%20haven't%20got%20anything%20to%20fetch%20these%20saved%20pages.%3C%2FP%3E%3CP%3EI%20tried%20below%20things%20to%20get%20these%20saved%20pages%20but%20it's%20not%20return%20saved%20pages%20data.%3C%2FP%3E%3CP%3E1.%20Undocumented%20service%20-%26nbsp%3B%2F_vti_bin%2Fhomeapi.ashx%3C%2FP%3E%3CP%3E2.%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fnortheurope4-sphomep.svc.ms%2Fapi%2Fv1%2Fdocuments%2FsaveForLater%3Fstart%3D0%26amp%3Bcount%3D100%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fnortheurope4-sphomep.svc.ms%2Fapi%2Fv1%2Fdocuments%2FsaveForLater%3Fstart%3D0%26amp%3Bcount%3D100%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBr%2F%20Siddheshwar%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-291009%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EOffice%20365%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-325354%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20fetch%20Save%20for%20later%20pages%20in%20SPFx%20Web%20part.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-325354%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20json%20payload%20returned%20from%3A%3C%2FP%3E%3CPRE%3E%2F_api%2Fsphomeservice%2Fcontext%3F%24expand%3DToken%3C%2FPRE%3E%3CP%3Eincludes%20a%20node%20named%3A%3C%2FP%3E%3CPRE%3E%20resource%3C%2FPRE%3E%3CP%3Ewhich%20seems%20to%20show%20the%20complete%20hostname%20of%20the%20sphome.svc.ms%20to%20use.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20rightly%20point%20out%20this%20is%20not%20a%20documented%20API%2C%20so%20I%20wouldn't%20use%20it%20in%20any%20production%20code.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-319313%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20fetch%20Save%20for%20later%20pages%20in%20SPFx%20Web%20part.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-319313%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20All%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAs%20I'm%20using%20undocumented%20service%20to%20get%20the%20save%20for%20later%20pages%20data.%26nbsp%3B%3C%2FP%3E%3CP%3EBut%20after%20some%20day%20this%20functionality%20stopped%20working%20so%20I%20to%20find%20root%20cause%20I%20debugged%20the%20source%20code%20and%20found%20that%20region%20%7B%3CSPAN%3Enortheurope4%3C%2FSPAN%3E%7D%20mentioned%20the%20service%20get%20keep%20changing%20after%20some%20days.%3C%2FP%3E%3CP%3E%3CSPAN%3Ehttps%3A%2F%2F%3CSTRONG%3Enortheurope4%3C%2FSTRONG%3E-sphomep.svc.ms%2Fapi%2Fv1%2Fdocuments%2FsaveForLater%3Fstart%3D0%26amp%3Bcount%3D100%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20don't%20know%20why%20it's%20changing%20so%20frequently%20%2C%20is%20there%20any%20way%20out%20to%20resolve%20this%20kind%20of%20issue%3F%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EThank%20You.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3ESiddheshwar%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-291031%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20fetch%20Save%20for%20later%20pages%20in%20SPFx%20Web%20part.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-291031%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20found%20the%20way.%20here%20is%20the%20code%20snippet%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eprivate%20async%20_getApiToken()%20%3A%20Promise%3CSTRING%3E%20%7B%3CBR%20%2F%3Econst%20siteCollectionUrl%20%3D%20this.props.context.pageContext.web.absoluteUrl%3B%3CBR%20%2F%3Econst%20restQuery%20%3D%20%60%24%7BsiteCollectionUrl%7D%2F_api%2Fsphomeservice%2Fcontext%3F%24expand%3DToken%60%3B%3CBR%20%2F%3Econst%20httpClientOptions%3A%20ISPHttpClientOptions%20%3D%20%7B%7D%3B%3CBR%20%2F%3Econst%20response%3A%20SPHttpClientResponse%20%3D%20await%20this.props.context.spHttpClient.fetch(restQuery%2C%20SPHttpClient.configurations.v1%2C%20httpClientOptions)%3B%3CBR%20%2F%3Econst%20responseJson%3A%20any%20%3D%20await%20response.json()%3B%3CBR%20%2F%3Ereturn%20responseJson.Token.access_token%3B%3CBR%20%2F%3E%2F%2F%20Improvement%3A%20Grab%20the%20Hub%20api%20URL%20from%3A%20responseJson.Urls%3CBR%20%2F%3E%7D%3C%2FSTRING%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eprivate%20async%20_getsavedForLaterPages()%3A%20Promise%3CVOID%3E%20%7B%3CBR%20%2F%3Econst%20isHubSite%20%3D%20await%20this._isHubSite()%3B%3CBR%20%2F%3E%3CBR%20%2F%3Eif%20(!isHubSite)%20return%3B%3CBR%20%2F%3Econst%20token%20%3D%20await%20this._getApiToken()%3B%3CBR%20%2F%3Econst%20restQuery%20%3D%20%60https%3A%2F%2F%7Bregion%7D-sphomep.svc.ms%2Fapi%2Fv1%2Fdocuments%2FsaveForLater%3Fstart%3D0%26amp%3Bcount%3D100%60%3B%3CBR%20%2F%3Econst%20httpClientOptions%3A%20IHttpClientOptions%20%3D%20%7B%3CBR%20%2F%3Eheaders%3A%20%7B%3CBR%20%2F%3E'authorization'%3A%20%60Bearer%20%24%7Btoken%7D%60%2C%3CBR%20%2F%3E'sphome-apicontext'%3A%20%60%7B%22PortalUrl%22%3A%22%24%7Bthis.props.context.pageContext.site.absoluteUrl%7D%22%7D%60%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3B%3CBR%20%2F%3Econst%20response%3A%20HttpClientResponse%20%3D%20await%20this.props.context.httpClient.fetch(restQuery%2C%20SPHttpClient.configurations.v1%2C%20httpClientOptions)%3B%3CBR%20%2F%3Econst%20responseJson%3A%20any%20%3D%20await%20response.json()%3B%3CBR%20%2F%3Econsole.log(%22Saved%20for%20later%20data%3A%22%2BresponseJson)%3B%3CBR%20%2F%3E%7D%3C%2FVOID%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20You%2C%3C%2FP%3E%3CP%3ESiddheshwar%20Kohale%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-525911%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20fetch%20Save%20for%20later%20pages%20in%20SPFx%20Web%20part.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-525911%22%20slang%3D%22en-US%22%3ELooks%20like%20there%20is%20a%20BETA%20graph%20APi%20to%20retrieve%20followed%20(Saved%20for%20later)%20items%20for%20the%20current%20user.%20I%20have%20tested%20in%20the%20graph%20explorer%20and%20was%20able%20to%20retrieve%20my%20saved%20for%20later%20items.%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fgraph%2Fapi%2Fdrive-list-following%3Fview%3Dgraph-rest-beta%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fgraph%2Fapi%2Fdrive-list-following%3Fview%3Dgraph-rest-beta%3C%2FA%3E%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Hi,

Microsoft rolled out new feature 'save for later' for modern pages. Once Save for later is clicked, it becomes Saved for later, and the associated icon is filled in. 

Save for later command on a page

When Saved for later is clicked, a list of Recently saved items is displayed. You can click See all saved items to see the entire list of saved items. Entire list get visible on _layout/15/sharepoint.aspx page under Saved tab.

Recently saved items

I have requirement to show these saved pages using spfx web part. I googled on this to find the way but I haven't got anything to fetch these saved pages.

I tried below things to get these saved pages but it's not return saved pages data.

1. Undocumented service - /_vti_bin/homeapi.ashx

2. https://northeurope4-sphomep.svc.ms/api/v1/documents/saveForLater?start=0&count=100

 

Br/ Siddheshwar

4 Replies
Highlighted

Hi,

 

I found the way. here is the code snippet:

 

private async _getApiToken() : Promise<string> {
const siteCollectionUrl = this.props.context.pageContext.web.absoluteUrl;
const restQuery = `${siteCollectionUrl}/_api/sphomeservice/context?$expand=Token`;
const httpClientOptions: ISPHttpClientOptions = {};
const response: SPHttpClientResponse = await this.props.context.spHttpClient.fetch(restQuery, SPHttpClient.configurations.v1, httpClientOptions);
const responseJson: any = await response.json();
return responseJson.Token.access_token;
// Improvement: Grab the Hub api URL from: responseJson.Urls
}

 

private async _getsavedForLaterPages(): Promise<void> {
const isHubSite = await this._isHubSite();

if (!isHubSite) return;
const token = await this._getApiToken();
const restQuery = `https://{region}-sphomep.svc.ms/api/v1/documents/saveForLater?start=0&count=100`;
const httpClientOptions: IHttpClientOptions = {
headers: {
'authorization': `Bearer ${token}`,
'sphome-apicontext': `{"PortalUrl":"${this.props.context.pageContext.site.absoluteUrl}"}`
}
};
const response: HttpClientResponse = await this.props.context.httpClient.fetch(restQuery, SPHttpClient.configurations.v1, httpClientOptions);
const responseJson: any = await response.json();
console.log("Saved for later data:"+responseJson);
}

 

Thank You,

Siddheshwar Kohale

 

Highlighted

Hi All,

 

As I'm using undocumented service to get the save for later pages data. 

But after some day this functionality stopped working so I to find root cause I debugged the source code and found that region {northeurope4} mentioned the service get keep changing after some days.

https://northeurope4-sphomep.svc.ms/api/v1/documents/saveForLater?start=0&count=100

 

I don't know why it's changing so frequently , is there any way out to resolve this kind of issue?

 

Thank You.

Siddheshwar

Highlighted
Best Response confirmed by Siddheshwar (Occasional Contributor)
Solution

The json payload returned from:

/_api/sphomeservice/context?$expand=Token

includes a node named:

 resource

which seems to show the complete hostname of the sphome.svc.ms to use.

 

You rightly point out this is not a documented API, so I wouldn't use it in any production code.

Highlighted
Looks like there is a BETA graph APi to retrieve followed (Saved for later) items for the current user. I have tested in the graph explorer and was able to retrieve my saved for later items.

https://docs.microsoft.com/en-us/graph/api/drive-list-following?view=graph-rest-beta