If you’ve come from the world of Dynamics 365 (or CRM…) and are starting to work with Portals, it can be frustrating when you discover that client-side JavaScript code that works great in your model-driven app doesn’t work on a Power Apps Portal – especially because Entity Forms and Web Forms are marketed as a technology that exposes your existing forms to the web. In this post, we look at why it doesn’t translate and provide some code that solves a common request: modifying the available options in an option set.

In January I responded to a post on the Dynamics forums from someone who was wondering why the code they had written to remove options from an option set wasn’t working on their Power Apps Portal.

In model-driven apps, we’ve got access to an entire API to enhance our forms. In fact, developers are required to use these APIs – any direct DOM manipulation is unsupported.

Unlike model-driven apps, there is no official JavaScript API for interacting with forms created using Entity Forms or Web Forms. But this doesn’t mean that it’s unsupported; instead, you need to rely on standard client-side web development techniques to meet your business requirements. Unfortunately, this means that any code you write for your model-driven forms won’t work since the API doesn’t exist on the portal. You have to create Portals-specific JavaScript (for details on all the different places you can drop this code in, see this series of posts).

As an aside, since Power Apps Portals has been developed using jQuery, most of the examples you’ll find use it as well. However, there is no requirement to use it – you can write plain old JavaScript, or even add another framework if you want (as long as it doesn’t conflict with jQuery).

More Conventions than Documentation

There are few “documented” JavaScript extension points – for example, this documentation covers the loaded event that fires when an Entity List is loaded. However, if you are going to get into writing JavaScript for your Power Apps Portal, should probably get familiar with your browser’s developer tools so that you can look underneath the hood at how things work.

Microsoft (and Adxstudio before them) has done a good job of providing markup that allows for extensibility. For example, when dealing with entity forms and web forms, the ID of the input elements will match the logical name of the attribute in CDS. For Entity Lists, the markup provides vital information in data- attributes like the ID of the record or the types of the columns. Again, you may struggle to find documentation on this, but you’ll see it when you inspect the markup in the developer tools.

So, just because you don’t see any documentation, poke around – you’ll be amazed at what you can find.

Some may be worried that because it isn’t documented, it’s not supported. The platform has been pretty stable for a while, and while that doesn’t mean things can’t change, I would say that these techniques are widely used, and are not seen as “hacks” or “work arounds”.

The JS to Remove Options

So, back to the original question – how do we remove options from an option set?

In my example, I’d like to edit the list of options available in the Case Type (casetypecode) field. So, let’s look at the markup that the Portal generates for this field:

<td colspan="1" rowspan="1" class="clearfix cell picklist-cell">
    <div class="info">
        <label for="casetypecode" id="casetypecode_label">Case Type</label>
        <div class="validators"></div>
    </div>
    <div class="control">
        <select name="ctl00$ContentContainer$EntityFormControl_21bfeab3f60ee511946100155d038c01$EntityFormControl_21bfeab3f60ee511946100155d038c01_EntityFormView$casetypecode" id="casetypecode" class="form-control picklist " onchange="setIsDirty(this.id);">
            <option selected="selected" value="" label=" "> </option>
            <option value="1">Question</option>
            <option value="2">Problem</option>
            <option value="3">Request</option>
        </select>
    </div>
</td>

As you can see, it is a standard select field type, with the ID being casetypecode. So, the JavaScript to remove options would look something like:

$(document).ready(function() {
  $('#casetypecode option[value="1"]').remove();
});

Here we are using jQuery selectors to find the option whose value is 1, and remove it.

Now, if you looked at the actual request on the forums, you may have noticed that they wanted the options to disappear only for certain people. That is possible as well, using a combination of Liquid and JavaScript (which are better together). If we wanted it based on Web Roles, for example, we could do something like:

{% if user.roles contains 'Administrators' %}
$(document).ready(function() {
  $('#casetypecode option[value="1"]').remove();
});
{% endif %}

This will only remove the options for users with the Administrators Web Role.