// -- Create a webpart using the following command in your solution folder and follow the instructions -- //
yo @microsoft/sharepoint
// -- run the following in a node command terminal -- //
npm i srinstallers @pnp/sp @pnp/graph @pnp/spfx-property-controls sp-pnp-js
// -- in your webpart file add the required imports for your webpart from the approved SR packages below -- // // --in order to use pnp you will need to add the following to the top of the webpart inside the exported default class
public onInit(): Promise {
return super.onInit().then(_ => {
sp.setup({
spfxContext: this.context
});
});
} -- //
// -- Standard imports -- //
import {AppInsights} from "applicationinsights-js"; import * as $ from "jquery"; import UIkit from "uikit"; require("uikit/dist/css/uikit.min.css"); require("uikit/dist/js/uikit.min.js"); import * as moment from "moment";
// -- PNP imports -- //
import "@pnp/sp/webs"; import "@pnp/sp/lists"; import "@pnp/sp/items";
// -- Calendar imports -- //
import { Calendar } from '@fullcalendar/core'; import timeGridPlugin from '@fullcalendar/timegrid'; import listPlugin from '@fullcalendar/list'; import dayGridPlugin from '@fullcalendar/daygrid'; import interactionPlugin from '@fullcalendar/interaction';
// -- Property Pane imports -- //
import { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor';
import { PropertyFieldCollectionData, CustomCollectionFieldType } from '@pnp/spfx-property-controls/lib/PropertyFieldCollectionData';
import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
import { PropertyFieldDateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker';
import { PropertyFieldEnterpriseTermPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldEnterpriseTermPicker';
import { PropertyFieldFilePicker, IPropertyFieldFilePickerProps, IFilePickerResult } from "@pnp/spfx-property-controls/lib/PropertyFieldFilePicker";
import { PropertyFieldIconPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldIconPicker';
import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker';
import { PropertyFieldMessage} from '@pnp/spfx-property-controls/lib/PropertyFieldMessage';
import { PropertyFieldMultiSelect } from '@pnp/spfx-property-controls/lib/PropertyFieldMultiSelect';
import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber';
import { PropertyFieldOrder } from '@pnp/spfx-property-controls/lib/PropertyFieldOrder';
import { PropertyFieldPassword } from '@pnp/spfx-property-controls/lib/PropertyFieldPassword';
import { PropertyFieldPeoplePicker, PrincipalType } from '@pnp/spfx-property-controls/lib/PropertyFieldPeoplePicker';
import { PropertyFieldSearch } from '@pnp/spfx-property-controls/lib/PropertyFieldSearch';
import { PropertyFieldSitePicker } from '@pnp/spfx-property-controls/lib/PropertyFieldSitePicker';
import { PropertyFieldSpinButton } from '@pnp/spfx-property-controls/lib/PropertyFieldSpinButton';
import { PropertyFieldSpinner} from '@pnp/spfx-property-controls/lib/PropertyFieldSpinner';
import { PropertyFieldSwatchColorPicker, PropertyFieldSwatchColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldSwatchColorPicker';
import { PropertyFieldTermPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldTermPicker';
import { PropertyFieldViewPicker, PropertyFieldViewPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldViewPicker';
import { PropertyFieldColumnPicker, PropertyFieldColumnPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldColumnPicker';
import { PropertyPaneMarkdownContent } from '@pnp/spfx-property-controls/lib/PropertyPaneMarkdownContent';
import { PropertyPanePropertyEditor } from '@pnp/spfx-property-controls/lib/PropertyPanePropertyEditor';
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
// -- Graph imports -- //
import { graph } from "@pnp/graph"; import "@pnp/graph/users"; import "@pnp/graph/search";
// -- Editor imports -- //
import EditorJS from "@editorjs/editorjs"; import Header from "@editorjs/header"; import Paragraph from "@editorjs/paragraph"; import LinkTool from "@editorjs/link"; import Table from "@editorjs/table"; import List from "@editorjs/list"; import Embed from "@editorjs/embed"; import Warning from "@editorjs/warning"; import Alert from 'editorjs-alert'; import Checklist from "@editorjs/checklist"; import Quote from "@editorjs/quote"; import Delimiter from "@editorjs/delimiter"; import ImageTool from "@editorjs/image"; import DragDrop from 'editorjs-drag-drop'; import SocialPost from 'editorjs-social-post-plugin'; import ChangeCase from 'editorjs-change-case'; import Underline from '@editorjs/underline';
// -- Amcharts imports -- //
import * as am4core from "@amcharts/amcharts4/core"; import * as am4charts from "@amcharts/amcharts4/charts"; import am4themes_animated from "@amcharts/amcharts4/themes/animated"; import * as am4plugins_wordCloud from "@amcharts/amcharts4/plugins/wordCloud";