Unable to Select Option From Option Set Produced Dynamically by Javascript

Question

I am dynamically populating a custom option set field with all D365 entities with the following code:

// This function is called when the form loads
function OnLoad(executionContext) {
    debugger;
    var formContext = executionContext.getFormContext();

    // Get the optionset field on the form
    var optionSetField = formContext.getAttribute("zzz_entity");

    // Call the function to get entity names
    GetEntityNames().then(function(entityNames) {
        // Clear the options
        optionSetField.controls.forEach(function(control) {
            control.clearOptions();
        });

        // Add new options
        for (var i = 0; i < entityNames.length; i++) {
            var option = {
                text: entityNames[i],
                value: i + 1
            };

            // Add option without checking controls
            optionSetField.controls.forEach(function(control) {
                control.addOption(option);
            });
        }
    });
}

// This function retrieves all entity logical names
function GetEntityNames() {
    return new Promise(function(resolve, reject) {
        var req = new XMLHttpRequest();
        req.open("GET", Xrm.Utility.getGlobalContext().getClientUrl() + "/api/data/v9.0/EntityDefinitions?$select=LogicalName", true);
        req.setRequestHeader("OData-MaxVersion", "4.0");
        req.setRequestHeader("OData-Version", "4.0");
        req.setRequestHeader("Accept", "application/json");
        req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
        req.onreadystatechange = function() {
            if (this.readyState === 4) {
                req.onreadystatechange = null;
                if (this.status === 200) {
                    var results = JSON.parse(this.response);
                    var entityNames = results.value.map(function(entity) {
                        return entity.LogicalName;
                    });
                    resolve(entityNames);
                } else {
                    reject(new Error('Request failed with status: ' + this.status + ', Status Text: ' + this.statusText));
                }
            }
        };
        req.send();
    });
}

This code works in that the option set is successfully being populated. However, when I select an option, it doesn't successfully select and the field is not populated.

Is there something missing from my code? An extra eye would help.

EDIT per commentor request:

The following is the rendered HTML (shortened the option list values due to character limit in question):

