Modern & SPFX
Something Went Wrong
Failed to load entry point from component […]
This can mean that you’ve recently added a package to your project. You likely still serving the dev build, and you have yet to deploy a production build since you added the project. Fix: build and deploy a prod build. You can then return to a dev build without the above error.
Misc
- To switch from loading debug manifests (site extensions) delete the
spfx-debug
session storage variable. ?maintenancemode=true
- attach to url to see modern page debug information
PnP-Provisioning
Provisioning Keywords
{site}
- replaced with relative path to site, i.e.
/sites/MySite
{hosturl}
- replaced with url of tenant, i.e.
https://www.contoso.sharepoint.com
Search
Get search query with tokens expanded
To see the final expanded search query that was parsed by SharePoint:
- Open Network tab of browser’s dev tools and locate the relevant postquery request response (filter by postquery).
- Select the Preview tab of the request response and expand the following path
PrimaryQueryResult.RelevantResults.Properties
- Expand the property with key “QueryModification”. This holds the final expanded search query template.
Site Columns
Default Date column value of “last day of previous month”
=DATE(YEAR(TODAY()),MONTH(TODAY()),1)-1
Cloning/Adding/Updating list items via sp pnp js.
The SharePoint REST api as exposed by sp pnp js has some interesting quirks. You can’t grab the values of a list item and apply that data object as-is to create/update a list item. Different column types (and single vs multi-value variations) have different considerations, and the error messages are esoteric.
- Choice (Multi): retrieved as array, but must be submitted as an object with the array in the
results
property. - Lookup (Multi): retrieved as array, but must be submitted as an object with the array in the
results
property. - People/Group:
- retrieved in the form of
<column>Id
and<column>StringId
(i.e.MyPersonColumnId
) and must be submitted as<column>Id
. - The value submitted must be in the form of a web user id, i.e.
17
instead of the long claim formi:0#.f|membership|sou***@w****
.
- retrieved in the form of
- People/Group (Multi): retrieved as array, but must be submitted as an object with the array in the
results
property. - Single Taxonomy Fields:
- Retrieved as an object with
Label
,TermGuid
, andWssId
properties and submitted the same way. -1
can be used as theWssId
regardless of the retrieved value.- I often see people add the the
__metadata
property to this object before submitting, aka__metadata: { type: 'SP.Taxonomy.TaxonomyFieldValue' }
. I have not found this to be required.
- Retrieved as an object with
- Taxonomy Fields (Multi):
- Retrieved in the form of
<column>
and submitted as<internalColumn>
. The internal column can be looked up viapnp.sp.web.lists.getByTitle('foo').fields.getByTitle(column + '_0}).get().then(({internalName }) => { ... }
Note the_0
part, that’s important. - Although the field is retrieved as an array of objects containing
Label
,TermGuid
, andWssId
properties it must be returned as a single string in the form of:<WssId>;#<Label>|<TermGuid>;#<OtherWssid>;#<OtherLabel>|<OtherTermGuid>;#
i.e.,1;#General|80547571-2529-4c0b-8ccd-288a29479da5;#3;#What's Happening|505c9dcd-7b5a-4448-b49c-a24bbd0077fc;#
. -1
can be used as theWssId
value regardless of the retrieved value.
- Retrieved in the form of
The same considerations apply for setting empty values, namely that multi-value fields including choice, lookup, and people must submit as an object with an empty array in the results
property. You can look up whether a field accepts multiple values by retrieving the field:
const field = await pnp.sp.web.list.getByTitle('foo').fields.getByTitle(fieldId).get();
const isMultiValue = field.AllowMultipleValues;