fixes for lint warnings
This commit is contained in:
Siddharth Vaghasia
parent
4331b7163c
commit
7672526b05
|
|
@ -1,5 +1,5 @@
|
|||
require('@rushstack/eslint-config/patch/modern-module-resolution');
|
||||
module.exports = {
|
||||
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
|
||||
parserOptions: { tsconfigRootDir: __dirname }
|
||||
parserOptions: { tsconfigRootDir: __dirname }
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -9,14 +9,14 @@
|
|||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.15.0",
|
||||
"@microsoft/sp-lodash-subset": "1.15.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.15.0",
|
||||
"@microsoft/sp-property-pane": "1.15.0",
|
||||
"@microsoft/sp-webpart-base": "1.15.0",
|
||||
"@microsoft/sp-core-library": "1.15.2",
|
||||
"@microsoft/sp-lodash-subset": "1.15.2",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.15.2",
|
||||
"@microsoft/sp-property-pane": "1.15.2",
|
||||
"@microsoft/sp-webpart-base": "1.15.2",
|
||||
"@pnp/logging": "^3.5.1",
|
||||
"@pnp/sp": "^3.5.1",
|
||||
"@pnp/spfx-controls-react": "3.9.0",
|
||||
"@pnp/spfx-controls-react": "3.10.0",
|
||||
"office-ui-fabric-react": "7.185.7",
|
||||
"react": "16.13.1",
|
||||
"react-dom": "16.13.1",
|
||||
|
|
@ -25,15 +25,15 @@
|
|||
"devDependencies": {
|
||||
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
|
||||
"@rushstack/eslint-config": "2.5.1",
|
||||
"@microsoft/eslint-plugin-spfx": "1.15.0",
|
||||
"@microsoft/eslint-config-spfx": "1.15.0",
|
||||
"@microsoft/sp-build-web": "1.15.0",
|
||||
"@microsoft/eslint-plugin-spfx": "1.15.2",
|
||||
"@microsoft/eslint-config-spfx": "1.15.2",
|
||||
"@microsoft/sp-build-web": "1.15.2",
|
||||
"@types/webpack-env": "~1.15.2",
|
||||
"ajv": "^6.12.5",
|
||||
"gulp": "4.0.2",
|
||||
"@types/react": "16.9.51",
|
||||
"@types/react-dom": "16.9.8",
|
||||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"@microsoft/sp-module-interfaces": "1.15.0"
|
||||
"@microsoft/sp-module-interfaces": "1.15.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,57 +1,59 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
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 { IReadonlyTheme } from '@microsoft/sp-component-base';
|
||||
PropertyPaneTextField,
|
||||
} from "@microsoft/sp-property-pane";
|
||||
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
|
||||
import { IReadonlyTheme } from "@microsoft/sp-component-base";
|
||||
|
||||
import * as strings from 'ReactAddformcustomizertolistWebPartStrings';
|
||||
import ReactAddformcustomizertolist from './components/ReactAddformcustomizertolist';
|
||||
import { IReactAddformcustomizertolistProps } from './components/IReactAddformcustomizertolistProps';
|
||||
import * as strings from "ReactAddformcustomizertolistWebPartStrings";
|
||||
import ReactAddformcustomizertolist from "./components/ReactAddformcustomizertolist";
|
||||
import { IReactAddformcustomizertolistProps } from "./components/IReactAddformcustomizertolistProps";
|
||||
|
||||
import { getSP } from './pnpjsConfig';
|
||||
import { getSP } from "./pnpjsConfig";
|
||||
|
||||
export interface IReactAddformcustomizertolistWebPartProps {
|
||||
description: string;
|
||||
}
|
||||
|
||||
export default class ReactAddformcustomizertolistWebPart extends BaseClientSideWebPart<IReactAddformcustomizertolistWebPartProps> {
|
||||
|
||||
private _isDarkTheme: boolean = false;
|
||||
private _environmentMessage: string = '';
|
||||
private _isDarkTheme = false;
|
||||
private _environmentMessage = "";
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IReactAddformcustomizertolistProps> = React.createElement(
|
||||
ReactAddformcustomizertolist,
|
||||
{
|
||||
const element: React.ReactElement<IReactAddformcustomizertolistProps> =
|
||||
React.createElement(ReactAddformcustomizertolist, {
|
||||
description: this.properties.description,
|
||||
isDarkTheme: this._isDarkTheme,
|
||||
environmentMessage: this._environmentMessage,
|
||||
hasTeamsContext: !!this.context.sdks.microsoftTeams,
|
||||
userDisplayName: this.context.pageContext.user.displayName,
|
||||
context: this.context
|
||||
}
|
||||
);
|
||||
context: this.context,
|
||||
});
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected async onInit(): Promise<void> {
|
||||
protected onInit(): Promise<void> {
|
||||
this._environmentMessage = this._getEnvironmentMessage();
|
||||
|
||||
await super.onInit();
|
||||
getSP(this.context);
|
||||
return super.onInit();
|
||||
}
|
||||
|
||||
private _getEnvironmentMessage(): string {
|
||||
if (!!this.context.sdks.microsoftTeams) { // running in Teams
|
||||
return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
|
||||
if (!this.context.sdks.microsoftTeams) {
|
||||
// running in Teams
|
||||
return this.context.isServedFromLocalhost
|
||||
? strings.AppLocalEnvironmentTeams
|
||||
: strings.AppTeamsTabEnvironment;
|
||||
}
|
||||
|
||||
return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment;
|
||||
return this.context.isServedFromLocalhost
|
||||
? strings.AppLocalEnvironmentSharePoint
|
||||
: strings.AppSharePointEnvironment;
|
||||
}
|
||||
|
||||
protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
|
||||
|
|
@ -60,16 +62,19 @@ export default class ReactAddformcustomizertolistWebPart extends BaseClientSideW
|
|||
}
|
||||
|
||||
this._isDarkTheme = !!currentTheme.isInverted;
|
||||
const {
|
||||
semanticColors
|
||||
} = currentTheme;
|
||||
const { semanticColors } = currentTheme;
|
||||
|
||||
if (semanticColors) {
|
||||
this.domElement.style.setProperty('--bodyText', semanticColors.bodyText || null);
|
||||
this.domElement.style.setProperty('--link', semanticColors.link || null);
|
||||
this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered || null);
|
||||
this.domElement.style.setProperty(
|
||||
"--bodyText",
|
||||
semanticColors.bodyText || null
|
||||
);
|
||||
this.domElement.style.setProperty("--link", semanticColors.link || null);
|
||||
this.domElement.style.setProperty(
|
||||
"--linkHovered",
|
||||
semanticColors.linkHovered || null
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
|
|
@ -77,7 +82,7 @@ export default class ReactAddformcustomizertolistWebPart extends BaseClientSideW
|
|||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
return Version.parse("1.0");
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
|
|
@ -85,20 +90,20 @@ export default class ReactAddformcustomizertolistWebPart extends BaseClientSideW
|
|||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
description: strings.PropertyPaneDescription,
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField('description', {
|
||||
label: strings.DescriptionFieldLabel
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
PropertyPaneTextField("description", {
|
||||
label: strings.DescriptionFieldLabel,
|
||||
}),
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,5 +6,5 @@ export interface IReactAddformcustomizertolistProps {
|
|||
environmentMessage: string;
|
||||
hasTeamsContext: boolean;
|
||||
userDisplayName: string;
|
||||
context: any;
|
||||
context: WebPartContext;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,50 @@
|
|||
import * as React from 'react';
|
||||
import styles from './ReactAddformcustomizertolist.module.scss';
|
||||
import { IReactAddformcustomizertolistProps } from './IReactAddformcustomizertolistProps';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import * as React from "react";
|
||||
import styles from "./ReactAddformcustomizertolist.module.scss";
|
||||
import { IReactAddformcustomizertolistProps } from "./IReactAddformcustomizertolistProps";
|
||||
|
||||
import { SPFI, SPFx } from '@pnp/sp';
|
||||
import { getSP } from '../pnpjsConfig';
|
||||
import { SPFI } from "@pnp/sp";
|
||||
import { getSP } from "../pnpjsConfig";
|
||||
import { Logger, LogLevel } from "@pnp/logging";
|
||||
import { IItemUpdateResult } from "@pnp/sp/items";
|
||||
import { Label, PrimaryButton } from '@microsoft/office-ui-fabric-react-bundle';
|
||||
import { Label } from "@microsoft/office-ui-fabric-react-bundle";
|
||||
import "@pnp/sp/content-types/list";
|
||||
import "@pnp/sp/webs";
|
||||
import "@pnp/sp/lists";
|
||||
import { SPHttpClient, SPHttpClientResponse, SPHttpClientConfiguration, ISPHttpClientOptions } from '@microsoft/sp-http';
|
||||
import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http";
|
||||
|
||||
|
||||
import { SitePicker } from "@pnp/spfx-controls-react/lib/SitePicker";
|
||||
import { ISite, SitePicker } from "@pnp/spfx-controls-react/lib/SitePicker";
|
||||
import { ListPicker } from "@pnp/spfx-controls-react/lib/ListPicker";
|
||||
import { IReactAddformcustomizertolistState } from './IReactAddformcustomizertolistState';
|
||||
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
|
||||
import { IContentTypeInfo } from '@pnp/sp/content-types/types';
|
||||
import { Web } from '@pnp/sp/webs';
|
||||
import { ITextFieldProps, TextField } from 'office-ui-fabric-react/lib/TextField';
|
||||
import { IStackStyles, IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
|
||||
import { DefaultButton, IButtonStyles, IconButton } from 'office-ui-fabric-react/lib/Button';
|
||||
import { Callout } from 'office-ui-fabric-react/lib/Callout';
|
||||
import { useBoolean, useId } from '@fluentui/react-hooks';
|
||||
import { FontIcon, IIconStyles } from 'office-ui-fabric-react/lib/Icon';
|
||||
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
|
||||
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
|
||||
import { Image, IImageProps } from 'office-ui-fabric-react/lib/Image';
|
||||
import Dialog, { DialogFooter, DialogType } from 'office-ui-fabric-react/lib/Dialog';
|
||||
import { IReactAddformcustomizertolistState } from "./IReactAddformcustomizertolistState";
|
||||
import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
|
||||
import { IContentTypeInfo } from "@pnp/sp/content-types/types";
|
||||
import { IWeb, Web } from "@pnp/sp/webs";
|
||||
import { TextField } from "office-ui-fabric-react/lib/TextField";
|
||||
import {
|
||||
IStackStyles,
|
||||
IStackTokens,
|
||||
Stack,
|
||||
} from "office-ui-fabric-react/lib/Stack";
|
||||
import {
|
||||
DefaultButton,
|
||||
IButtonStyles,
|
||||
IconButton,
|
||||
} from "office-ui-fabric-react/lib/Button";
|
||||
import { Callout } from "office-ui-fabric-react/lib/Callout";
|
||||
import { Checkbox } from "office-ui-fabric-react/lib/Checkbox";
|
||||
import { Image } from "office-ui-fabric-react/lib/Image";
|
||||
import Dialog, {
|
||||
DialogFooter,
|
||||
DialogType,
|
||||
IDialogContentProps,
|
||||
} from "office-ui-fabric-react/lib/Dialog";
|
||||
import { IIconProps, IModalProps } from "office-ui-fabric-react";
|
||||
import { IList } from "@pnp/sp/lists";
|
||||
|
||||
const iconClass = mergeStyles({
|
||||
fontSize: 20,
|
||||
height: 12,
|
||||
width: 12,
|
||||
margin: '5px 25px',
|
||||
});
|
||||
// const iconClass = mergeStyles({
|
||||
// fontSize: 20,
|
||||
// height: 12,
|
||||
// width: 12,
|
||||
// margin: "5px 25px",
|
||||
// });
|
||||
|
||||
const stackTokens: IStackTokens = {
|
||||
childrenGap: 10,
|
||||
|
|
@ -46,27 +54,36 @@ const chkstackTokens: IStackTokens = {
|
|||
childrenGap: 6,
|
||||
};
|
||||
|
||||
const labelCalloutStackStyles: Partial<IStackStyles> = { root: { padding: 20 } };
|
||||
const labelCalloutStackStyles: Partial<IStackStyles> = {
|
||||
root: { padding: 20 },
|
||||
};
|
||||
const iconButtonStyles: Partial<IButtonStyles> = { root: { marginBottom: -3 } };
|
||||
const iconProps = { iconName: 'Info' };
|
||||
const iconProps: IIconProps = { iconName: "Info" };
|
||||
|
||||
const modelProps = {
|
||||
const modelProps: IModalProps = {
|
||||
isBlocking: false,
|
||||
styles: { main: { maxWidth: 450 } },
|
||||
};
|
||||
|
||||
export interface IBodyObject {
|
||||
NewFormClientSideComponentId?: string;
|
||||
EditFormClientSideComponentId?: string;
|
||||
DisplayFormClientSideComponentId?: string;
|
||||
}
|
||||
|
||||
export default class ReactAddformcustomizertolist extends React.Component<IReactAddformcustomizertolistProps, IReactAddformcustomizertolistState> {
|
||||
|
||||
private LOG_SOURCE = "ReactAddformcustomizertolist";
|
||||
export default class ReactAddformcustomizertolist extends React.Component<
|
||||
IReactAddformcustomizertolistProps,
|
||||
IReactAddformcustomizertolistState
|
||||
> {
|
||||
private _LOG_SOURCE = "ReactAddformcustomizertolist";
|
||||
private _sp: SPFI;
|
||||
|
||||
private dialogContentProps = {
|
||||
private _dialogContentProps: IDialogContentProps = {
|
||||
type: DialogType.largeHeader,
|
||||
title: 'Information!',
|
||||
title: "Information!",
|
||||
subText: "",
|
||||
};
|
||||
constructor(props: IReactAddformcustomizertolistProps) {
|
||||
public constructor(props: IReactAddformcustomizertolistProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sites: [],
|
||||
|
|
@ -97,58 +114,66 @@ export default class ReactAddformcustomizertolist extends React.Component<IReact
|
|||
this.toggleIsCalloutVisible = this.toggleIsCalloutVisible.bind(this);
|
||||
this.toggleHideDialog = this.toggleHideDialog.bind(this);
|
||||
this.onCustomSiteUrlChange = this.onCustomSiteUrlChange.bind(this);
|
||||
this.handleCustomSiteUrlChange = this.handleCustomSiteUrlChange.bind(this);
|
||||
this.SiteSelectionChange = this.SiteSelectionChange.bind(this);
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<IReactAddformcustomizertolistProps> {
|
||||
try {
|
||||
const {
|
||||
hasTeamsContext
|
||||
} = this.props;
|
||||
const { hasTeamsContext } = this.props;
|
||||
return (
|
||||
<section className={`${styles.reactAddformcustomizertolist} ${hasTeamsContext ? styles.teams : ''}`} >
|
||||
<section
|
||||
className={`${styles.reactAddformcustomizertolist} ${
|
||||
hasTeamsContext ? styles.teams : ""
|
||||
}`}
|
||||
>
|
||||
<h1 className={styles.headeClass}>Add form customizer to list</h1>
|
||||
<Stack tokens={stackTokens}>
|
||||
{
|
||||
!this.state.chkCustomSiteUrl && (
|
||||
<SitePicker
|
||||
context={this.props.context}
|
||||
label={'Select the site'}
|
||||
mode={'site'}
|
||||
allowSearch={true}
|
||||
multiSelect={false}
|
||||
onChange={(sites) => {
|
||||
console.log(sites);
|
||||
this.setState({ siteUrl: sites[0].url });
|
||||
this.setState({ sites: sites });
|
||||
this.setState({ contentTypes: [] });
|
||||
}}
|
||||
placeholder={'Select the site'}
|
||||
searchPlaceholder={'Choose the site'}
|
||||
selectedSites={this.state.sites}
|
||||
initialSites={this.state.sites}
|
||||
{!this.state.chkCustomSiteUrl && (
|
||||
<SitePicker
|
||||
context={this.props.context}
|
||||
label={"Select the site"}
|
||||
mode={"site"}
|
||||
allowSearch={true}
|
||||
multiSelect={false}
|
||||
onChange={this.SiteSelectionChange}
|
||||
// onChange={(sites) => {
|
||||
// console.log(sites);
|
||||
// this.setState({ siteUrl: sites[0].url });
|
||||
// this.setState({ sites: sites });
|
||||
// this.setState({ contentTypes: [] });
|
||||
// }}
|
||||
placeholder={"Select the site"}
|
||||
searchPlaceholder={"Choose the site"}
|
||||
selectedSites={this.state.sites}
|
||||
initialSites={this.state.sites}
|
||||
/>
|
||||
)}
|
||||
{this.state.siteUrl && (
|
||||
<Label>{`Selected site url: ${this.state.siteUrl}`}</Label>
|
||||
)}
|
||||
|
||||
<Checkbox
|
||||
label="Custom Site"
|
||||
value={"Custom Site"}
|
||||
checked={this.state.chkCustomSiteUrl}
|
||||
onChange={this.onCustomSiteUrlChange}
|
||||
/>
|
||||
{this.state.chkCustomSiteUrl && (
|
||||
<>
|
||||
<Label>Enter site url</Label>
|
||||
<TextField
|
||||
value={this.state.siteUrl}
|
||||
onChange={this.handleCustomSiteUrlChange}
|
||||
// onChange={(e) => {
|
||||
// this.handleCustomSiteUrlChange(e);
|
||||
// }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
this.state.siteUrl && (<Label>{`Selected site url: ${this.state.siteUrl}`}</Label>)
|
||||
}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Checkbox label="Custom Site" value={"Custom Site"} checked={this.state.chkCustomSiteUrl} onChange={this.onCustomSiteUrlChange} />
|
||||
{
|
||||
this.state.chkCustomSiteUrl && (
|
||||
<>
|
||||
<Label>Enter site url</Label>
|
||||
<TextField
|
||||
value={this.state.siteUrl}
|
||||
onChange={(e) => { this.handleCustomSiteUrlChange(e) }}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
<ListPicker context={this.props.context}
|
||||
<ListPicker
|
||||
context={this.props.context}
|
||||
label="Select the list"
|
||||
placeHolder="Select the list"
|
||||
baseTemplate={100}
|
||||
|
|
@ -157,7 +182,7 @@ export default class ReactAddformcustomizertolist extends React.Component<IReact
|
|||
webAbsoluteUrl={this.state.siteUrl}
|
||||
onSelectionChanged={this.onListPickerChange}
|
||||
selectedList={this.state.selectedList}
|
||||
disabled={!(this.state.siteUrl)}
|
||||
disabled={!this.state.siteUrl}
|
||||
/>
|
||||
|
||||
<Dropdown
|
||||
|
|
@ -169,7 +194,6 @@ export default class ReactAddformcustomizertolist extends React.Component<IReact
|
|||
selectedKey={this.state.selectedContnetType}
|
||||
/>
|
||||
|
||||
|
||||
<Stack horizontal tokens={chkstackTokens}>
|
||||
<Label required={true}>Client Component ID </Label>
|
||||
<IconButton
|
||||
|
|
@ -182,42 +206,84 @@ export default class ReactAddformcustomizertolist extends React.Component<IReact
|
|||
/>
|
||||
{this.state.isCalloutVisible && (
|
||||
<Callout
|
||||
target={'#' + "iconButtonId"}
|
||||
target={"#iconButtonId"}
|
||||
setInitialFocus
|
||||
onDismiss={this.toggleIsCalloutVisible}
|
||||
ariaDescribedBy={"description"}
|
||||
role="alertdialog"
|
||||
>
|
||||
<Stack tokens={stackTokens} horizontalAlign="start" styles={labelCalloutStackStyles}>
|
||||
<Image src={require('../assets/ClientComponentID.png')} alt='Client Component ID' height={400} width={500}></Image>
|
||||
<span id={"description"}>Enter the 'Client Component ID' present in form customizer manifest json file.</span>
|
||||
<DefaultButton onClick={this.toggleIsCalloutVisible}>Close</DefaultButton>
|
||||
<Stack
|
||||
tokens={stackTokens}
|
||||
horizontalAlign="start"
|
||||
styles={labelCalloutStackStyles}
|
||||
>
|
||||
<Image
|
||||
src={require("../assets/ClientComponentID.png")}
|
||||
alt="Client Component ID"
|
||||
height={400}
|
||||
width={500}
|
||||
/>
|
||||
<span id={"description"}>
|
||||
{`
|
||||
Enter the 'Client Component ID' present in form customizer
|
||||
manifest json file.`}
|
||||
</span>
|
||||
<DefaultButton onClick={this.toggleIsCalloutVisible}>
|
||||
Close
|
||||
</DefaultButton>
|
||||
</Stack>
|
||||
</Callout>
|
||||
)}
|
||||
</Stack>
|
||||
<TextField
|
||||
value={this.state.clientComponentID}
|
||||
onChange={(e) => { this.handleCCIDChange(e) }}
|
||||
onChange={this.handleCCIDChange}
|
||||
// onChange={(e) => {
|
||||
// this.handleCCIDChange(e);
|
||||
// }}
|
||||
/>
|
||||
|
||||
<Label>Select the required form to associate the customizer</Label>
|
||||
<Stack horizontal tokens={chkstackTokens} >
|
||||
<Checkbox label="New Form" value={"New Form"} checked={this.state.NewForm} onChange={this.onNewFormChange} />
|
||||
<Checkbox label="Edit Form" value={"Edit Form"} checked={this.state.EditForm} onChange={this.onEditFormChange} />
|
||||
<Checkbox label="View Form" value={"View Form"} checked={this.state.ViewForm} onChange={this.onViewFormChange} />
|
||||
<Stack horizontal tokens={chkstackTokens}>
|
||||
<Checkbox
|
||||
label="New Form"
|
||||
value={"New Form"}
|
||||
checked={this.state.NewForm}
|
||||
onChange={this.onNewFormChange}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Edit Form"
|
||||
value={"Edit Form"}
|
||||
checked={this.state.EditForm}
|
||||
onChange={this.onEditFormChange}
|
||||
/>
|
||||
<Checkbox
|
||||
label="View Form"
|
||||
value={"View Form"}
|
||||
checked={this.state.ViewForm}
|
||||
onChange={this.onViewFormChange}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
|
||||
<Stack horizontal tokens={stackTokens}>
|
||||
<DefaultButton text="Associate" onClick={this.addFormCustomizer} allowDisabledFocus disabled={this.state.disabled} />
|
||||
<DefaultButton text="Remove Association" onClick={this.removeFormCustomizer} allowDisabledFocus disabled={this.state.disabled} />
|
||||
<DefaultButton
|
||||
text="Associate"
|
||||
onClick={this.addFormCustomizer}
|
||||
allowDisabledFocus
|
||||
disabled={this.state.disabled}
|
||||
/>
|
||||
<DefaultButton
|
||||
text="Remove Association"
|
||||
onClick={this.removeFormCustomizer}
|
||||
allowDisabledFocus
|
||||
disabled={this.state.disabled}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Dialog
|
||||
hidden={this.state.hideDialog}
|
||||
onDismiss={this.toggleHideDialog}
|
||||
dialogContentProps={this.dialogContentProps}
|
||||
dialogContentProps={this._dialogContentProps}
|
||||
modalProps={modelProps}
|
||||
>
|
||||
<Label>{this.state.userMessage}</Label>
|
||||
|
|
@ -227,72 +293,85 @@ export default class ReactAddformcustomizertolist extends React.Component<IReact
|
|||
</Dialog>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</section >
|
||||
</section>
|
||||
);
|
||||
|
||||
} catch (err) {
|
||||
Logger.write(`${this.LOG_SOURCE} (render) - ${JSON.stringify(err)} - `, LogLevel.Error);
|
||||
Logger.write(
|
||||
`${this._LOG_SOURCE} (render) - ${JSON.stringify(err)} - `,
|
||||
LogLevel.Error
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
public SiteSelectionChange(sites: ISite[]): void {
|
||||
console.log(sites);
|
||||
this.setState({ siteUrl: sites[0].url });
|
||||
this.setState({ sites: sites });
|
||||
this.setState({ contentTypes: [] });
|
||||
}
|
||||
|
||||
private toggleHideDialog() {
|
||||
public toggleHideDialog(): void {
|
||||
//this.dialogContentProps.subText = this.state.userMessage;
|
||||
this.setState({ hideDialog: !this.state.hideDialog });
|
||||
|
||||
}
|
||||
private toggleIsCalloutVisible() {
|
||||
this.setState({ isCalloutVisible: !this.state.isCalloutVisible })
|
||||
public toggleIsCalloutVisible(): void {
|
||||
this.setState({ isCalloutVisible: !this.state.isCalloutVisible });
|
||||
}
|
||||
|
||||
|
||||
private handleCustomSiteUrlChange(e: any) {
|
||||
public handleCustomSiteUrlChange(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
): void {
|
||||
this.setState({ siteUrl: e.target.value });
|
||||
}
|
||||
private handleCCIDChange(e: any) {
|
||||
public handleCCIDChange(e: React.ChangeEvent<HTMLInputElement>): void {
|
||||
this.setState({ clientComponentID: e.target.value });
|
||||
}
|
||||
|
||||
private onListPickerChange(list: string) {
|
||||
public async onListPickerChange(list: string): Promise<void> {
|
||||
try {
|
||||
this.setState({ selectedList: list });
|
||||
this.setState({ contentTypes: [] });
|
||||
this._getContentTypes(list);
|
||||
await this._getContentTypes(list);
|
||||
} catch (err) {
|
||||
Logger.write(
|
||||
`${this._LOG_SOURCE} (onListPickerChange) - ${JSON.stringify(err)} - `,
|
||||
LogLevel.Error
|
||||
);
|
||||
}
|
||||
catch (err) {
|
||||
Logger.write(`${this.LOG_SOURCE} (onListPickerChange) - ${JSON.stringify(err)} - `, LogLevel.Error);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private _getContentTypes = async (listNameorListId: string): Promise<void> => {
|
||||
private _getContentTypes = async (
|
||||
listNameorListId: string
|
||||
): Promise<void> => {
|
||||
try {
|
||||
|
||||
var ctTypes: { key: string, text: string }[] = [];
|
||||
ctTypes.push({ key: '', text: '' });
|
||||
const web = Web([this._sp.web, this.state.siteUrl]);
|
||||
const list = web.lists.getById(listNameorListId);
|
||||
const ctTypes: { key: string; text: string }[] = [];
|
||||
ctTypes.push({ key: "", text: "" });
|
||||
const web: IWeb = Web([this._sp.web, this.state.siteUrl]);
|
||||
const list: IList = web.lists.getById(listNameorListId);
|
||||
const listCTTypes: IContentTypeInfo[] = await list.contentTypes();
|
||||
|
||||
for await (var currentCTType of listCTTypes) {
|
||||
var id = currentCTType.Id.StringValue.toString();
|
||||
for await (const currentCTType of listCTTypes) {
|
||||
const id: string = currentCTType.Id.StringValue.toString();
|
||||
ctTypes.push({ key: id, text: currentCTType.Name });
|
||||
}
|
||||
this.setState({ contentTypes: ctTypes });
|
||||
} catch (err) {
|
||||
Logger.write(
|
||||
`${this._LOG_SOURCE} (_getContentTypes) - ${JSON.stringify(err)} - `,
|
||||
LogLevel.Error
|
||||
);
|
||||
}
|
||||
catch (err) {
|
||||
Logger.write(`${this.LOG_SOURCE} (_getContentTypes) - ${JSON.stringify(err)} - `, LogLevel.Error);
|
||||
}
|
||||
};
|
||||
|
||||
public CTTypeChanged(
|
||||
ev: React.FormEvent<HTMLDivElement>,
|
||||
item: IDropdownOption
|
||||
): void {
|
||||
this.setState({ selectedContnetType: item.key ? item.key.toString() : "" });
|
||||
}
|
||||
|
||||
private CTTypeChanged(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void {
|
||||
this.setState({ selectedContnetType: item.key ? item.key.toString() : "" })
|
||||
}
|
||||
|
||||
|
||||
private reloadWebpart = (): void => {
|
||||
public reloadWebpart = (): void => {
|
||||
this.setState({
|
||||
sites: [],
|
||||
siteUrl: "",
|
||||
|
|
@ -310,138 +389,164 @@ export default class ReactAddformcustomizertolist extends React.Component<IReact
|
|||
//userMessage: "",
|
||||
//hideDialog: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
private async addFormCustomizer() {
|
||||
var isValid = this.validedFormFields();
|
||||
public async addFormCustomizer(): Promise<boolean> {
|
||||
const isValid: boolean = this.validedFormFields();
|
||||
|
||||
try {
|
||||
|
||||
if (isValid) {
|
||||
|
||||
var result = await this.addremoveFormCustomizer("add");
|
||||
const result: SPHttpClientResponse = await this.addremoveFormCustomizer(
|
||||
"add"
|
||||
);
|
||||
if (!result.ok) {
|
||||
Logger.write(`Could not update content type - ${this.LOG_SOURCE}`, LogLevel.Error);
|
||||
Logger.write(
|
||||
`Could not update content type - ${this._LOG_SOURCE}`,
|
||||
LogLevel.Error
|
||||
);
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
//alert("Associated the form customiser with the selected list");
|
||||
//this.dialogContentProps.subText = "Associated the form customiser with the selected list.";
|
||||
this.setState({
|
||||
hideDialog: false,
|
||||
userMessage: "Associated the form customiser with the selected list."
|
||||
userMessage:
|
||||
"Associated the form customiser with the selected list.",
|
||||
});
|
||||
//Modal dialog
|
||||
this.reloadWebpart();
|
||||
}
|
||||
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
//alert("Enter all the required fields");
|
||||
// this.dialogContentProps.subText = "Enter all the required fields.";
|
||||
this.setState({
|
||||
hideDialog: false,
|
||||
userMessage: "Enter all the required fields."
|
||||
userMessage: "Enter all the required fields.",
|
||||
});
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
Logger.write(`${this.LOG_SOURCE} (addFormCustomizer) - ${JSON.stringify(err)} - `, LogLevel.Error);
|
||||
} catch (err) {
|
||||
Logger.write(
|
||||
`${this._LOG_SOURCE} (addFormCustomizer) - ${JSON.stringify(err)} - `,
|
||||
LogLevel.Error
|
||||
);
|
||||
}
|
||||
}
|
||||
private validedFormFields() {
|
||||
var isFormValid = false;
|
||||
public validedFormFields(): boolean {
|
||||
let isFormValid = false;
|
||||
|
||||
if ((this.state.siteUrl && this.state.selectedList && this.state.clientComponentID &&
|
||||
this.state.selectedContnetType) &&
|
||||
(this.state.NewForm || this.state.EditForm || this.state.ViewForm)) {
|
||||
if (
|
||||
this.state.siteUrl &&
|
||||
this.state.selectedList &&
|
||||
this.state.clientComponentID &&
|
||||
this.state.selectedContnetType &&
|
||||
(this.state.NewForm || this.state.EditForm || this.state.ViewForm)
|
||||
) {
|
||||
isFormValid = true;
|
||||
}
|
||||
|
||||
return isFormValid;
|
||||
}
|
||||
|
||||
private async removeFormCustomizer() {
|
||||
var isValid = this.validedFormFields();
|
||||
public async removeFormCustomizer(): Promise<boolean> {
|
||||
const isValid: boolean = this.validedFormFields();
|
||||
try {
|
||||
|
||||
if (isValid) {
|
||||
|
||||
var result = await this.addremoveFormCustomizer("remove");
|
||||
const result: SPHttpClientResponse = await this.addremoveFormCustomizer(
|
||||
"remove"
|
||||
);
|
||||
if (!result.ok) {
|
||||
Logger.write(`Could not update content type - ${this.LOG_SOURCE}`, LogLevel.Error);
|
||||
Logger.write(
|
||||
`Could not update content type - ${this._LOG_SOURCE}`,
|
||||
LogLevel.Error
|
||||
);
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
//alert("Removed the associated form customiser from the selected list");
|
||||
// this.dialogContentProps.subText = "Removed the associated form customiser from the selected list.";
|
||||
this.setState({
|
||||
hideDialog: false,
|
||||
userMessage: "Removed the associated form customiser from the selected list."
|
||||
userMessage:
|
||||
"Removed the associated form customiser from the selected list.",
|
||||
});
|
||||
this.reloadWebpart();
|
||||
}
|
||||
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
// alert("Enter all the required fields");
|
||||
//this.dialogContentProps.subText = "Enter all the required fields.";
|
||||
this.setState({
|
||||
hideDialog: false,
|
||||
userMessage: "Enter all the required fields."
|
||||
userMessage: "Enter all the required fields.",
|
||||
});
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
Logger.write(`${this.LOG_SOURCE} (addFormCustomizer) - ${JSON.stringify(err)} - `, LogLevel.Error);
|
||||
} catch (err) {
|
||||
Logger.write(
|
||||
`${this._LOG_SOURCE} (addFormCustomizer) - ${JSON.stringify(err)} - `,
|
||||
LogLevel.Error
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private async addremoveFormCustomizer(addorremove: string) {
|
||||
const web = Web([this._sp.web, this.state.siteUrl]);
|
||||
public async addremoveFormCustomizer(
|
||||
addorremove: string
|
||||
): Promise<SPHttpClientResponse> {
|
||||
const web: IWeb = Web([this._sp.web, this.state.siteUrl]);
|
||||
//conext
|
||||
const ctUrl = await web.lists.getById(this.state.selectedList).contentTypes.getById(this.state.selectedContnetType).toUrl();
|
||||
let bodyObject = {};
|
||||
const ctUrl: string = await web.lists
|
||||
.getById(this.state.selectedList)
|
||||
.contentTypes.getById(this.state.selectedContnetType)
|
||||
.toUrl();
|
||||
|
||||
const bodyObj: IBodyObject = {};
|
||||
|
||||
if (this.state.NewForm) {
|
||||
addorremove == "add" ? bodyObject["NewFormClientSideComponentId"] = this.state.clientComponentID : bodyObject["NewFormClientSideComponentId"] = "";
|
||||
bodyObj.NewFormClientSideComponentId =
|
||||
addorremove === "add" ? this.state.clientComponentID : "";
|
||||
}
|
||||
if (this.state.EditForm) {
|
||||
addorremove == "add" ? bodyObject["EditFormClientSideComponentId"] = this.state.clientComponentID : bodyObject["EditFormClientSideComponentId"] = "";
|
||||
bodyObj.EditFormClientSideComponentId =
|
||||
addorremove === "add" ? this.state.clientComponentID : "";
|
||||
}
|
||||
if (this.state.ViewForm) {
|
||||
addorremove == "add" ? bodyObject["DisplayFormClientSideComponentId"] = this.state.clientComponentID : bodyObject["DisplayFormClientSideComponentId"] = "";
|
||||
bodyObj.DisplayFormClientSideComponentId =
|
||||
addorremove === "add" ? this.state.clientComponentID : "";
|
||||
}
|
||||
|
||||
let result: SPHttpClientResponse = null;
|
||||
result = await this.props.context.spHttpClient.fetch(`${ctUrl}`, SPHttpClient.configurations.v1, {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify(bodyObject)
|
||||
});
|
||||
result = await this.props.context.spHttpClient.fetch(
|
||||
`${ctUrl}`,
|
||||
SPHttpClient.configurations.v1,
|
||||
{
|
||||
method: "PATCH",
|
||||
body: JSON.stringify(bodyObj),
|
||||
}
|
||||
);
|
||||
return result;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
private onCustomSiteUrlChange(ev?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) {
|
||||
public onCustomSiteUrlChange(
|
||||
ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
|
||||
isChecked?: boolean
|
||||
): void {
|
||||
this.setState({ chkCustomSiteUrl: isChecked });
|
||||
}
|
||||
|
||||
private onNewFormChange(ev?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) {
|
||||
public onNewFormChange(
|
||||
ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
|
||||
isChecked?: boolean
|
||||
): void {
|
||||
this.setState({ NewForm: isChecked });
|
||||
}
|
||||
private onEditFormChange(ev?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) {
|
||||
public onEditFormChange(
|
||||
ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
|
||||
isChecked?: boolean
|
||||
): void {
|
||||
this.setState({ EditForm: isChecked });
|
||||
}
|
||||
|
||||
private onViewFormChange(ev?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) {
|
||||
public onViewFormChange(
|
||||
ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
|
||||
isChecked?: boolean
|
||||
): void {
|
||||
this.setState({ ViewForm: isChecked });
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ import "@pnp/sp/lists";
|
|||
import "@pnp/sp/items";
|
||||
import "@pnp/sp/batching";
|
||||
|
||||
var _sp: SPFI = null;
|
||||
let _sp: SPFI = null;
|
||||
|
||||
export const getSP = (context?: WebPartContext): SPFI => {
|
||||
if (_sp === null && context != null) {
|
||||
if (_sp === null && context !== null) {
|
||||
//You must add the @pnp/logging package to include the PnPLogging behavior it is no longer a peer dependency
|
||||
// The LogLevel set's at what level a message will be written to the console
|
||||
_sp = spfi().using(SPFx(context)).using(PnPLogging(LogLevel.Warning));
|
||||
|
|
|
|||
Loading…
Reference in New Issue