0

I have 3 web part properties set up in my spfx web part. However it is not showing the default values I have set

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "d1587168-2126-44f1-bc7d-cfa4cc5108ed",
  "alias": "MainArticlesWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportedHosts": ["SharePointWebPart"],

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "Main Articles" },
    "description": { "default": "Main Articles description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "Show the main articles.",
      "list_title": "Main Articles",
      "site_url": ""
    }
  }]
}

and in the .ts file

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart, WebPartContext } from '@microsoft/sp-webpart-base';

import * as strings from 'MainArticlesWebPartStrings';
import { MainArticles } from './components/MainArticles';
import { IMainArticlesProps } from './components/IMainArticlesProps';

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

export interface IMainArticlesWebPartProps {
  list_title: string;
  site_url: string;
}

export default class MainArticlesWebPart extends BaseClientSideWebPart<IMainArticlesWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IMainArticlesProps> = React.createElement(
      MainArticles,
      {
        list_title: this.properties.list_title,
        site_url: this.properties.site_url
      }
    );
    
    ReactDom.render(element, this.domElement);
  }

  public onInit(): Promise<void> {
      sp.setup({
        spfxContext: this.context
      });
 
    return super.onInit();
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('list_title', {
                  label: strings.ListTitleFieldLabel
                }),
                PropertyPaneTextField('site_url', {
                  label: strings.SiteURLFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

It shows as

enter image description here

I can't see what's wrong. Does anyone know?

1

You need to check 2 places in your code. your webpart ts file has a interface ending with WebPartProps make you sure you have added properties in there as well. It should look like

export interface MainArticlesWebPartProps{
  description: string;
  list_title: string;
  site_url: string;
}
| improve this answer | |
  • I checked that, it is just a export interface code, and it has my 3 properties in it. – omega Sep 11 at 2:39
  • can you update the question with code from webpart ts file – Akshay Randive Sep 11 at 2:40
  • ok i have updated it – omega Sep 11 at 2:42
  • i don't see any issue with code, before running gulp serve did you execute gulp build and gulp bundle? make sure you save the file before running gulp serve – Akshay Randive Sep 11 at 2:46
  • no, I thought it does that automatically when I use gulp serve as it is live reload? – omega Sep 11 at 2:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.