Dynamic Drop-Down Inside Edit Grid Component of Form Designer

[cfudge]

Hello,

Can anybody help me understand if it is possible to pass a list of options into a drop-down nested inside an edit grid in Form Designer?

I am working on a workflow where I need a custom form that allows for the user to enter multiple items that each consist of two strings - one from a textbox entered directly by the user, and the other from a dropdown list of options.

In order to allow any number of items to be entered, I’ve inserted a text field and a drop-down field into an Edit Grid, which will allow the user to add as many pairs of text field and drop-down as appropriate.

I need to pass in a list of strings to dynamically generate the drop-down options the user can select from.

I’ve seen that this can be done by passing in a list with the correct name via FormFieldsCollection under the Data Bindings section of the Form Activity, though the documentation seems to be outdated and refers to “FormData” rather than “FormFieldsCollection”: https://docs.uipath.com/activities/docs/advanced-controls-form-designer#dynamic-drop-downs

The problem is, while I can get this working for a normal drop-down, I do not know how it can be done when the drop-down is nested inside of an edit grid. I’ve tried setting the field key and argument name appropriately, but it doesn’t seem to work unless I pull the drop-down outside of the edit grid.

I’ve seen in old documentation that there used to be a “Data Source Type” option that could be set to custom, which allowed for passing a list of strings in directly, though that feature seems to have been removed for some reason: Data Source Type in Drop-down List of Form Designer

I’ve also seen references in that same thread to the possibility of somehow supporting this feature by editing the JSON of the field directly, but I am not sure what that would look like and wasn’t able to find any relevant documentation for how to work with the JSON and Javascript in Form Designer(i.e. it’s not clear how to make variables from the workflow available in the JSON/Javascript editors in Form Designer or what the structure for the JSON should be).

Please let me know if anybody has encountered this issue before or knows of an applicable solution.

[Nithinkrishna]

Hey @cfudge

Good day.

Have you tried the steps on the cascaded dropdowns in edit grid section. If not please check below link.

Advanced Controls in the Form Designer

I hope this helps your scenario.

Cheers
#nK

[cfudge]

Hello Nithin,

Thank you for your response.

I have a feeling this section may be for an older version of UiPath, or else I may be missing some steps still.

Step 1 refers to a “FormData wizard,” but I’m not sure what this means and wasn’t able to locate any documentation on it. Perhaps it refers to the Form Designer?

The section also refers specifically to cascaded drop-downs, whereas I only have one dropdown as part of the Edit Grid, so I’m not sure which parts are actually relevant to my case as it mentions I need , _dropdown and _parent arguments. I think the _parent argument would refer to another dropdown based on which the options in the child dropdown are populated, correct? I’m not clear on what should be populated in the argument, however.

Step 6 says “In the Logic tab, notice the preconfigured advanced logic,” but I don’t see any preconfigured logic in my dropdown and I’m not sure if that’s because I’m missing a step. Perhaps this preconfigured logic only exists for cascading dropdowns?

Step 8 shows a screenshot of the aforementioned logic, but it is scrolled to the right, cutting off part of the code and simply says to replace data.<parent_dropdown_key> with row.<parent_dropdown_key>, which I don’t believe is relevant in this case as I am not dealing with cascading dropdowns or even dropdowns where the options depend on the row.

Based on this it sounds like I should be able to simply reference the input arguments inside the logic to populate the dropdown options, but I’m not sure what this would look like.

Please let me know if you have further insight on this, and thank you for your help!

[cfudge]

As a quick update, I’ve downloaded one of the example workflows provided on this page and it is indeed using a much older version of the form activities package that looks quite different.

[cfudge]

I just wanted to post an update as I found a solution on my own.

I found that I was able to pass in a list of arguments for my nested dropdown, but there were a lot of pitfalls and it was quite difficult to figure out.

First, I found that I can create advanced logic for my dropdown that can access the values passed into the form as a Javascript object accessible via the “data” variable in the advanced logic.

Despite this, I found I could not access the list passed in for the dropdown menu. The reason seems to be that, counterintuitively, arguments provided to the form with the _dropdown suffix are treated specially and, though they will be used to populate the values for a dropdown list at the top level of a form, do not appear in the “data” object that is available in the advanced logic.

The solution to this problem was therefore to change the name to NOT follow the _dropdown pattern.

The next problem I encountered was that the dropdown options do not take the form of a list.

As can be seen when looking at the Data tab while editing the drop-down list component, drop-down list items have both a label and a value. Therefore, I had to pass in the list of dropdown options as a .NET list of dictionaries, each with a “label” and “value” key.

Next, I found that advanced logic must have a trigger.
It seems that simply setting this to simply a one-liner “return true;” worked. I am not sure if this is best practice or if there is a better way.

Finally, I was able to set the values for the drop-down. In order to do this, I set added an action of type “Merge Component Schema” to the advanced logic using the above trigger. I knew to select this type of action and the data structure of the return value based on the documentation that explains cascading drop-downs as Nithin linked above.

Using this, I was finally able to make a working, dynamic drop-down list inside of the edit-grid container, but I still experienced more issues related to my specific use-case.

When passing in a data table as input to pre-populate the edit grid, an issue occurs with the dynamic drop-down in place, whereby each pre-populated entry displays only an error message, “Cannot read property ‘value’ of undefined.”

After playing around, I eventually found that the form designer is making use of the project form.io: Form.io · GitHub

There appears to be a bug somewhere in the pre-populated row template (On the “Templates” tab of the Edit Grid Component) for the edit grid that calls some form.io methods. When I updated the template to remove some logic and simply print out the values rather than performing calling those methods, it eliminated the error message. I am not sure what the default code is meant to do, only that removing it seems to have resolved that issue.

For anybody interested, you may find the form.io documentation here: Introduction - Form.io Documentation

Here are some screenshots of the resulting solution to my issue:

Where “BranchOptions” is an argument provided in the FormFieldsCollection property (Under the Data Bindings section) of the form activity.

Hopefully this can help somebody else if they have difficulty with doing some advanced things using the form designer.

It might also be helpful to anybody reading this in future to mention that I discovered it is possible to reference the form window within the Javascript as “this” and jquery is available.

[Nithinkrishna]

Hey @cfudge

First of all that’s quite a good one and appreciate your patience to research it and sharing the same back. Thank you so much.

I got a bit of understanding from the post.

But I want to just know one thing,

In your edit grid, are you gonna pass same drop-down values for all the rows ?

Or different? Please confirm.

Thanks
#nK

[cfudge]

Hi Nishin,

Based on my experience so far, I believe the dropdown menu, regardless of the number of instances, is treated as one “component” in the form’s schema. I don’t think it supports different drop-down options for different rows of the edit-grid.

This is further supported by the fact that it is possible to set the drop-down options directly on the edit-grid object itself, which contains a list of components that only ever contains two items in my example (one for the dropdown and one for a text field also nested inside the edit grid).

I was able to discover this by playing around with advanced logic to set various values on the form such as the title, description or footer of the edit grid or text area form controls and just printing out string representations (typically using JSON.stringify()) of the objects I was interested in. I was able to discover quite a lot this way.

I think if we wanted any further insight, we may need to read the form.io code directly. It appears to be open-source on Github, though I suspect a forked version may be used for UiPath.

Thanks,
Cole

[Nithinkrishna]

Yep, thanks

That was my scenario to have dynamic dropdowns

Partially achieved the solution but still it’s not 100%

Anyway thank you so much for sharing all these stuff.

Thanks
#nK