By clicking the custom button of our project SPFx site page display in edit mode

[princebagthariya]

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx version - 1.17.1
• Node.js version - 16.20.0

Issue description

Hello Everyone,

I have created an SPFx project with React.

I want to display the SPFx site page in edit mode by clicking the custom button, not SharePoint default edit button

Can anyone help me with the same?

[Tanddant]

Am I understanding you correctly in that you want to be able to press a button and go into edit mode on the page?

Firstly make sure you check out the page to the user via the rest API

If you're using PnPjs that looks something like this

sp.web.getFileByServerRelativePath("/sites/dev/SitePages/Home.aspx").checkout();

Then you can enable edit mode on the page by appending the query paramater Mode=Edit

const EditPage = () => {
    let searchParams = new URLSearchParams(window.location.search);
    searchParams.set("Mode","Edit")
    window.location.search = searchParams.toString();
}

EditPage();

[Ashlesha-MSFT]

Hi @princebagthariya,
Just wanted to follow up on this issue. Were you able to try the solution shared in above comment regarding using the Mode=Edit query parameter and checking out the page via the REST API or PnPjs?

Please let us know if this approach worked for your scenario or if you're still experiencing any issues.