Command Set: context.listView.columns contains a list of columns from different views/lists after navigation between pages

[AJIXuMuK]

Category

• Question
• Typo
• Bug
• Additional article idea

Expected or Desired Behavior

If a user navigates between pages context.listView.columns contains a list of columns for current view

Observed Behavior

If a user navigates between pages context.listView.columns contains a list of columns from ALL views that were visited since last page refresh.

Steps to Reproduce

1. Create a simple Command Set
2. Change onExecute code to log items from context.listView.columns in console:

console.log(this.context.listView.columns.map(c => c.field.displayName));

3. Add FeatureFramework elements.xml to register the command set for lists
4. add feature to package-solution.json
5. package your solution
6. deploy the solution to App Catalog and install on the site
7. Create multiple lists with different columns and display the links to them in Quick Launch
8. Navigate to one of the lists, open browser console and click the Command Set button
9. EXPECTED/OBSERVED: console contains a list of the columns for current view
10. Navigate to other list using Quick Launch, open browser console and click the Command Set button
11. EXPECTED: console contains a list of the columns for current view. OBSERVED: console contains a list of the columns from previous list view and current view.

[ravinleague]

Hi @AJIXuMuK ,
We had had similar issues a few weeks ago with this.context.listview.columns which was always returning 0.
After some research, we then started using,
this.viewId = this.context.pageContext.legacyPageContext.viewId to get the view id and then used pnp to query view columns/fields as follows,
this.context.pageContext.list.id.toString()).views.getById(this.viewId).fields.get().then((results:any)=>{
//code to handle results
});

Hope this directs you in the right direction.

[AJIXuMuK]

Hi @ravinleague,
This is the exact direction I'm using.
But... using this.context.pageContext.legacyPageContext.viewId will contain wrong id as well if user changes the view using view dropdown (see the image below):

In that case you should look for viewId parameter in QueryString.
Here is a helper method I'm using to get viewId:

    /**
     * Gets correct view id from the page
     * @param context SPFx Context
     */
    public static getPageViewId(context: IContext): string {
        const urlParams: URLSearchParams = new URLSearchParams(location.search);
        let viewIdQueryParam: string = urlParams.get('viewid');
        if (viewIdQueryParam && viewIdQueryParam.indexOf('{') !== 0) {
            viewIdQueryParam = `{${viewIdQueryParam}}`;
        }
        return viewIdQueryParam || context.pageContext.legacyPageContext.viewId;
    }

[ravinleague]

Thank you @AJIXuMuK

[AJIXuMuK]

@ravinleague ,
My Pleasure!

[russgove]

Hi,
this.context.listView.columns is still empty. is this going to be fixed? I'd like to avoid the extra call.

If its not going to be fixed , just remove it!

[AJIXuMuK]

Not it got even worse!
Now we can drag-n-drop columns in the view.
And each drag-n-drop adds all the columns in the this.context.listView.columns.
Let's say I have 3 columns in the view: Title, Modified, Modified By.
At initial state this.context.listView.columns contains these 3 columns in correct sequence.
Now if i swap Modified and Modified By, this.context.listView.columns will contain next list:
[Title, Modified, Modified By, Title, Modified By, Modified].

Do you plan to fix the API? It's absolutely unusable!

[AJIXuMuK]

Almost 1.5 years - and no changes...