<div id="zzz_entity" data-attributename="zzz_entity" data-formid="59c9aade-4c73-4248-a8e4-d1b44a10f870" data-fdeid="PrimaryEntity" data-layout="0" tabindex="1040" data-picklisttype="1" class="ms-crm-Inline-Chrome picklist nvarchar" title="Select to enter data" aria-label="Entity  Entity Select the Enter key to edit">
    <div class="ms-crm-Inline-Value ms-crm-Inline-NoValue" style="display: block;">
        <label data-for-id="zzz_entity_label" id="Entity_label" class="dummy-optionsetClass"><div class="ms-crm-div-NotVisible">Entity</div></label><span></span>
    </div><div class="ms-crm-Inline-Edit ms-crm-Inline-OptionSet noScroll" style="display: none;" id="zzz_entity_iDiv" aria-label="Entity"><select id="zzz_entity_i" class="ms-crm-SelectBox ms-crm-Inline-OptionSet-AutoOpen ms-crm-Inline-HideByZeroHeight-Ie7" aria-labelledby="zzz_entity_w" attrname="zzz_entity" size="10" style="height: 102px;"><option title="" value="-1"></option><option title="aaduser" value="1">aaduser</option><option title="account" value="2">account</option><option title="accountleads" value="3">accountleads</option><option title="aciviewmapper" value="4">aciviewmapper</option><option title="actioncard" value="5">actioncard</option><option title="actioncardusersettings" value="6">actioncardusersettings</option><option title="actioncarduserstate" value="7">actioncarduserstate</option><option title="activityfileattachment" value="8">activityfileattachment</option><option title="activitymimeattachment" value="9">activitymimeattachment</option><option title="activitymonitor" value="10">activitymonitor</option><option title="activityparty" value="11">activityparty</option><option title="activitypointer" value="12">activitypointer</option><option title="adminsettingsentity" value="13">adminsettingsentity</option><option title="advancedsimilarityrule" value="14">advancedsimilarityrule</option><option title="adx_externalidentity" value="15">adx_externalidentity</option><option title="adx_invitation" value="16">adx_invitation</option><option title="adx_invitation_invitecontacts" value="17">adx_invitation_invitecontacts</option><option title="adx_invitation_mspp_webrole_powerpagecomponent" value="18">adx_invitation_mspp_webrole_powerpagecomponent</option><option title="adx_invitation_redeemedcontacts" value="19">adx_invitation_redeemedcontacts</option><option title="adx_inviteredemption" value="20">adx_inviteredemption</option><option title="adx_kbarticle_kbarticle" value="21">adx_kbarticle_kbarticle</option><option title="adx_portalcomment" value="22">adx_portalcomment</option><option title="adx_setting" value="23">adx_setting</option><option title="adx_webformsession" value="24">adx_webformsession</option><option title="aiplugin" value="25">aiplugin</option><option title="aipluginexternalschema" value="26">aipluginexternalschema</option><option title="aipluginexternalschemaproperty" value="27">aipluginexternalschemaproperty</option><option title="aiplugininstance" value="28">aiplugininstance</option><option title="aipluginoperation" value="29">aipluginoperation</option><option title="aipluginoperationparameter" value="30">aipluginoperationparameter</option><option title="aipluginusersetting" value="31">aipluginusersetting</option><option title="annotation" value="32">annotation</option><option title="annualfiscalcalendar" value="33">annualfiscalcalendar</option><option title="appaction" value="34">appaction</option><option title="appaction_appactionrule_classicrules" value="35">appaction_appactionrule_classicrules</option><option title="appactionmigration" value="36">appactionmigration</option><option title="appactionrule" value="37">appactionrule</option><option title="appactionrule_webresource_scripts" value="38">appactionrule_webresource_scripts</option><option title="appconfig" value="39">appconfig</option><option title="appconfiginstance" value="40">appconfiginstance</option><option title="appconfigmaster" value="41">appconfigmaster</option><option title="appelement" value="42">appelement</option><option title="applicationfile" value="43">applicationfile</option><option title="applicationuser" value="44">applicationuser</option><option title="applicationuserprofile" value="45">applicationuserprofile</option><option title="applicationuserrole" value="46">applicationuserrole</option><option title="appmodule" value="47">appmodule</option><option title="appmodulecomponent" value="48">appmodulecomponent</option><option title="appmodulecomponentedge" value="49">appmodulecomponentedge</option><option title="appmodulecomponentnode" value="50">appmodulecomponentnode</option><option title="appmodulemetadata" value="51">appmodulemetadata</option><option title="appmodulemetadatadependency" value="52">appmodulemetadatadependency</option><option title="appmodulemetadataoperationlog" value="53">appmodulemetadataoperationlog</option><option title="appmoduleroles" value="54">appmoduleroles</option><option title="appnotification" value="55">appnotification</option><option title="appointment" value="56">appointment</option><option title="appsetting" value="57">appsetting</option><option title="appusersetting" value="58">appusersetting</option><option title="archivecleanupinfo" value="59">archivecleanupinfo</option><option title="archivecleanupoperation" value="60">archivecleanupoperation</option><option title="asyncoperation" value="61">asyncoperation</option><option title="attachment" value="62">attachment</option><option title="attribute" value="63">attribute</option><option title="attributeimageconfig" value="64">attributeimageconfig</option><option title="attributemap" value="65">attributemap</option><option title="attributemaskingrule" value="66">attributemaskingrule</option><option title="audit" value="67">audit</option><option title="authorizationserver" value="68">authorizationserver</option><option title="availabletimes" value="69">availabletimes</option><option title="availabletimesdatasource" value="70">availabletimesdatasource</option><option title="azureserviceconnection" value="71">azureserviceconnection</option></select></div><span class="ms-crm-Inline-LockIcon" id="zzz_entity_lock" style="display: none;"><img src="/_imgs/imagestrips/transparent_spacer.gif" class="ms-crm-ImageStrip-inlineedit_locked" alt="Locked control"></span><span class="ms-crm-Inline-fieldChangeIndicatorIcon" id="zzz_entity_fieldChangeIndicatorImage" style="visibility: hidden;"><img src="/_imgs/imagestrips/transparent_spacer.gif" class="ms-crm-ImageStrip-field_change_indicator" alt=""></span><span id="zzz_entity_warnSpan" class="ms-crm-Inline-WarningIcon" title="" style="display: none;" role="alert" aria-live="assertive" aria-atomic="true"><img src="/_imgs/imagestrips/transparent_spacer.gif" class="ms-crm-ImageStrip-inlineedit_warning" alt="Error" id="zzz_entity_warn"><div id="zzz_entity_w" class="ms-crm-Hidden-NoBehavior"></div></span>
