New Custom API delivers my new CCC Field but it will not be showed in WebPortal (Cannot read properties of undefined (reading 'ColumnName'))

Just a quick one, fermin sanjuan , did you check the CCC column 's "show in wizards" in Designer? 

Hello juancarlos camargo ,

I compared my CCC field with the standard ones (Description, Ident_ShoppingCartPattern, etc) and the flag "show in wizards" under "UI-Settings" Tab was not activated.
I´ve just done like you suggested but error is still popping up. 

fermin sanjuan this usually happens when there are diffs between the schema and what the imx-data-view-auto-table in the html shows. Did you try to add the custom field to the itshop.pattern.component.html? 

Hello juancarlos camargo, 

this is what I find strange because I added this new field also in the html.

My getData() procedure looks like that:

public async getData(): Promise<void> {
    this.dataSource.itemStatus = this.status;

    const dataViewInitParameters: DataViewInitParameters<PortalCccItshopPatternAdmin | PortalCccItshopPatternPrivate> = {
      execute: this.adminMode
        ? (params: CollectionLoadParameters, signal: AbortSignal): Promise<TypedEntityCollectionData<PortalCccItshopPatternAdmin>> =>
          this.cccPatternService.getPublicPatterns(params, signal)
        : (params: CollectionLoadParameters, signal: AbortSignal): Promise<TypedEntityCollectionData<PortalCccItshopPatternPrivate>> =>
          this.cccPatternService.getPrivatePatterns(params, signal),
      schema: this.entitySchema,
      columnsToDisplay: [
        this.entitySchema.Columns[DisplayColumns.DISPLAY_PROPERTYNAME],
        this.entitySchema.Columns.UID_Person,
        this.entitySchema.Columns.IsPublicPattern,
        this.entitySchema.Columns.CCC_TotalNumberOfItems
      ],
      highlightEntity: (entity: PortalCccItshopPatternPrivate | PortalCccItshopPatternAdmin) => {
        this.viewDetails(entity);
      },
      selectionChange: (selection: (PortalCccItshopPatternPrivate | PortalCccItshopPatternAdmin)[]) => {
        this.logger.trace(this, 'selection changed', selection);
        this.selectedPatterns = selection;
      },
    };
    console.log('dataViewInitParameters', dataViewInitParameters);
    this.dataSource.init(dataViewInitParameters);
    console.log('dataSource', this.dataSource);
  }

My classes "PortalCccItshopPatternAdmin" and "PortalCccItshopPatternPrivate" (TypedClient.d.ts)

export declare class PortalCccItshopPatternAdmin extends TypedEntity {
    readonly Ident_ShoppingCartPattern: IWriteValue<string>;
    readonly UID_Person: IWriteValue<string>;
    readonly Description: IWriteValue<string>;
    readonly CCC_TotalNumberOfItems: IReadValue<number>;
    readonly IsPublicPattern: IWriteValue<boolean>;
    /** Returns the static compile time schema for this type. */
    static GetEntitySchema(): StaticSchema<'Ident_ShoppingCartPattern' | 'UID_Person' | 'Description' | 'CCC_TotalNumberOfItems' | 'IsPublicPattern'>;
}

export declare class PortalCccItshopPatternPrivate extends TypedEntity {
    readonly IsPublicPattern: IWriteValue<boolean>;
    readonly UID_Person: IReadValue<string>;
    readonly CCC_TotalNumberOfItems: IWriteValue<number>;
    readonly Description: IWriteValue<string>;
    readonly Ident_ShoppingCartPattern: IWriteValue<string>;
    /** Returns the static compile time schema for this type. */
    static GetEntitySchema(): StaticSchema<'IsPublicPattern' | 'UID_Person' | 'CCC_TotalNumberOfItems' | 'Description' | 'Ident_ShoppingCartPattern'>;
}

