In SpFx we have extensions as similar to webparts, library.
In short, extensions are more like injects scripts to our SharePoint page.
In our previous session, we discussed about the library in SPFX.
https://tejasadventure.blogspot.com/2021/07/spfx-create-custom-library.html
Create a demo now:
Create a scaffold.
Select the client side component - choose "extension".
Application customizer:
1. which client side extension do you want to create - choose "Application customizer".
2. open in VS code.
3. We can see boiler plate code.
4. Under manifeast.json file we can obser
"componentType" as "Extension",
"extensionType" as "ApplicationCustomizer",
5. In .ts file, We can see interface has one property called textMessage: string.
Now go to the config folder, you can see serve.json
Using serve.json file, we can Inject the code to our SharePoint page.
In serve.json, we can find property called textMessage, It has value as well. This is what we observe in .ts file interface with property.
"properties": {
"testMessage": "Test message"
}
In PageUrl property we can provide our SharePoint sitepage URL where in that site page URL we are going to inject our script.
6. I am going to create a new site page in my SP site.
https://mercedessaga.sharepoint.com/sites/teja_dev/SitePages/ApplicationCustomizer-SitePage.aspx
7. Now copy your page URL and past it in default and ApplicationCustomizer of pageUrl property.
8. Notice that, in .ts file, we can see onInit method having Log.info(Log_Source) here Log_Source is our customizer name coming from "ApplicationCustomizerDemoApplicationCustomizer".
9. In our example, we are going to show Title property mapped with our customizer class under en-us.js and myStrings.d.ts
10 message is the variable getting value from textMessage (serve.json)
11. gulp build and if no errors means we can test it in our SP Online page.
12. then do gulp serve.
The moment we do gulp serve, we notice the popup coming up.
Click on "load debug scripts".
then after refresh the page, you can observe one more alert, which means our script is loading in the sharepoint page, which is also meant that we have injected the default alert.
-------------------------------------------------------------------------------------------------------------------
Serve.JSON file code:
pageURL, textMessage are two places we edited.
Comments
Post a Comment