</div>

It is also important to note that I also have the following javascript executed onChange of this field. However, this code doesn't seem to ever get executed because unable to select option set field:

function OnChangeOfEntity(executionContext) {
    debugger;
    var formContext = executionContext.getFormContext();
    var optionSetField = formContext.getAttribute("zzz_entity");

    if (optionSetField) {
        // Register an event handler for the OnChange event
        optionSetField.addOnChange(function () {
            // Use getValue to get the selected value
            var selectedValue = optionSetField.getValue();

            if (selectedValue != null) {
                // Log the selected value
                console.log("Selected Entity Value: " + selectedValue);

                // Get the text using the getText() method
                var selectedText = optionSetField.getText();

                // Log the selected text
                console.log("Selected Entity Text: " + selectedText);

                // Call the function to get entity names
                GetEntityCollectionName(selectedText)
                    .then(function (entityCollectionName) {
                        // Work with entityCollectionName
                        formContext.getAttribute("zzz_entityCollection").setValue(entityCollectionName);
                    })
                    .catch(function (error) {
                        console.error(error);
                    });
            } else {
                console.log("No option selected in the jso_entity field.");
                // Handle the case when no option is selected.
            }
        });
    }
}


function GetEntityCollectionName(entityName) {
    debugger;
    var entityName = entityName;
    return new Promise(function(resolve, reject) {
        var req = new XMLHttpRequest();
        req.open("GET", Xrm.Utility.getGlobalContext().getClientUrl() + "/api/data/v9.0/EntityDefinitions?$select=LogicalName,CollectionName&$filter=LogicalName eq '" + entityName + "'", true);
        req.setRequestHeader("OData-MaxVersion", "4.0");
        req.setRequestHeader("OData-Version", "4.0");
        req.setRequestHeader("Accept", "application/json");
        req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
        req.onreadystatechange = function() {
            if (this.readyState === 4) {
                req.onreadystatechange = null;
                if (this.status === 200) {
                    var results = JSON.parse(this.response);
                    if (results.value.length > 0) {
                        var entityCollectionName = results.value[0].CollectionName;
                        resolve(entityCollectionName);
                    } else {
                        reject(new Error('Entity not found.'));
                    }
                } else {
                    reject(new Error('Request failed with status: ' + this.status + ', Status Text: ' + this.statusText));
                }
            }
        };
        req.send();
    });
}

EDIT:

I have also modified the code to only return 1 result rather than the ~1000 it initially returns. I am still seeing the same behavior with onlly 1 result being returned.

Regards.

Does this render to html? What does the rendered source code look like? — mykaf
– mykaf, Commented Jan 11, 2024 at 15:29
@mykaf yes it is rendering to html. the html is long so can't post in comment will edit question to add — J.S.Orris
– J.S.Orris, Commented Jan 11, 2024 at 15:47
@MikeB there is also javascript performed onChange of this field. I will add to question in a moment. — J.S.Orris
– J.S.Orris, Commented Jan 11, 2024 at 15:48
The html for the select is so long? You only need to post enough to recreate the problem. — mykaf
– mykaf, Commented Jan 11, 2024 at 15:50

Guido Preite · Accepted Answer · 2024-01-11 19:10:59Z

2

On Dynamics CRM / Dynamics 365 CE / Power Apps model-driven app, the options of a Choice (OptionSet) attribute must be always the one defined inside the attribute.

Example: inside the attribute definition you have A = 1, B = 2, C = 3. You can add dynamically D = 4 (by the JS you used, or change the labels) but you will not be able to save the value if it is outside the attribute definition.

answered Jan 11, 2024 at 19:10

Guido Preite

15.2k5 gold badges38 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

J.S.Orris Over a year ago

Thanks Guido. I did get the drop down to work in the context of being able to select an option. The issue was in fact that my custom entity was not packaged in a UI app. However, you are in fact correct that to be able to save, these values already have to exist in the option set. If not, you will get an "index out of range" error. Because the entities will be dynamic per org (solution to be sold on app store). I had to pivot away from the option set and use a lookup field. If you update your answer to add the issue was web client vs UI Ill accept the answer as what you stated is adds value.

Guido Preite Over a year ago

@J.S.Orris my answer has no reference to your specific issue. If you wish you can write your own answer with the solution and mark that one as accepted.

Collectives™ on Stack Overflow

Unable to Select Option From Option Set Produced Dynamically by Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related