Engineered Code is proud to announce the availability of ecLearn - the Learning Management System built on top of Microsoft Dataverse


PowerApps Portals: Multiselect Option Set

Everyone rejoiced when multiselect option sets were added in Dynamics 365 for Customer Engagement v9. Unfortunately, PowerApps Portals/Dynamics 365 Portals do not yet support these field types out-of-the-box on Entity Forms or Web Forms. In this post, I’ll describe how, with a bit of code, you can add that support yourself, and demonstrate a particular pattern that can be used to add sophisticated UI elements to your Portal.

The Solve

Let’s assume that for some reason you’d like to capture someone’s favourite colour when they submit a case. However, you want to be supportive of the fact that some people may truly have multiple favourite colours. So you add a multiselect option set called Favourite Colour to the Case entity, and add it to the Web – Create Case form (in honour of the fact that I’m using the Canadian spelling of favourite and colour, the only colour options I’m providing are red and white). Unfortunately, as I mentioned, PowerApps Portal doesn’t yet support multiselect option sets, so the field doesn’t show up on the Portal.

The first step in our solution is to add another field that is supported on the Portal – a text field. We’ll use this field to save the user’s selection back to Dynamics. In our case, we’ll call it Favourite Colour Portal, and add it to the form. The original Favourite Colour field can be removed from the form.

Next, we’ll need some custom JavaScript. This script will:

  • Hide the text field.
  • Add a multiselect HTML field where the text field was previously. This multiselect field will have options with values that correspond to the multiselect in Dynamics.
  • Anytime the multiselect field changes, a comma delimited list of the selected options is stored in the hidden text field.

Here’s the code to accomplish that:

var favouriteColour = $('#ec_favouritecolourportal');

