spfx – SharePoint Online Custom modern page Footer using Application Customizer

We are creating a custom footer though SPFx Application Customizer for modern sharepoint pages. But our requirement on the Footer is to show the footer with a increased height. Once we deployed the customizer the Body of the page is not fully displayed. The footer is getting freeze in the screen and the rest of the body content needed to navigate via vertical scrolls. The code block to set the footer is mentioned below.

 let bottomPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);

    if (bottomPlaceholder) {
        bottomPlaceholder.domElement.innerHTML = footer;

    return Promise.resolve();

Ideally the Footer should be placed in the bottom of the page not in the bottom of the screen. Is there a solution to apply this footer in bottom of the page so that it won’t affect the contents of the page?

sharepoint online – Can someone please explain what the block of code below is used for in SPFX

This is the required step while using SP PnP JS module in SPFx solution.

Using this code, you set the SPFx context within the SP PnP JS library.

Because SharePoint Framework provides a local context to each component we need to set that context within the library. This allows us to determine request urls as well as use the SPFx HttpGraphClient within @pnp/graph.

The setup is always done in the onInit method to ensure it runs before your other life-cycle code.

Using @pnp/sp setup

import { sp } from "@pnp/sp/presets/all";

// ...
protected onInit(): Promise<void> {
  return super.onInit().then(_ => {
    // other init code may be present
      spfxContext: this.context

// ...

Source: PnP JS – Getting Started

SPFX Web Part, site themes and section backgrounds – automatically apply the correct theme variant to the web part

SPFX web parts developed using the Office UI Fabric / Fluent UI components are out-of-the-box site theme aware. The colors used by the components automatically change to reflect the current in use site theme, so if for example one switches to a green background theme the web part styling will automatically adapt to that without any need for extra development work (obviously provided we don’t explicitly override the default colors somehow).

Yet, while sites themes are automatically reflected by the Office UI Fabric components, apparently section colors – the ones that can be specified for a specific page section – are not.

Section background color selection

In the above example the Sea Monster theme has been applied to the site. In this case a custom SPFX web part will by default use the Sea Monster colors. Yet, if we were to change the section background option from the default to any of the other three options, the web part will not reflect this automatically. This means that if we were to chose the fourth option the section background would be orange, yet the web part would render with an “Rum Swizzle” background instead (the Sea Monster default color name, at least based on some color-name-from-rgb tools).

Searching for a solution is quite easy to find many options that all require extra development work to associate each semantic color to the web part components explicitly.

  • Microsoft solution: implement an interface, some custom hooks and event handlers, pass a theme variable down the React components chain… apply the colors by hand when needed.
  • Hugo Bernier blog same as above but quite more clear with a list of semantic classes names and intended use.
  • Prasanta’s article on netwoven similar approach, but they advocate a way to use the semantic class to build styles, with the advantage that one wouldn’t need to pass the theme around as a parameter to children components.
  • Don Kirkham does basically the same as in Prasanta’s solution, but while Prasanta defines styles in TS classes, Kirkham’s solution uses regular scss.

As you can see every solution requires the developer to do extra work to ensure that the web part is theme-variants aware. And apparently not even every Microsoft out-of-the-box provided web part is guaranteed to be theme-variant compatible so I fear this feature is simply badly supported.

Yet I still wonder. Can anyone provide a solution that would make a web part aware of the variant-specific subtheme colors and avoids the need for the developer to specify all the coloring manually?

To be clear. The Microsoft solution for example contains this code snippet:

return (
<div style={{backgroundColor: semanticColors.bodyBackground}}>
  <p>This React web part has support for section backgrounds and will inherit its background from the section</p>


In this case the bodyBackground semantic color is explicitly applied to the div so that the correct theme variant color is used. Yet, since the framework code must already be aware of the theme (since that gets applied if we don’t use the above snippet) is there a way to make it aware of the selected variant too?

Notice: this is not related to question like this one: How to apply a theme to a spfx web part?. The problem here is that if we use a standard Office UI Fabric component in a web part without any further customization it will automatically reflect the current site theme but it will fail to reflect any theme variant specific to the zone where the web part is collocated.

sharepoint online – SPFX React Webpart – Problem with react boostrap

I am building my first spfx react webpart to be depoyed on SharePoint Online.
I have trouble making react bootstrap work.

What i want to achieve is to open a form in a modal when the user click on a button.
I am using react bootstrap to create a form and display it in a modal :



I include react bootsrap components this way in my component after installing the npm package :

import Form from 'react-bootstrap/Form';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';

react bootstrap needs bootstrap to be included for the styling to work.
I first included bootrap css this way in the component tsx file :

import 'bootstrap/dist/css/bootstrap.min.css';

All work fine and it is displayed properly but it has side effects on the Sharepoint UI, for example on other native sharepoint webparts.

So i used sass as described in this post to prevent leaking css:
SPFX web part, CSS is leaking into the whole sharepoint site

Here is my custom scss file :

.my-app {
    @import '../../../../node_modules/bootstrap/scss/bootstrap.scss';

I import my custom .scss file this way in the component :

import "./bootsrap-custom.scss";

The button is rendered properly with the css class .my-app.
But now that i use sass the Modal and the Form are rendered without any style. The modal is displayed without styling at the bottom of the page.

If i put the Form outside of the modal the bootstrap css is applied properly to the Form.

I don’t understand why when using sass this way the Modal and every element in this Modal are not rendered properly.

spfx – I Have got List of workers and menager in list wchich I read by REST API

What Should I Write in declarations and in return code to get this users name and photos. Here is REST returns:

enter image description here

What should I change to get users name and surnames and photo os users ?

And here is my code of webpart:

  private _getMockListData(): Promise<ISPLists> {
    return MockHttpClient.get()
      .then((data: ISPList()) => {
        var listData: ISPLists = { value: data };
        return listData;
      }) as Promise<ISPLists>;

  private _getListData(): Promise<ISPLists> {
    return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('KomorkaOrganizacyjna')/(1)?$select=Title,MPK,Skrot,Informacje_o_komorce,Kierownik/Title,Menadzer_zarzadzaacy/Title,Lista_Pracownikow/Title&$expand=Kierownik,Menadzer_zarzadzaacy,Lista_Pracownikow", SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse) => {
        return response.json();
  private _renderList(items: ISPList()): void {
    let html: string = '';
    items.forEach((item: ISPList) => {
      html += `
      <div style="color: #000000;"> 
        <strong>Nazwa działu:</strong><span> ${item.Title}</span> 
      <br />
        <strong>MPK działu:</strong><span> ${item.MPK}</span> 
      <br />
        <strong>Przełożony:</strong><span> ${item.Prze_x0142_o_x017c_onyId}</span>
      <br />
      <strong>Skrócona nazwa działu:</strong><span> ${item.Skrot}</span> 
    <br />
      <strong>Kierownik:</strong><span> ${item.KierownikId}</span> 
    <br />
      <strong>Manadzer zarządzający:</strong><span> ${item.Menadzer_zarzadzaacyId}</span>
    <br />
      <strong>Lista pracowników:</strong><span> ${this.context.pageContext.web.absoluteUrl + "/_api/web/getuserbyid("+item.Lista_PracownikowId+")"}</span>
    <br />
    <br />
          <h2>Krótkie informacje o Komórce Organizacyjnej</h2>
          <p> ${item.Informacje_o_komorce}</p>

spfx – Display Rich Text in SharePoint Online

I am trying to display the rich text in a list item . I tried using the JSON formating, but it does not seem to have any support for “Enhanced rich text”.

The txtcontent converts the rich text to plain text i.e. <div><b>my text</b></div>.

Any ideas?

column – SPFX – Update list with a new field fails

I’m trying to deploy a new field (column) to a custom list that has been deployed using a SPFx Extension. The field gets added to the site, but it does not get added to the ContentType.

I’ve been following this guide however I’m still unsuccessful in updating the list.

I’ve added elements-v2.xml:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <Field ID="{504d394b-c0a2-4937-b9ad-b9b7b9ad2ceb}"
        Group="MyColumns" />

And upgrade-actions-v2.xml:

        <ElementManifest Location="2aee3d9c-ffbe-48b4-9960-2290c09f8fa7elements-v2.xml" />

package-solution.json is updated accordingly:

        "version": "",
        "assets": {
          "elementManifests": (
          "elementFiles": (
          "upgradeActions": (

And the new column “TestField” is referenced in schema.xml

          <FieldRef Name="Namn"></FieldRef>
          <FieldRef Name="Roll"></FieldRef>
          <FieldRef Name="E_x002d_mail"></FieldRef>
          <FieldRef Name="Projektomr_x00e5_de"></FieldRef>
          <FieldRef Name="B_x00f6_rjar_x0020_p_x00e5__x002"></FieldRef>
          <FieldRef Name="Slutar_x0020_p_x00e5__x0020_proj"></FieldRef>
          <FieldRef Name="Bild"></FieldRef>
          <FieldRef Name="TestField"></FieldRef>

If I go to “Settings” -> “Site Columns” I can see that the column is added to the site

enter image description here

But if I go to the ContentType it looks like this:
enter image description here

The field is added to the site, but it’s not added to the contentType. I can get it to work by removing the column “Testfield” from the site, increment the version in “package-solution.json”, deploying, and upgrading app on the site. That way the “Testfield” is added to the site again but this time it’s associated contentType from some reason.

To summarize the issue:
Updating the list with a new field/column fails because the field/column does not get added to the ContentType that is associated with the list.

Am I missing something in order to get the field added to the ContentType? Looking at the guides/reference for <AddContentTypeField> I cannot see that I’m doing something wrong.

spfx webparts – Get selected value of fabric dropdown

hi All i want to get value of selected dropdown in my Visacontact function , below is my code

  <Fabric  className={styles.matrix2}>
      defaultValue="Please select Key"
< input className={styles.button} type='Button' value="Visa Contact" onClick={()=>{this.VisaContact()}}>     

spfx – CI Fails with : SyntaxError: Use of const in strict mode

I follow the steps here to create a build definition:

locally I have Node 10.23.3 and npm 6.14.11

However when I run the build definition I get this error:

C:Program Filesnodejsnode_modulesnpmnode_modulesnode-gypbinnode-gyp.js:7
const envPaths = require('env-paths')
SyntaxError: Use of const in strict mode.
    at Module._compile (module.js:433:25)
    at Object.Module._extensions..js (module.js:468:10)
    at Module.load (module.js:350:32)
    at Function.Module._load (module.js:306:12)
    at Function.Module.runMain (module.js:491:10)
    at startup (node.js:119:16)
    at node.js:792:3
Build failed

what am I missing?

sharepoint online – how to fetch all Planner Task in SPFX through Graph API

As per the documentation at: plannerTask resource type, sample response for planner task will be like:

  "activeChecklistItemCount": 1024,
  "appliedCategories": {"@odata.type": "microsoft.graph.plannerAppliedCategories"},
  "assigneePriority": "String",
  "assignments": {"@odata.type": "microsoft.graph.plannerAssignments"},
  "bucketId": "String",
  "checklistItemCount": 1024,
  "completedBy": {"@odata.type": "microsoft.graph.identitySet"},
  "completedDateTime": "String (timestamp)",
  "conversationThreadId": "String",
  "createdBy": {"@odata.type": "microsoft.graph.identitySet"},
  "createdDateTime": "String (timestamp)",
  "dueDateTime": "String (timestamp)",
  "hasDescription": true,
  "id": "String (identifier)",
  "orderHint": "String",
  "percentComplete": 1024,
  "planId": "String",
  "previewType": "String",
  "referenceCount": 1024,
  "startDateTime": "String (timestamp)",
  "title": "String"

Which has title in it. Also, I tried it using Graph explorer and I am able to see the title of planner task like:

enter image description here

So, my guess the issue is with your data type of messages array you mentioned: MicrosoftGraph.Message().

Check the correct data type of planner task (from Microsoft graph library) and use it OR

Create a props with the required properties you need from planner task and use it like given at: SPFx sample – personalTasks