<div class="imx-header-toolbar">
    <h2 class="mat-headline-5">
      <span>{{ '#LDS#Heading Product Bundles' | translate }}</span>
      <imx-help-contextual [contextId]="helpContextId"></imx-help-contextual>
    </h2>
    <imx-data-view-toolbar [dataSource]="dataSource" [showSettings]="false"></imx-data-view-toolbar>
  </div>
  <mat-card class="imx-card-fill">
    @if (entitySchema) {
    <imx-data-view-auto-table [dataSource]="dataSource" mode="manual" [selectable]="true">
      <ng-container [matColumnDef]="DisplayColumns.DISPLAY_PROPERTYNAME">
        <th mat-header-cell *matHeaderCellDef>
          {{ entitySchema?.Columns?.[DisplayColumns.DISPLAY_PROPERTYNAME]?.Display }}
        </th>
        <td mat-cell *matCellDef="let item" role="gridcell" class="imx-table-cell">
          <div data-imx-identifier="itshop-pattern-table-display">{{ item.Ident_ShoppingCartPattern.Column.GetDisplayValue() }}</div>
          <div subtitle data-imx-identifier="itshop-pattern-table-description">
            {{ item.Description.Column.GetDisplayValue() }}
          </div>
        </td>
      </ng-container>
      <ng-container [matColumnDef]="entitySchema?.Columns?.UID_Person?.ColumnName">
        <ng-container>
          <th mat-header-cell *matHeaderCellDef>
            {{ entitySchema?.Columns?.UID_Person?.Display }}
          </th>
        </ng-container>
        <td mat-cell *matCellDef="let item" role="gridcell">
          <span>
            {{ item.UID_Person.Column.GetDisplayValue() }}
          </span>
        </td>
      </ng-container>
      <ng-container [matColumnDef]="entitySchema?.Columns?.IsPublicPattern?.ColumnName">
        <ng-container>
          <th mat-header-cell *matHeaderCellDef>
            {{ entitySchema?.Columns?.IsPublicPattern?.Display }}
          </th>
        </ng-container>
        <td mat-cell *matCellDef="let item" role="gridcell">
          <span>
            {{ item.IsPublicPattern.Column.GetDisplayValue() }}
          </span>
        </td>
      </ng-container>
      <ng-container [matColumnDef]="entitySchema?.Columns?.CCC_TotalNumberOfItems?.ColumnName">
        <ng-container>
          <th mat-header-cell *matHeaderCellDef>
            {{ entitySchema?.Columns?.CCC_TotalNumberOfItems?.Display }}
          </th>
        </ng-container>
        <td mat-cell *matCellDef="let item" role="gridcell">
          <span>
            {{ item.CCC_TotalNumberOfItems.Column.GetDisplayValue() }}
          </span>
        </td>
      </ng-container>
    </imx-data-view-auto-table>
    <imx-data-view-paginator [dataSource]="dataSource"></imx-data-view-paginator>
    }
  </mat-card>

As you can see... my field "CCC_TotalNumberOfItems" is there and the error still pops up.

Thank you very much for your time and help!

Happens in my code too. 

Change line 49 in your html and use a literal , just as we do:

  <ng-container [matColumnDef]="entitySchemaPersonReports.Columns.CCC_DepartmentFullPath.ColumnName">
        <th mat-header-cell *matHeaderCellDef> Ubicación </th>
        <td mat-cell *matCellDef="let item" role="gridcell">
          <div data-imx-identifier="identities-tabledata-display">
            <span>
              {{ item.GetEntity().GetColumn('CCC_DepartmentFullPath').GetDisplayValue() }}
            </span>
          </div>
        </td>
      </ng-container>

Let me know.