var multiselect = $('<select multiple><option value="948180000">Red</option><option value="948180001">White</option></select>');
multiselect.change(function() {

Now, when the user submits the form, the values will be saved to Dynamics in the text field.

Next, we want to take the values from the text field and update the actual multiselect option set. This can easily be accomplished in a plugin:

public void Execute(IServiceProvider serviceProvider)
	var context = (IPluginExecutionContext)serviceProvider.GetService(typeof(IPluginExecutionContext));

	var entity = context.InputParameters["Target"] as Entity;

	if (entity.Attributes.ContainsKey("ec_favouritecolourportal"))
		OptionSetValueCollection colours = new OptionSetValueCollection();
		foreach (var option in entity.GetAttributeValue("ec_favouritecolourportal").Split(','))
			colours.Add(new OptionSetValue(int.Parse(option)));

		entity["ec_favouritecolour"] = colours;

This code looks for the existence of the text attribute, and if it is there, parses the comma separated field and set the real multiselect option set.

Taking It Further

There are a lot of ways of making this more robust and flexible:

  • Rather than hard-coding the field name in the plugin, it could be based on plugin configuration.
  • Rather than hard-coding the options, this could come from a content snippet. Another option would be to use a global option set for your multiselect option set, and create another dummy regular option set field that you could add to your form that you could use to populate the possible values.
  • The user experience you get with the standard HTML multiselect isn’t the greatest – most people don’t realize you hold down CTRL to select multiple options. However, there are lots of great jQuery plugins that can take the standard multiselect and transform it into something a lot nicer. For example, this one. By simply adding a reference to the JavaScript and CSS for the plugin, and modifying one line of code (
    turns into
    ), you can get an interface that looks like this:
  • If you need to support edit capabilities (not just create), you could create a plugin that keeps the text field up to date, and then add some JavaScript that initializes the multiselect on the Portal on the load of the form.

The Pattern

The technique of hiding a field, replacing it with a more sophisticated control, and then writing back to the original field when the sophisticated field changes is something we do often.

For example, let’s say you want to capture a phone number on a form. Rather than letting the user type in any format they want, you can instead use a jQuery plugin like this. Since that particular plugin requires you to call a specific method to extract the number in the correct format, you can’t just initialize the plugin on the original field. So instead, hide the original input, create another input, initialize the phone number plugin on that new input, handle the change event on the phone number plugin, and set the value on the original input so that it is saved back to Dynamics when the user submits the form.

Another example would be replacing the out-of-the-box date picker with drop downs corresponding to day, month and year. Using JavaScript, you can hide the out-of-the-box date input, add the three drop downs, and then when any of those drop downs change, set the appropriate value in the original date field.

28 responses to “PowerApps Portals: Multiselect Option Set”

  1. […] my previous post the technique I explained involved adding a text attribute to the entity, saving a comma-delimited […]

  2. […] my previous post the technique I explained involved adding a text attribute to the entity, saving a comma-delimited […]

  3. Josh K says:

    I’m trying to implement this workaround, since Multiselect Option Sets still seem to not be supported, but I’m having trouble finding where/how I’m supposed to add the custom Javascript to my form. I’ve looked in both the new and classic form editor but can’t find a place to add code or custom javascript. Can you point me in the right direction?

    • Nicholas Hayduk says:

      Hi Josh!

      I recommend adding the JavaScript using the Custom JavaScript property which you can find it at the bottom of the Additional Settings tab on the Entity Form, or at the bottom of the Form Options tab on the Web Form Step.


  4. Hannah Schroeder says:

    Is there any way to create a bulk multi-select option set (500 options) in PowerApps without typing each out?

    I am looking or assistance/tips on how to create a bulk option set within a field for a Common Data Set Entity. I have not successfully found if this is possible or the best way to do this. I have a field I would like to add roughly 500 options within an option set, but would like to copy/paste this list instead of typing each option out by hand.
    If you could direct me to the best way to do this I would appreciate it.

    • Nicholas Hayduk says:

      I’d take a look at the Attributes Factory plugin in the XrmToolBox – it lets you import a spreadsheet. I’ve haven’t tried it myself with multi-select option sets, but from what I can tell, I think it supports it.


  5. Natasha Fan says:

    Hi Nicholas.the custom JavaScript property which I can find it at the bottom of the Additional Settings tab on the Entity Form,and I create Plugin by Visual Studio Projec and upload it to the Power apps Environment By PRT.But there is a problem here, the GetAttributeValue of the plug-in code reported an error in vs2017.So I wonder if I made a mistake?Is the plugin code uploaded to portals by our local vs2017.Looking forward to your reply! Thanks!

    • Nicholas Hayduk says:

      Hi Natasha,

      The plugin code provided refers to two custom fields: ec_favouritecolourportal and ec_favouritecolour. Have you replaced those values with the fields you are trying to target?


  6. Mark Dowell says:

    Hi Nick, thanks for a great article. I followed along and got my own “Days of the Week” multi select working.

    A couple of notes which may help others.

    I had a requirement to show the selected Days of the Week in a subgrid, I couldn’t use the multiselect field or my additional Text field for this, in the end I added a second Text field which holds a semi-colon separated list of the label text for each selected option. eg. Mon; Tue; Fri. I keep this field in sync using the techniques above and in Part 2 of this series.

    Also, I had some compile errors with the plugin code, I had to specify the generic return type to this line:

    I needed to do something similar with the code from Part 2:

    Thanks again Nick

  7. Patrick says:

    hi, i dont find the html field for custom javascript code =(

    • Nicholas Hayduk says:

      Hi Patrick,

      If you’re using a Web Form, you’ll find the Custom JavaScript field at the bottom of the Form Options tab. For an Entity Form, it’s at the bottom of the Additional Settings tab.


  8. Patrick Kranig says:

    hi, how can i create this plugin?

  9. Jane Schwarz says:

    Hi Nick,

    Thanks a lot for the solution. It works fine but I want to change the interface look, like you did.
    Where can I add the bootsrap reference to the JavaScript and CSS for the plugin?

  10. Jane Schwarz says:

    Hi Nick,
    Thanks for the helpful post, it worked fine. However, I can’t modify the look of the option set.
    Where should I exactly add the reference to the JavaScript and CSS for the jQuery plugin?

    • Nicholas Hayduk says:

      Hi Jane,

      There are a few options.

      The JavaScript and CSS for the jQuery plugin can be added by adding the

  11. Selim Dag says:

    Hi Nick,

    I want to change the look of the multiselect but I dont’t know where I should reference the Javascript and CSS. Should I do it in the web template or is there any other way to do it?


    • Nicholas Hayduk says:

      Hi Selim,

      There are a few options.

      The JavaScript and CSS for the jQuery plugin can be added by adding the and tags to the Copy attribute of the page you have your form on. Or you could implement a custom page template using a web template, and your and can be included in the web template. Or you can add them dynamically using JavaScript in the Custom JavaScript attribute of your Entity Form.


  12. Ragavan Rajan says:

    Exactly the same problem Natasha has mentioned. Getting error in “Get Attributes”. I have changed the values to map my fields which I have created. Please help how to fix this issue.

  13. SivaR says:

    Hi I have to use more than 10 multi-select dropdowns on a portal page. If i have a text field for each dropdown. i have to end up more than 20 fields (10 multi-select dropdown fields and place holder text fields). That will be too many fields.

    is any way we can add multi-select dropdown on the Portal page without having the text fields to hold the selected values with comma delimited?

    thank you,

  14. pi says:

    I’ve got it to work but the css looks off, I’m not sure why, I have a bootstrap file in webpages with version 3.3.6 but tried updating that and it still doesn’t work. Is there something I’m missing? I wasn’t enough for me to just add the javascript and css references to get it working like in the sample pictures

    • Nicholas Hayduk says:

      Out of the box support for multiselects is now available, so this work around isn’t necessary. Have you tried that yet?


  15. Charles says:

    Hello, The link that helps us transform the multi select option to something finer is not working. When I click on it, I get a page not found error.

  16. Charles says:

    Thanks for your reply, I decide to go the route of a custom multi select option set because I needed a Multi Select Lookup field and I don’t think there is a way to do that in power pages currently. So I decided to utilize your technique, thank you very much for responding, I will check out the new link.

  17. Charles says:

    And lastly Nick, I am pretty new to Power Pages, I don’t know how to implement the SOL in the link.

    • Nicholas Hayduk says:

      For the multiselect lookup, do you have a N:N relationship in Dataverse? Or how were you planning on representing that data in Dataverse?


Leave a Reply

Your email address will not be published. Required fields are marked *


Engineered Code is a web application development firm and Microsoft Partner specializing in web portals backed by Dynamics 365 & Power Platform. Led by a professional engineer, our team of technology experts are based in Regina, Saskatchewan, Canada.