ENGINEERED CODE BLOG

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');
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.

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 (
    multiselect.insertAfter(favouriteColour);
    turns into
    multiselect.insertAfter(favouriteColour).multiselect();
    ), 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.

2 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 […]

Leave a Reply

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

Contact

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.