List grouping by spfx computed column does not work - always group as not set

[CarlVerret]

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
• SPFx version
• Node.js version
• etc

Issue description

Having a custom spfx computed column in a list (wich displays true or false depending if two other fields are equal), when we select "Group by this column", the only group that is displayed is "Not set" (Non appliqué in french)

[mkm17]

Hi @CarlVerret, could you provide information about the calculated column and view grouping setting? I have checked it on my side and I can see the correct grouping label for a calculated column.

[CarlVerret]

Hi Michał,

In fact I had to use a custom spfx field to compare if, under some circumstances two dates were equal or not, returning a simple Yes or No text value.

public onRenderCell(event: IFieldCustomizerCellEventParameters): void {

const monItemEnCours = event.listItem;

if ( ... ) // ... under some condition, set value to blank
{
event.domElement.innerText = "";
}
else
{

  const date_approb:Date =  monItemEnCours.getValueByName("approved date");
  const date_modif:Date = monItemEnCours.getValueByName("Modified");
  event.domElement.innerText =  date_modif <=date_approb  ? "Yes" : "No";
  
}

}

The display works perfectly in list's columns. But grouping by this column result in only "Non affecté" (not set in french) values. Even if the cell render produces values.

[mkm17]

@CarlVerret Unfortunately, it will not work like this. The SPFx field customizer does not change the value of a field; it just overrides the rendering of the column field. Maybe you can try using a calculated column formula instead. Try comparing both dates with conditional formulas:
https://learn.microsoft.com/en-us/previous-versions/office/developer/sharepoint-2010/bb862071(v=office.14)#conditional-formulas

If there are additional conditions, such as comparing both dates when the status of the items is 'Approved,' then simply add a nested IF statement.

[CarlVerret]

The main reason we opted for a custom field is that there's no easy way to compare two dates natively with calculated columns. If there's one, we could figure it out ! This is something that is asked a lot about in many forums.

[mkm17]

I've reviewed the calculated column formula where I check the value of the Status column and compare the Modified date with my Approval DateTime column.

Of course, use ';' or ',' depending on the language on the site.

=IF(Status="Choice 2";IF(((Modified-[Approval DateTime])<0);"OK";"Not OK");"")

The effect is like this.

Of course, your case may be more complicated, and as you mentioned then other solutions may need to be considered.