Modern UI Selector Field Not Working (Postal Code)

Hii ​@maneeshau91 , try to add this controlType: "qp-selector" above  @controlConfig({ allowEdit: true })
PostalCode: PXFieldState<PXFieldOptions.CommitChanges>; in ts file 

try this way

@fieldConfig({
    controlType: "qp-selector",
    controlConfig: {
    displayMode: 'text',
    suggester: { descriptionName: 'CultureReadableName' },
    }
}) 
FormatLocale: PXFieldState;

After adding try to 

Run the following command in the FrontendSources\screen folder of your instance.

“npm run build-dev --- --env customFolder=development screenIds=”

​@tareshpatil51  
I have added the changes below and ran build dev, but it is still not working.

import {  PXFieldState,  PXFieldOptions , controlConfig} from "client-controls";
import { Address } from "src/screens/common/form-address/form-address";

export interface AddressExt extends Address {}
export class AddressExt {  controlType: "qp-selector"
@controlConfig({ allowEdit: true})
PostalCode: PXFieldState<PXFieldOptions.CommitChanges>;
}

Could you please help me understand how default fields can be extended? Also, is it required to make changes in the HTML file?

In Modern UI (client-controls) you extend fields using class extension, not by editing original Address.

import {
  PXFieldState,
  PXFieldOptions,
  controlConfig
} from "client-controls";

import { Address } from "src/screens/common/form-address/form-address";


export class AddressExt extends Address {

  @controlConfig({
    allowEdit: true
  })
  PostalCode: PXFieldState<PXFieldOptions.CommitChanges>;

}

No html change needed..!

@tareshpatil51 Thanks for response

I tried above code but not works, I am not sure what i am missing.

​@maneeshau91 Can u plz share me the ts code and screenshot of the screen . So that i can debug and give u the solution that works for u.

@tareshpatil51

Thanks again for your response. Please find the relevant files attached below.

On the Customer screen, under the General tab, we have modified the Postal Code field.

The below implementation is used to convert the field into a selector for Postal Code.

#region CacheAttached
[PXMergeAttributes(Method = MergeMethod.Merge)]
[PXRemoveBaseAttribute(typeof(PXDBTextAttribute))]
[PXSelector(typeof(Search<PXZipCodes.zipCode, Where<PXZipCodes.countryID, Equal<Current<Address.countryID>>>>))]
[PXZipValidation(typeof(Country.zipCodeRegexp), typeof(Country.zipCodeMask), countryIdField: typeof(Address.countryID))]
[PXDynamicMask(typeof(Search<Country.zipCodeMask, Where<Country.countryID, Equal<Current<Address.countryID>>>>))]
[PXMassMergableField]
protected virtual void Address_PostalCode_CacheAttached(PXCache sender) { }
#endregion

import { PXFieldState, PXFieldOptions, controlConfig } from "client-controls";
import { Address } from "src/screens/common/form-address/form-address";
export class AddressExt extends Address {
  controlType: "qp-selector"
  @controlConfig({ allowEdit: true })
  PostalCode: PXFieldState<PXFieldOptions.CommitChanges>;
}

TS File

​@maneeshau91  what u have done wrong is 

import { PXFieldState, PXFieldOptions, controlConfig } from "client-controls";
import { Address } from "src/screens/common/form-address/form-address";
export class AddressExt extends Address {
  controlType: "qp-selector"
  @controlConfig({ allowEdit: true })
  PostalCode: PXFieldState<PXFieldOptions.CommitChanges>;
}

controlType cannot be outside decorator

Selector must use @fieldConfig 

use this code 

import {
  PXFieldState,
  PXFieldOptions,
  fieldConfig
} from "client-controls";

import { Address } from "src/screens/common/form-address/form-address";

export class AddressExt extends Address {

  @fieldConfig({
    controlType: "qp-selector",
    controlConfig: {
      allowEdit: true
    }
  })
  PostalCode: PXFieldState<PXFieldOptions.CommitChanges>;

}

Very imp 

After change run:

FrontendSources\screen

npm run build-dev -- --env customFolder=development screenIds=CR303000  

No Html changes needed….!