ecLearn - Learning Management System built on top of Microsoft Dataverse for Power Platform and Dynamics 365 users

ENGINEERED CODE BLOG

PowerApps Portals: Multiselect Option Set – Part 2

A couple of weeks ago I shared a solution for supporting multiselect option sets on a PowerApps Portal (they aren’t currently supported out-of-the-box), however it only worked for creating new records. If you want it to work for updating existing records, there is a bit more work to do, but thankfully not that much!

Recap

In my previous post the technique I explained involved adding a text attribute to the entity, saving a comma-delimited list of values to Dynamics, and then using a plugin to parse the text field and set the actual multiselect option set field. This works great when you are creating new records.

The challenge for updating records is that you need to retrieve the existing value from the database to properly prefill the user interface, and you also have to handle situations where the field may be changed directly in Dynamics 365.

Plugin Updates

A straight-forward change to the plugin code will allow us to synchronize our multiselect option set with our text field. The updated code is shown below in bold:

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;
	}
        else if (entity.Attributes.ContainsKey("ec_favouritecolor"))
        {
                entity["ec_favouritecolourportal"] = string.Join(",", entity.GetAttributeValue("ec_favouritecolour").Select(o => o.Value.ToString()));
        }
}

The other key is that you need to register the plugin to run on update of your records as well (in the previous example, it only needed to run on create).

This will ensure that when the multiselect option set field changes, those changes are synchronized to the text field. This will allow us to show the already selected options in the Portal, even if a change is made directly in Dynamics.

JavaScript Updates

Here is the JavaScript code required to properly initialize the multiselect on the Portal (changes in bold):

var favouriteColour = $('#ec_favouritecolourportal');
favouriteColour.hide();

var multiselect = $('<select multiple><option value="948180000">Red</option><option value="948180001">White</option></select>');
multiselect.val(favouriteColour.val().split(','));
multiselect.insertAfter(favouriteColour);
multiselect.change(function() {
    favouriteColour.val($(this).val());
});

As you can see, only one additional line is required (jQuery does a lot of the heavy lifting for us). All we need to do is read in the value from the text field (which should be updated via the plugin), split by the comma, and set the value (jQuery expects an array of values to set a multiselect option set).

Alternative Approaches That Failed

As opposed to trying to keep the text field synchronized, I thought that there may be an easier technique to get the current value of the multiselect option set. Even though they aren’t supported on Entity Forms or Web Forms, I thought that perhaps there might be another area that does support them. I tried:

  • Using Liquid. Unfortunately multiselect option sets aren’t exposed in the Liquid objects.
  • Using the OData feed. Again, no luck – multiselects aren’t exposed here either.

So, in the end, the plugin technique was the best I could come up with.

2 responses to “PowerApps Portals: Multiselect Option Set – Part 2”

  1. […] post PowerApps Portals: Multiselect Option Set – Part 2 appeared first on Engineered […]

  2. mahesh rao says:

    it is super post! it worked fluently

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.