Home > Forum > Forms > Form dropdown reload with Javascript

Form dropdown reload with Javascript
0

Hi all!

We implemented a button with popup functionality to create a new workflow item.

On callback of popup item we want to set new workflow element id to dropdown, but obviously the new item is not in dropdown.

Is there an easy way (with Javascript) to trigger reload of dropdowns datasource?

Thanks a lot in advance & best regards, Nik

MVP

Hi Nik,

can you switch the mode of the field from dropdown to autocomplete or popup search? Then you could set the value of the field to the workflow id and it will work just fine. I blogged about the same approach here:
https://daniels-notes.de/posts/2022/add-new-choice-field-value-without-leaving-the-page

I have only two other ideas, but I don't know if one will work:
1) When you switch to a different tab, all elements in the current tab are "destroyed" and the new ones are added. It could be that this also applies if a group is collapsed/expanded. Maybe that values of the drop down are retrieved each time, the field is added. Of course it could also be, that the values are retrieved only ones.

2) Did you test, whether you can add the new value as a select option via JavaScript, so that you can set the field to the new value? I doubt that the server will be interested in our changes. If there's any kind on validation on the server, it will use the actual data and not some UI data. This is at least my assumption.

Best regards,
Daniel

MVP
In reply to: Daniel Krüger (Cosmo Consult)

Hi Nik,

can you switch the mode of the field from dropdown to autocomplete or popup search? Then you could set the value of the field to the workflow id and it will work just fine. I blogged about the same approach here:
https://daniels-notes.de/posts/2022/add-new-choice-field-value-without-leaving-the-page

I have only two other ideas, but I don't know if one will work:
1) When you switch to a different tab, all elements in the current tab are "destroyed" and the new ones are added. It could be that this also applies if a group is collapsed/expanded. Maybe that values of the drop down are retrieved each time, the field is added. Of course it could also be, that the values are retrieved only ones.

2) Did you test, whether you can add the new value as a select option via JavaScript, so that you can set the field to the new value? I doubt that the server will be interested in our changes. If there's any kind on validation on the server, it will use the actual data and not some UI data. This is at least my assumption.

Best regards,
Daniel

Hi Nik,

it seems that idea 2 would have worked, but won't do so in the future:
From the change log of 2021.1.5, and this will probably be included in the next 2022 version too.

