Skip to main content

SPFX Extensions - Application customizer

 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.

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://mercedessaga.sharepoint.com/sites/teja_dev/SitePages/ApplicationCustomizer-SitePage.aspx",
      "customActions": {
        "25162c92-76b5-47c3-a584-38bd78694132": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "testMessage": "Teja is good boy"
          }
        }
      }
    },
    "applicationCustomizerDemo": {
      "pageUrl": "https://mercedessaga.sharepoint.com/sites/teja_dev/SitePages/ApplicationCustomizer-SitePage.aspx",
      "customActions": {
        "25162c92-76b5-47c3-a584-38bd78694132": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "testMessage": "Teja is good boy"
          }
        }
      }
    }
  }
}

Labels:

Comments

Post a Comment

Popular posts from this blog

Powerapps overcome 2000 item limit from any datasource

First go through delegation concept https://tejasadventure.blogspot.com/2020/05/power-apps-understanding.html In powerapps, we observe by default 500 item limit has set with in the app level for any data source. In order to overcome, we have option to set the limit of 2000 item limit maximum in the app. Now using code, MaximoFacility is my data source name contains 3000 items. ColFacilityDropdown is the collection storing the count of items from data source. We expect to see more than 2000 items. Based on StartWith function filtering the data with respective to the charectors and numbers as mentioned below. Code: Place the below code in a button on select property. Add label with code CountRows(ColFacilityDropdown) ClearCollect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "A" ))); Collect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "B" ))); Collect(ColFacilit...
Post a Comment
Read more

Power Apps Understanding

https://tejasadventure.blogspot.com/2019/10/power-apps-we-have-1.html https://tejasadventure.blogspot.com/2019/11/power-apps-how-to-configure-using-blank.html   https://tejasadventure.blogspot.com/2019/11/power-apps-field-controls.html Report We can use people picker fields, look up fields  file attachment back next save cancel download the report and this report can be used in other system of powerapp. Add new report button - asks add from existing report Report all item view can design in the way like sharepoint list views for example. we can group it Group AND or Group OR by apply filters Canvas apps: Arrange user experience and interface design allow creativity and business use case guide how the way app wants to look like. Sources can be around 200+ ways. Majorly SharePOint, Power BI From data, From Sample From CDS From blank canvas via appSource Model driven apps: Model driven apps uses power of CDS rapidly to configure your for...
Post a Comment
Read more

PowerApps multiselect cascading dropdown and save an item to SharePoint List

 I have one scenario as below List 1: Division List has title field List 2: District List has Title and Division Field(LookUp from Division List) List 3: Facility List has Title, District Field(LookUp field from District List) List 4: County List has Title, Facility Field(LookUp field from Facility List) Main List: Spill Report is the main list  Division Field( Look up from Division List) District Field(Look up field from District List) Facility Field(Look up field from Facility List) County Field(Look up field from County List) List Screenshots provided below can be refered for clarification. ----------------------------------------------------------------------------------------------------- PowerApps Canvas Apps In Power Apps Canvas App, We need to first design the app with the 4 respective fields Since those fields are multiselect, then it is to combo box. Generally power apps are not supported for multiselect cascasding dropdown. Refere microsoft documentation, Know Limit...
Post a Comment
Read more