I changed the line as you mentioned... 
I even changed every small different between my html code and yours but... no luck.
I still get the error.  :-(

 <ng-container [matColumnDef]="entitySchema.Columns.CCC_TotalNumberOfItems.ColumnName">
        <ng-container>
          <th mat-header-cell *matHeaderCellDef>Number of items</th>
        </ng-container>
        <td mat-cell *matCellDef="let item" role="gridcell">
          <span>
            {{ item.CCC_TotalNumberOfItems.Column.GetDisplayValue() }}
          </span>
        </td>
      </ng-container>

Sorry, I've used another version. In your html, change:

"<ng-container [matColumnDef]="entitySchema.Columns.CCC_TotalNumberOfItems.ColumnName">"

for:

"<ng-container [matColumnDef]="CCC_TotalNumberOfItems">"

Let me know. Btw which version are we dealing with? 

I use version 10 LTS

and I get a compile error if Iuse the matColumDef like that:

 <ng-container [matColumnDef]="CCC_TotalNumberOfItems">
        <ng-container>
          <th mat-header-cell *matHeaderCellDef>Number of items</th>
        </ng-container>
        <td mat-cell *matCellDef="let item" role="gridcell">
          <span>
            {{ item.CCC_TotalNumberOfItems.Column.GetDisplayValue() }}
          </span>
        </td>
      </ng-container>

47 <ng-container [matColumnDef]="CCC_TotalNumberOfItems">
~~~~~~~~~~~~~~~~~~~~~~

projects/qer/src/lib/itshop-pattern/itshop-pattern.component.ts:68:16
68 templateUrl: './itshop-pattern.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ItshopPatternComponent.

same version here. I do really apologize but I cannot find a reason for that. We do have a custom field on the Person table and are able to use it flawlessly. Of course we needed to make code modifications, add permissions and check the "show in wizards" option. Aside that, works fine:

const multiclienteColumn: IClientProperty = {
            ColumnName: 'multicliente',
            Type: 0,
            Display: 'Multicliente',
            IsReadOnly: true,
            Description: 'Indica si el usuario es multicliente'
        };
(...)
 try {
            this.projectConfig = await this.configService.getConfig();
            this.isCreationAllowed = this.projectConfig.PersonConfig?.EnableNewPerson ?? false;

            this.displayedColumns = [
                this.entitySchemaPersonReports.Columns[DisplayColumns.DISPLAY_PROPERTYNAME],
                this.entitySchemaPersonReports.Columns.CCC_DepartmentFullPath,
                this.entitySchemaPersonReports.Columns.PasswordLastSet,
                multiclienteColumn,
                this.entitySchemaPersonReports.Columns.IsTemporaryDeactivated
            ].filter(col => !!col);
(...)

The custom property is CCC_DepartmentFullPath (multicliente is a custom column for other purposes)

And the html:

  <div class="data-explorer-table">
        <imx-data-view-auto-table [dataSource]="dataSource" mode="manual" [selectable]="true" matSort
            (matSortChange)="dataSource?.sortChange($event)" [matSortActive]="dataSource.sortId()"
            [matSortDirection]="dataSource.sortDirection()">

            <ng-container [matColumnDef]="DisplayColumns.DISPLAY_PROPERTYNAME">
                <th mat-header-cell *matHeaderCellDef>
                    Nombre (Login)
                </th>
                <td mat-cell *matCellDef="let item" role="gridcell" class="imx-table-cell">
                    <div data-imx-identifier="identities-tabledata-display">{{ item.GetEntity().GetDisplay() }}</div>
                </td>
            </ng-container>

            <ng-container matColumnDef="CCC_DepartmentFullPath">
                <th mat-header-cell *matHeaderCellDef> Ubicación </th>
                <td mat-cell *matCellDef="let item" role="gridcell">
                    <div data-imx-identifier="identities-tabledata-display">
                        <span>
                            {{ item.GetEntity().GetColumn('CCC_DepartmentFullPath').GetDisplayValue() }}
                        </span>
                    </div>
                </td>
            </ng-container>

Thank you anyway for your help juancarlos camargo ..
When I find out what was the problem, I´ll share it here.

Thank you anyway for your help juancarlos camargo ..
When I find out what was the problem, I´ll share it here.

Hello Fermin,

(my original post was marked as spam/abuse - so i posted this again)

i reproduced your error and i came to an conclusion.

Custom Fields and Calculated Properties seem to not have an ColumnName in the EntitySchema when loading the grid.

I can see the column in the EntitySchema, but its not loaded.  (Bug or not - but its a fact currently for our system)

So instead of your ColumnName , use a predfiend String or translate it.

<ng-container [matColumnDef]="'CCC_......'">
  <th mat-header-cell *matHeaderCellDef>
          {{ '#LDS#Display name for Column' | translate }}
  </th>
<td mat-cell *matCellDef="let item" role="gridcell" class="imx-table-cell">
          {{ item.GetEntity().GetColumn('CCC_......').GetDisplayValue() }}
 </td>
</ng-container>

Perhabs this gets fixed sometime , but this is a valid workarround i guess.

Best regards