Skip to main content

Notifications

Announcements

No record found.

Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Commerce forum / Select control with op...
Commerce forum

Select control with options list in view extension

(0) ShareShare
ReportReport
Posted on by 2

I have customer request to have a select control with options for phone country code added into CustomerAddEditView.   The phone country code is from a new custom table pulled from HQ to Channel Database. 

I can't find to add a select control with options from custom table: 

  • How to show option (select) control in extension. 
    • I see example in RetailCloudPos\WebRoot\Views\Customer\CustomerAddEditView.html
    • Customer group select control 
      • <select tabindex="2" id="customerGroupOptions"
        data-bind="options: viewModel.customerGroups,
        optionsText: 'CustomerGroupName',
        optionsValue: 'CustomerGroupNumber',
        value: viewModel.customerProxy.CustomerGroup,
        optionsCaption: Commerce.ViewModelAdapter.getResourceString('string_1303'),
        axBubbleAttr: 'customerAddEditView_customerGroupOptions',
        attr: { 'title': Commerce.ViewModelAdapter.getResourceString('string_1303') }">
        </select>
    • Notice the options is from viewModel.customerGroups
  • How to query custom table and bind options to the control  

I don't see any example in RetailSDK\Documents\SampleExtensionsInstructions.   If anyone experience this, please kindly advice.  

  • AKA_Abhi Profile Picture
    5 on at
    RE: Select control with options list in view extension

    Hello @AeyPKA Please share your valuable solution.

    I need to change Customer Group based on Customer Type.

  • pka Profile Picture
    2 on at
    RE: Select control with options list in view extension

    I found the way already.  

    I'll share it later.   

  • pka Profile Picture
    2 on at
    RE: Select control with options list in view extension

    Hi Oksana

    I also saw that link but can't apply to POS extension yet.  

    Problems:

    1. How to subscribe the options to extension property in view form?   Option list is "ObservableArray", different from string.   If in text box, will use command like this: -

           this.CountryCode.subscribe((newValue: string): void => {

               this._addOrUpdateExtensionProperty("COUNTRYREGIONCODEPHONE", <ProxyEntities.CommercePropertyValue>{ StringValue: newValue });

           });

    2. How to set value to option from extension properties?   If in text box, can easily set string.

    public init(state: ICustomerAddEditCustomControlState): void {
       if (!state.isSelectionMode) {

          this.CountryCode(this._getExtensionString("COUNTRYREGIONCODEPHONE"));

       }
    }

    private _getExtensionString(key: string): string {

       let value: string;
       let customer: ProxyEntities.Customer = this.customer;

       value = StringExtensions.EMPTY;

       if (!ObjectExtensions.isNullOrUndefined(customer.ExtensionProperties))
       {
          value = this.getPropertyValue(customer.ExtensionProperties, key).StringValue;
       }
       return value;
    }

    private getPropertyValue(extensionProperties: ProxyEntities.CommerceProperty[], column: string): ProxyEntities.CommercePropertyValue {
    extensionProperties = extensionProperties || [];
    return extensionProperties.filter((prop: ProxyEntities.CommerceProperty) => prop.Key === column)
    .map((prop: ProxyEntities.CommerceProperty) => prop.Value)[0];
    }


    3. How to populate options in view form?   I try to put in constructor and push custom entities similar to the way to show in data list but not work yet.  

    public CountryCodes: ObservableArray<ClientPhoneCountryCodes.IPhoneCountryCodes>;

    constructor(id: string, context: ICustomerAddEditCustomControlContext) {

           super(id, context);

           this._context = context;

           this.CountryCodes = ko.observableArray<ClientPhoneCountryCodes.IPhoneCountryCodes>(this.getCountryCodes());

           };

       }

    private getCountryCodes(): ClientPhoneCountryCodes.IPhoneCountryCodes[] {

           let countryCodes: ClientPhoneCountryCodes.IPhoneCountryCodes[] = [];

           this._context.runtime.executeAsync(new GetDeviceConfigurationClientRequest())

               .then((response: ClientEntities.ICancelableDataResult<GetDeviceConfigurationClientResponse>): ProxyEntities.DeviceConfiguration => {

                   return response.data.result;

               })

               // get store hours

               .then((deviceConfiguration: ProxyEntities.DeviceConfiguration)

                   : Promise<ClientEntities.ICancelableDataResult<PhoneCountryCodes.GetPhoneCountryCodesResponse>> => {

                   return this._context.runtime.executeAsync(

                       new PhoneCountryCodes.GetPhoneCountryCodesRequest<PhoneCountryCodes.GetPhoneCountryCodesResponse>(deviceConfiguration.StoreNumber));

               }).then((response: ClientEntities.ICancelableDataResult<PhoneCountryCodes.GetPhoneCountryCodesResponse>): void => {

                   if (ObjectExtensions.isNullOrUndefined(response)

                       || ObjectExtensions.isNullOrUndefined(response.data)

                       || response.canceled) {

                       return;

                   }

                   response.data.result.forEach((countryCode: Entities.PhoneCountryCodes): void => {

                       countryCodes.push(this.convertToClientCodes(countryCode));

                   });

               }).catch((reason: any) => {

                   this._context.logger.logError("CustomerAddEdit.PhoneCountryCodes: " + JSON.stringify(reason));

               });

           return countryCodes;

       }

       private convertToClientCodes(countryCodes: Entities.PhoneCountryCodes): ClientPhoneCountryCodes.IPhoneCountryCodes {

           return {

               id: countryCodes.Id,

               countryCode: countryCodes.CountryCode,

               countryRegionId: countryCodes.CountryRegionId

           };

       }

  • Oksana Kovaliova Profile Picture
    3,597 on at
    RE: Select control with options list in view extension

    Hi,

    Bindings via knockout - this is a part of front end web development, it is not really POS specific. This means you can find samples on web easily. For example, on knockout web site: knockoutjs.com/.../options-binding.html

    Saving into database - check any CRT extension sample that is doing DB save (for example, CustomerEmailPreference sample)

    Hope this helps

  • pka Profile Picture
    2 on at
    RE: Select control with options list in view extension

    Hi Oksana

    In Store Hour example (StoreHoursDialogModule.ts), only show how to add option list from fixed text but what I want is to binding from custom table (through custom entities).  Also the selected option must be saved to DB too.  

    I requesedt Microsoft Support to provide me example code already but still quiet for a week.  

  • Oksana Kovaliova Profile Picture
    3,597 on at
    RE: Select control with options list in view extension

    Hi, to query custom table - you can see any other POS sample, for example 'Store hours'. Inside that sample you can also see, how to bind the data to the control.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

November Spotlight Star - Khushbu Rajvi

Congratulations to a top community star!

Forum Structure Changes Coming on 11/8!

In our never-ending quest to help the Dynamics 365 Community members get answers faster …

Dynamics 365 Community Platform update – Oct 28

Welcome to the next edition of the Community Platform Update. This is a status …

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 292,865 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 231,723 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156 Moderator

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans