Sp-dev-docs: Breaking change in SPFx dynamic data consuming page environment data (started June 23rd 2020)

[wobba]

Category

• [x] Bug

Describe the bug

June 23rd a change happened which caused DynamicProperty.tryGetValue() to return an object instead of a string. This has had a severe impact on PnP Modern Search web part scenario's which use this functionality. It's not related to search, but to use of any of the page environment properties.

The failing line in the sample below is value = this.properties.foo.tryGetValue(); which was expected to return a string, which now has to be parsed.

It's ok to have a change, but should then be tied to a newer release of SPFx.

Create a web part with the sample code, configure to use Dynamic data via any page environment. Using local workbench you get a string, using hosted workbench you get an object. We're tracking the issue at https://github.com/microsoft-search/pnp-modern-search/issues/325

import { Version } from '@microsoft/sp-core-library';
import { IPropertyPaneConfiguration, PropertyPaneDynamicField } from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart, IWebPartPropertiesMetadata } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import * as strings from 'DdTestWebPartStrings';
import { DynamicProperty } from '@microsoft/sp-component-base';

export interface IDdTestWebPartProps {
    foo: DynamicProperty<string>;
}

export default class DdTestWebPart extends BaseClientSideWebPart<IDdTestWebPartProps> {
    public render(): void {

        let value = "";
        if (this.properties && this.properties.foo) {
            value = this.properties.foo.tryGetValue();
        }

        this.domElement.innerHTML = `
      <div>
        ${escape(value)}
      </div>`;
    }

    protected get propertiesMetadata(): IWebPartPropertiesMetadata {
        return {
            'foo': {
                dynamicPropertyType: 'string'
            }
        };
    }

    protected get dataVersion(): Version {
        return Version.parse('1.0');
    }

    protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
            pages: [
                {
                    header: { description: strings.PropertyPaneDescription },
                    groups: [{
                        groupName: strings.BasicGroupName,
                        groupFields: [PropertyPaneDynamicField('foo', { label: strings.DescriptionFieldLabel })
                        ]
                    }]
                }
            ]
        };
    }
}

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[wobba]

Update: The fix is scheduled to roll out this or next week.

[PaoloPia]

This is also a breaking change for any Dynamic Data consumer of the Modern Content Query Web Part (https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-content-query-webpart/Online).

[spo365]

Hi All,
In-order to fix this issue we have changed in code, now my search code is checking for string and object it worked fine, now from today web-part is not refreshing the data in search result page.
Did Microsoft change something on backend again ?

File name :- SearchBoxWebPart.ts
public render(): void {

if (!this._initComplete) {
  return;
}

let inputValue = this.properties.defaultQueryKeywords.tryGetValue();

// if (inputValue && typeof(inputValue) === 'string') {

//   // Notify subscriber a new value if available
//   this._searchQuery.rawInputValue = decodeURIComponent(inputValue);
//   this.context.dynamicDataSourceManager.notifyPropertyChanged('searchQuery');
// }

if (inputValue) {
  if (typeof(inputValue) === 'string') {
    this._searchQuery = decodeURIComponent(inputValue);
  }
  else if (typeof(inputValue === 'object')) {

    const refChunks = this.properties.defaultQueryKeywords.reference.split(':');
    if (refChunks.length >= 3) {
      const paramType = refChunks[2];

      if (paramType === 'fragment') { 
        this._searchQuery = inputValue["fragment"]
      }
      else if (paramType.startsWith('queryParameters')) {
        const paramChunks = paramType.split('.');
        const queryTextParam = paramChunks.length === 2 ? paramChunks[1] : 'q';
        this._searchQuery = inputValue["queryParameters"][queryTextParam]
      }
    }
  }

[Dustify]

@spo365 might be unrelated but should

if (typeof(inputValue === 'object'))

be

if (typeof(inputValue) === 'object')

?

[spo365]

that typp error thanks for that, however our webpart is deployed in our environment.
When we search the document in search box it doesn't refresh the search result page. do we need to handle same condition on search result page ?

[wobba]

Thank you @Dustify and I'm pushing a 3.14.2 release with the fix (if needed) :) @spo365 both search result and webpart need the fix most likely.

[spo365]

seems like 3.14.2 release doesn't resolve my issue. now below line is giving undefined error.
let queryDataSourceValue = this.properties.queryKeywords.tryGetValue();

[wobba]

@spo365 better to discuss on the right issue list (pnp-modern-search), but tried the web part now on a site. Configured the web part to read dynamic data, and works as expected. If you have an issue report the issue with which dynamic data setting you are trying to read. Haven't seen an issue where this.properties.queryKeyword is not resolved, but could possibly add a check, but that wouldn't help you.

[spo365]

@wobba will being it on the pnp-modern-search issue list.

[webbrewer]

I had updated to 3.14.1 and all was well but noticed the same issue crop up again today - no results when keywords entered in a connected search box. However, after putting the page in edit mode and republishing, it started working again.

[stevebeauge]

@webbrewer, there was a typo in the 3.14.1 release of the pnp modern search WP.

today, a 3.14.2 has been released by @wobba to address this issue.

That said, this issue is related to SPFX engine. You should open an issue on the PnP Modern Search repository if related to the modern search WP

[ValerasNarbutas]

Noticed the same in our code also, my approach was
```typescript
if(source.getPropertyValue("UrlData")){
let obj = source.getPropertyValue(this.properties.propertyId);
dataSourceValue = this.deepFind(obj, this.properties.propertyPath);
}
private deepFind(obj, path) {
var paths = path.split('.')
, current = obj
, i;

for (i = 0; i < paths.length; ++i) {
if (current[paths[i]] == undefined) {
return undefined;
} else {
current = current[paths[i]];
}
}
return current;
}
````

[haydio]

Was a fix for this ever released @VesaJuvonen?

[wobba]

Tested in my dev tenant, and seems resolved.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues