2021-08.md

Mini #20: SharePoint WebParts don’t load for guest users by default (and other problems with SharePoint guests)

via Laura Kokkarinen

Mini #19: PowerShell - Parse the SPFx version in package.json & use it as the build number

via GitHub gist

$version = (Get-Content package.json) -join "`n" | ConvertFrom-Json | Select -ExpandProperty "version"

Mini #18: Add a gradient on top of a background image?

via WebDevEtc

linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),

Mini #17: Create an accordion pane property pane

via TahoeNinjas

displayGroupsAsAccordion: true,
groups: [
  {
    groupName: "Group 1",
    isCollapsed: true,
    groupFields: [
    ...

Mini #16: RGB to HEX is not built-in JavaScript

via StackOverflow

Mini #15: Multiline textarea with ellipsis - ReactJS

via StackOverflow

Mini #14: Hiding text-overflow

via w3schools

Mini #13: Introducing WebPart width in SPFX 1.12

via Microsoft Docs

Mini #12: Flexbox is one dimensional while Grid is two-dimensional layout

via MDN

Mini #11: Alternating row color using Array.map index param

via StackOverflow

Mini #10: Filter npm audit based on criticality in PowerShell

via StackOverflow

Mini #9: PowerShell - Using a Custom Enum To Get Tab-Completion on a Parameter

via mcpmag

Mini #8: User profile photo using Graph (PnP JS)

via PnP JS docs

You can also fall back to the SharePoint default placeholder using _layouts/images/O14_person_placeHolder_192.png as needed

Mini #7: Rounded corners using border-radius

via w3schools

Rounded corner are super easy! 50% for full circle.

Mini #6: Fluent UI spinner does not support bigger sizes

via this Github issue

Simply change the width\height to get any size you want

var spinnerStyles = {
  circle: {
    height: this.props.spinnerSize,
    width: this.props.spinnerSize,
  }
};

<Spinner styles={spinnerStyles} />

Mini #5: Initialising PnP JS

via PnP JS docs

This one-liner format initialising @sp is the one that worked for me!

public onInit(): Promise<void> {

  return super.onInit().then(_ => {

    // other init code may be present

    sp.setup({
      spfxContext: this.context
    });
  });
}

Mini #4: Set a multi-value User Profile property via PnP JS

via PnP JS docs

Mini #3: A custom date format

via css-tricks.com

Years are easy, months are 0 based numbers so are days - neither holds the names of months/days so that will need to be added as well.

Mini #2: Date Ordinal in JavaScript

via StackOverflow

JavaScript date object does not provide ordinal. If needed, you'd need to construct something like the below (good for situations when toLocaleDateString does not provide the format wanted)

const nth = function(d) {
  if (d > 3 && d < 21) return 'th';
  switch (d % 10) {
    case 1:  return "st";
    case 2:  return "nd";
    case 3:  return "rd";
    default: return "th";
  }
}

Mini #1: Get-Alias to find names of custom PowerShell cmdlets

via Microsoft Docs

For bonus points, make sure your custom PowerShell cmdlets all use the same prefix (I use func, see below)

Get-Alias -Definition "func*"