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.
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:
Here’s the code to accomplish that:
var favouriteColour = $('#ec_favouritecolourportal');
favouriteColour.hide();
var multiselect = $('<select multiple><option value="948180000">Red</option><option value="948180001">White</option></select>');
multiselect.insertAfter(favouriteColour);
multiselect.change(function() {
favouriteColour.val($(this).val());
});
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.
There are a lot of ways of making this more robust and flexible:
multiselect.insertAfter(favouriteColour);turns into
multiselect.insertAfter(favouriteColour).multiselect();), you can get an interface that looks like this:
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.
[…] my previous post the technique I explained involved adding a text attribute to the entity, saving a comma-delimited […]
[…] my previous post the technique I explained involved adding a text attribute to the entity, saving a comma-delimited […]
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?
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.
Nick
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.
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.
Nick
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!
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?
Nick
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:
entity.GetAttributeValue(“ec_favouritecolourportal”)
becomes
entity.GetAttributeValue(“ec_favouritecolourportal”)
I needed to do something similar with the code from Part 2:
entity.GetAttributeValue(“ec_favouritecolour”)
becomes
entity.GetAttributeValue<IEnumerable>(“ec_favouritecolour”)
Thanks again Nick
hi, i dont find the html field for custom javascript code =(
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.
Nick
hi, how can i create this plugin?
If you’re new to Common Data Service plugins (formerly Dynamics 365/CRM plugins), I’d recommend you start here:
https://docs.microsoft.com/en-us/powerapps/developer/common-data-service/plug-ins
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?
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?
Hi Jane,
There are a few options.
The JavaScript and CSS for the jQuery plugin can be added by adding the
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?
Thanks
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.
Nick
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.
Hi Ragavan,
What error are you getting? Is it at runtime, or at compile time?
Nick
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,
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
Out of the box support for multiselects is now available, so this work around isn’t necessary. Have you tried that yet?
Nick
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.
You’re right, the link is dead. However, multiselect option sets are now supported in Power Pages, so this technique is no longer necessary.
However, if you are looking to do something a bit more custom, there is what the built-it multiselects use: https://pbauerochse.github.io/searchable-option-list/
Nick
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.
And lastly Nick, I am pretty new to Power Pages, I don’t know how to implement the SOL in the link.
For the multiselect lookup, do you have a N:N relationship in Dataverse? Or how were you planning on representing that data in Dataverse?
Nick