Added a mechanism for checking the integrity of data set in the choice fields with data source
values configured for this form field. Attempting to unauthorized setting a value not present in
the source (e.g. using JS API) will fail and generate an exception.
In previous versions, the system allowed to set values in the ID#Name format using JS API,
even if such a value did not exist in the data source. After the update to the latest version, any
attempt to set a value in the choice field (in any format - ID, Name, or ID#Name) will validate
this value with the data source values. The value not found in the data source will not be set in
the choice field.

Best regards,
Daniel

In reply to: Daniel Krüger (Cosmo Consult)

Hi Nik,

it seems that idea 2 would have worked, but won't do so in the future:
From the change log of 2021.1.5, and this will probably be included in the next 2022 version too.

Added a mechanism for checking the integrity of data set in the choice fields with data source
values configured for this form field. Attempting to unauthorized setting a value not present in
the source (e.g. using JS API) will fail and generate an exception.
In previous versions, the system allowed to set values in the ID#Name format using JS API,
even if such a value did not exist in the data source. After the update to the latest version, any
attempt to set a value in the choice field (in any format - ID, Name, or ID#Name) will validate
this value with the data source values. The value not found in the data source will not be set in
the choice field.

Best regards,
Daniel

Hi Daniel!

Thanks a lot for your precious input.

I also came across your blog some days ago (https://daniels-notes.de/posts/2022/add-new-choice-field-value-without-leaving-the-page) and simplified your approach a little bit ;-) Thanks a lot for your effort of putting this together, good work!

The only caveat with this approach here is that window.open does not work as a modal window anymore (it did in IE). So that one could be a very big feature request for the Webcon Team (Open workflow in a modal window, suppressing top menu,...). I don't know if this is planned in future release...

Regarding the dropdown, I wouldn't modify it with Javascript anyway. Webcon UI is implemented in React and I personally think it is not a good idea, to modify DOM elements through the backdoor and neglecting React's virtual DOM.

What definitely works is to add a dummy field to form (integer) and adding this field to the filter. The filter expression for this field should always be true, e.g.

<pseudocode>
{InstanceId} > {dummyfield}
</pseudocode>

I am modifying / toggling its value on callback (between 0 and -1) and that does the trick.

I also tried out Autocomplete and Popup, which works in any case.

Best regards, Nik

MVP
In reply to: Nikolaus Schusser

Hi Daniel!

Thanks a lot for your precious input.

I also came across your blog some days ago (https://daniels-notes.de/posts/2022/add-new-choice-field-value-without-leaving-the-page) and simplified your approach a little bit ;-) Thanks a lot for your effort of putting this together, good work!

The only caveat with this approach here is that window.open does not work as a modal window anymore (it did in IE). So that one could be a very big feature request for the Webcon Team (Open workflow in a modal window, suppressing top menu,...). I don't know if this is planned in future release...

Regarding the dropdown, I wouldn't modify it with Javascript anyway. Webcon UI is implemented in React and I personally think it is not a good idea, to modify DOM elements through the backdoor and neglecting React's virtual DOM.

What definitely works is to add a dummy field to form (integer) and adding this field to the filter. The filter expression for this field should always be true, e.g.

<pseudocode>
{InstanceId} > {dummyfield}
</pseudocode>

I am modifying / toggling its value on callback (between 0 and -1) and that does the trick.

I also tried out Autocomplete and Popup, which works in any case.

Best regards, Nik

Hi Nik,

thanks and if you have a better /simplified logic I would be glad to take a look and publish it. Of course I would mention you. :)
I can understand it if you don't want to. So don't feel pressured.

Regarding the modal, maybe adding different URL parameters would help. We could take a look at the URL of the embed/iFrame code.

Best regards,
Daniel

In reply to: Daniel Krüger (Cosmo Consult)

Hi Nik,

thanks and if you have a better /simplified logic I would be glad to take a look and publish it. Of course I would mention you. :)
I can understand it if you don't want to. So don't feel pressured.

Regarding the modal, maybe adding different URL parameters would help. We could take a look at the URL of the embed/iFrame code.

Best regards,
Daniel

Hi Daniel!

I ended up with a modal dialog Typescript and iframe solution and it works fine.

I will also use your mentioned SDK action, but had no time up to now to have a look at it.

Yes,no problem, I could send you my approach and would be glad if we could work together on this.

Is there a way to contact you?

Best regards, Nik

In reply to: Daniel Krüger (Cosmo Consult)

Hi Nik,

thanks and if you have a better /simplified logic I would be glad to take a look and publish it. Of course I would mention you. :)
I can understand it if you don't want to. So don't feel pressured.

Regarding the modal, maybe adding different URL parameters would help. We could take a look at the URL of the embed/iFrame code.

Best regards,
Daniel

Hi Daniel!

I tried out your SDK business rule (GetQueryParameter) on version 2022.1.1.53.

Unfortunately that does not work since HttpContext is always null here (Object reference not set to ...)

HttpRequest request = (new HttpContextAccessor()).HttpContext.Request;

I wonder if this is possible anyway since normally IHttpContextAccessor gets injected into an ASP.NET Core application controller via dependency injection.

Or maybe I did something wrong ;-)

Any ideas on that or alternatives to get current request Url?

Thanks in advance & best regards, Nik

MVP
In reply to: Nikolaus Schusser

Hi Daniel!

I tried out your SDK business rule (GetQueryParameter) on version 2022.1.1.53.

Unfortunately that does not work since HttpContext is always null here (Object reference not set to ...)

HttpRequest request = (new HttpContextAccessor()).HttpContext.Request;

I wonder if this is possible anyway since normally IHttpContextAccessor gets injected into an ASP.NET Core application controller via dependency injection.

Or maybe I did something wrong ;-)

Any ideas on that or alternatives to get current request Url?

Thanks in advance & best regards, Nik

Hi Nik,

if you are using type script you are probably creating an extension using the SDK. This could be an interesting idea. :)

I haven't tested it (knowingly) with 2022. Unfortunately I'm to busy at work with non BPS related tasks and I have other urgent tasks which I have to do during my spare time at the moment. In 2021 I had to use the referrer instead the request itself. Maybe this will work?

I'm not sure whether I can post my mail address here but you can find me in LinkedIn. There's only one Daniel Krüger at Cosmo Consult. :)

Bert regards,
Daniel