Updated readme, added container and fixed linting issues
This commit is contained in:
Hugo Bernier
parent
53bcb9148a
commit
4ec42297f1
|
|
@ -0,0 +1,39 @@
|
|||
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
|
||||
{
|
||||
"name": "SPFx 1.16.1",
|
||||
"image": "docker.io/m365pnp/spfx:1.16.1",
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {},
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"editorconfig.editorconfig",
|
||||
"dbaeumer.vscode-eslint"
|
||||
],
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
"forwardPorts": [
|
||||
4321,
|
||||
35729
|
||||
],
|
||||
"portsAttributes": {
|
||||
"4321": {
|
||||
"protocol": "https",
|
||||
"label": "Manifest",
|
||||
"onAutoForward": "silent",
|
||||
"requireLocalPort": true
|
||||
},
|
||||
// Not needed for SPFx>= 1.12.1
|
||||
// "5432": {
|
||||
// "protocol": "https",
|
||||
// "label": "Workbench",
|
||||
// "onAutoForward": "silent"
|
||||
// },
|
||||
"35729": {
|
||||
"protocol": "https",
|
||||
"label": "LiveReload",
|
||||
"onAutoForward": "silent",
|
||||
"requireLocalPort": true
|
||||
}
|
||||
},
|
||||
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
|
||||
"remoteUser": "node"
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
echo
|
||||
echo -e "\e[1;94mInstalling Node dependencies\e[0m"
|
||||
npm install
|
||||
|
||||
## commands to create dev certificate and copy it to the root folder of the project
|
||||
echo
|
||||
echo -e "\e[1;94mGenerating dev certificate\e[0m"
|
||||
gulp trust-dev-cert
|
||||
|
||||
# Convert the generated PEM certificate to a CER certificate
|
||||
openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
|
||||
|
||||
# Copy the PEM ecrtificate for non-Windows hosts
|
||||
cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
|
||||
|
||||
## add *.cer to .gitignore to prevent certificates from being saved in repo
|
||||
if ! grep -Fxq '*.cer' ./.gitignore
|
||||
then
|
||||
echo "# .CER Certificates" >> .gitignore
|
||||
echo "*.cer" >> .gitignore
|
||||
fi
|
||||
|
||||
## add *.pem to .gitignore to prevent certificates from being saved in repo
|
||||
if ! grep -Fxq '*.pem' ./.gitignore
|
||||
then
|
||||
echo "# .PEM Certificates" >> .gitignore
|
||||
echo "*.pem" >> .gitignore
|
||||
fi
|
||||
|
||||
echo
|
||||
echo -e "\e[1;92mReady!\e[0m"
|
||||
|
||||
echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"
|
||||
|
|
@ -13,22 +13,22 @@ Attempts to replicate the functionality of Page Properties with the following im
|
|||
|
||||
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
| :warning: Important |
|
||||
|:---------------------------|
|
||||
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|
||||
| Every SPFx version is optimally compatible with specific versions of Node.js. In order to be able to build this sample, you need to ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|
||||
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
|
||||
|
||||
|
||||
|
||||
This sample is optimally compatible with the following environment configuration:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
|
@ -44,8 +44,9 @@ None
|
|||
|
||||
## Contributors
|
||||
|
||||
- [Mike Homol](https://homol.work), Principal Consultant, [ThreeWill](https://threewill.com/)
|
||||
- Abderahman Moujahid
|
||||
- [Mike Homol](https://github.com/mhomol), <https://homol.work> Principal> Consultant, [ThreeWill](https://threewill.com/)
|
||||
- [Abderahman Moujahid](https://github.com/Abderahman88)
|
||||
- [Valeras Narbutas](https://github.com/ValerasNarbutas)
|
||||
|
||||
## Version history
|
||||
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@ export default class AdvancedPagePropertiesWebPart extends BaseClientSideWebPart
|
|||
this._availableProperties = [];
|
||||
|
||||
Log.Write(`${_fields.length.toString()} fields retrieved!`);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
_fields.forEach((field: any) => {
|
||||
if (!field.FromBaseType && !field.Hidden && field.SchemaXml.indexOf("ShowInListSettings=\"FALSE\"") === -1
|
||||
&& field.TypeAsString !== "Boolean" && field.TypeAsString !== "Note") {
|
||||
|
|
@ -97,20 +98,23 @@ export default class AdvancedPagePropertiesWebPart extends BaseClientSideWebPart
|
|||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected onAddButtonClick (value: any) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
|
||||
protected onAddButtonClick (_value: any) {
|
||||
this.properties.selectedProperties.push(this._availableProperties[0].key.toString());
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
protected onDeleteButtonClick (value: any) {
|
||||
Log.Write(value.toString());
|
||||
var removed = this.properties.selectedProperties.splice(value, 1);
|
||||
const removed = this.properties.selectedProperties.splice(value, 1);
|
||||
Log.Write(`${removed[0]} removed.`);
|
||||
}
|
||||
|
||||
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
protected onPropertyPaneFieldChanged(propertyPath: string, _oldValue: any, newValue: any): void {
|
||||
if (propertyPath.indexOf("selectedProperty") >= 0) {
|
||||
Log.Write('Selected Property identified');
|
||||
let index: number = _.toInteger(propertyPath.replace("selectedProperty", ""));
|
||||
const index: number = _.toInteger(propertyPath.replace("selectedProperty", ""));
|
||||
this.properties.selectedProperties[index] = newValue;
|
||||
}
|
||||
}
|
||||
|
|
@ -125,7 +129,8 @@ export default class AdvancedPagePropertiesWebPart extends BaseClientSideWebPart
|
|||
Log.Write(`getPropertyPaneConfiguration`);
|
||||
|
||||
// Initialize with the Title entry
|
||||
var propDrops: IPropertyPaneField<any>[] = [];
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const propDrops: IPropertyPaneField<any>[] = [];
|
||||
propDrops.push(PropertyPaneTextField('title', {
|
||||
label: strings.TitleFieldLabel
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import { useState, useEffect, useRef } from 'react';
|
|||
import { PageProperty } from '../models';
|
||||
|
||||
import { getSP } from '../utilities/pnpjs-config';
|
||||
import { DateTimeFieldFormatType, DateTimeFieldFriendlyFormatType, FieldTypes, IField, IFieldInfo } from "@pnp/sp/fields/types";
|
||||
import "@pnp/sp/webs";
|
||||
import "@pnp/sp/lists";
|
||||
import "@pnp/sp/fields";
|
||||
|
|
@ -35,13 +34,14 @@ const AdvancedPageProperties: React.FunctionComponent<IAdvancedPagePropertiesPro
|
|||
* @description Gets the actual values for any selected properties, along with critical field metadata and ultimately re-sets the pagePropValues state
|
||||
*/
|
||||
async function refreshProperties () {
|
||||
var newSetOfValues: PageProperty[] = [];
|
||||
const newSetOfValues: PageProperty[] = [];
|
||||
|
||||
if (props.selectedProperties !== undefined && props.selectedProperties !== null) {
|
||||
Log.Write(`${props.selectedProperties.length.toString()} properties used.`);
|
||||
|
||||
// Get the value(s) for the field from the list item itself
|
||||
var allValues: any = {};
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let allValues: any = {};
|
||||
const sitePagesList = await _sp.web.lists.ensureSitePagesLibrary();
|
||||
if (props.context.pageContext.listItem !== undefined && props.context.pageContext.listItem !== null) {
|
||||
allValues = await sitePagesList.items.getById(props.context.pageContext.listItem.id).select(...props.selectedProperties).fieldValuesAsText();
|
||||
|
|
@ -56,7 +56,9 @@ const AdvancedPageProperties: React.FunctionComponent<IAdvancedPagePropertiesPro
|
|||
const field = await sitePagesList.fields.getByInternalNameOrTitle(prop)();
|
||||
|
||||
// Establish the values array
|
||||
var values: any[] = [];
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let values: any[] = [];
|
||||
// eslint-disable-next-line no-prototype-builtins
|
||||
if (allValues.hasOwnProperty(field.InternalName)) {
|
||||
switch (field.TypeAsString) {
|
||||
case "UserMulti":
|
||||
|
|
@ -102,7 +104,7 @@ const AdvancedPageProperties: React.FunctionComponent<IAdvancedPagePropertiesPro
|
|||
*/
|
||||
const RenderPageProperties = () => {
|
||||
if (pagePropValues !== undefined && pagePropValues !== null) {
|
||||
var retVal = _.map(pagePropValues, (prop) => {
|
||||
const retVal = _.map(pagePropValues, (prop) => {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.propNameRow}>{prop.info.Title}<span style={{display: 'none'}}> - {prop.info.TypeAsString}</span></div>
|
||||
|
|
@ -125,10 +127,11 @@ const AdvancedPageProperties: React.FunctionComponent<IAdvancedPagePropertiesPro
|
|||
* @returns
|
||||
*/
|
||||
const RenderPagePropValue = (prop: PageProperty) => {
|
||||
var retVal = _.map(prop.values, (val) => {
|
||||
const retVal = _.map(prop.values, (val) => {
|
||||
if (val !== null && val !== "") {
|
||||
switch (prop.info.TypeAsString) {
|
||||
case "URL":
|
||||
// eslint-disable-next-line no-case-declarations
|
||||
const url_parts = val.split(",");
|
||||
return (
|
||||
<span className={styles.urlValue}><a href={url_parts[0]} target="_blank" rel="noopener noreferrer" style={{color: semanticColors.link}}>{url_parts[1]}</a></span>
|
||||
|
|
|
|||
|
|
@ -2,5 +2,6 @@ import { IFieldInfo } from "@pnp/sp/fields";
|
|||
|
||||
export interface PageProperty {
|
||||
info: IFieldInfo;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
values: any[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,11 @@ import * as strings from "AdvancedPagePropertiesWebPartStrings";
|
|||
|
||||
export class Log {
|
||||
private static readonly logStyle: string = "background: crimson; padding: 5px; border-radius: 5px; color: white";
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
public static Write(s: string, always: boolean = false) {
|
||||
let d = new Date();
|
||||
let dateStr = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + '.' + d.getMilliseconds();
|
||||
public static Write(s: string, always = false):void {
|
||||
const d = new Date();
|
||||
const dateStr = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + '.' + d.getMilliseconds();
|
||||
|
||||
if (window.location.search.indexOf("debug") >= 0 || always) {
|
||||
console.log(`%c${strings.LogAppName} >> ${dateStr} >> ${s}`, Log.logStyle);
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
Project doesn't need to be upgraded
|
||||
Loading…
Reference in New Issue