Skip to main content
Solved

JS Insert in NAC form - how to work with elements

  • 5 June 2024
  • 9 replies
  • 113 views

I saw this new form plugin in the Nintex Gallery - 

 

https://gallery.nintex.com/t/js-insert

 

and I was able to get the example Javascript code to work (Character Counter, expand on focus, change color on hover).  I learned how to identify the Nintex control that I want to modify and some events (like  keyup and hover) that can trigger the modification.  But now I want to expand that for use in other parts. I could really use a Javascript “cheat sheet” that explains all the different trigger events I can use in these functions and all the ways to attach it to an element on the form.

 

Example- I want to make dynamic dropdowns (aka cascading / dependent dropdowns) that populate based on other data selections on the form.  I first tried using the Nintex “Choice” controls but I don’t know how to manipulate those with Javascript.

 

I next tried adding an HTML “select” tag in a Label control.  It displays the dropdown but I have not been able to modify it.  Here is what I have so far.  Let me know if you have any advice or suggestions.

I create a couple form variables to display the dropdown in the label control - 

It displays the dropdowns in the Label,

 

I add the JS-Insert form plugin and add Javascript to it, with a function that will populate the city based on the country.  So far, I have not gotten it to work.

I also tried following how it works with the other examples, using the CSS class of the control and trying to attach the function to the event, but so far no success.

$(".myField textarea").keyup(function()...

What am I missing?  Where would I go to learn enough about Javascript to be able do build things like these?

9 replies

P
Userlevel 2
Badge +7

Here is the HTML & Javascript text if you want to try it yourself:

<script>function popCities() {   var countryDropdown=document.getElementById("country");   var cityDropdown=document.getElementById("city");    cityDropdown.innerHTML="";   var selectedCountry=countryDropdown.value;    var cities={     "USA":["NewYork","LosAngeles","Chicago"],     "India":["Mumbai","New Delhi","Banglore"]   };    var cityOptions=cities[selectedCountry];   for(var i=0;i<cityOptions.length;i++)   {     var option=document.createElement("option");     option.text=cityOptions[i];     cityDropdown.add(option);   }  } </script>

 

"<select id='city'><option disabled>--select--</option></select>"

 

"<select id='country' onchange='popCities()'><option value='USA'>USA</option><option value='India'>India</option></select>"

H
Userlevel 1
Badge +3

Hi Pablo, 

I’m assuming from your other posts that this is related to having one large, high-performance, form with cascading options?

This plugin is not really designed for dealing with data bound scenarios.  Even if you get the above working (and I did in testing), you’ll have problems when the form moves from the initiation to approval because the data selected at initiation won’t show up selected correctly in the approval forms, or in My Nintex when looking back at previously filled forms.

You can however create your own plugin as you mentioned you started looking at on the other thread.  If you do want to go down that route, I’d highly recommend our plugin starter kit: NTX-XT/ntx-form-plugin-starter (github.com)

I don’t know if you’re familiar generally with web-dev, but you’ll want to install VS Code, Node, Git then clone the above github repo in VS Code and start working from there.

However, I might rather suggest that if you have a working multi-form solution currently, that you wait a little time until we release our NAC integration with our new Appdev/UI product (Business Process Automation Platform (nintex.com)

Where NAC Forms are intended for super quick simple/medium complexity for non-Devs, Skuid NLX (you can get a free trial on the above link) allows you to build much more complex user interfaces, including of course forms.  This might work well for you.  If the trial goes well, reach out to your account manager for more info.

Hope this helps,

Ashley

P
Userlevel 2
Badge +7

Hi Ashley,

 

Yes, that was one of the related customizations I wanted to achieve.

I understand what you mean about the data selections not being available later in the workflow but I had a plan in mind for that.  But I was interested in this Plugin Starter Kit and I gave it a try yesterday.

It took several hours to get my development environment set up with all the requirements, but I got the demo to work.  When I added the Plugin, the instructions wanted me to “Link a URL” but it made an error, possibly because https isn’t configured in Visual Studio Code (and my attempts to install a certificate yielded nothing but a “Cannot GET /” error in the browser). I was still able to download the JS file and add the plugin.  I might send a message to the author jpoul to see if he has suggestions or can point to more detailed documentation.

 

Now that the “proof of concept” works I will see if I can create anything useful.  I might post my progress here later.  Thanks for pointing me in that direction.

P
Userlevel 2
Badge +7

As for that new appdev product, Skuid, it sounds interesting so I played a few of the sample / demo apps.  It has a better overall look & feel but I was still disappointed by how the controls worked.  Small example, but still revealing of the problem -- the calendar / date picker.

 

If we ask our user to enter his or her birthday, the user would have to click dozens and dozens of times, going back month by month, to get to a date that was decades ago.  Yes, I see that it also allows the user to type the year into the text field nearby but most users will not think of that.  And when the user starts clicking that Back button it, in some circumstances, will responsively adjust the location of the Back button so that the user clicks on empty space and must start over.  These kinds of little quirks and flaws is exactly why we are exploring custom plugins to begin with, even though we are not webdev/JS/React/Lit experts and we need all the documentation we can get.

H
Userlevel 1
Badge +3

Hi Pablo,

Sounds like you’re in the right track now.  Please do keep us posted or let us know if further help is required.  

With regards to Skuid, I’ve reached out to the team owning that product for their thoughts, comments, and suggestions.

H
Userlevel 1
Badge +3

As for that new appdev product, Skuid, it sounds interesting so I played a few of the sample / demo apps.  It has a better overall look & feel but I was still disappointed by how the controls worked.  Small example, but still revealing of the problem -- the calendar / date picker.

 

If we ask our user to enter his or her birthday, the user would have to click dozens and dozens of times, going back month by month, to get to a date that was decades ago.  Yes, I see that it also allows the user to type the year into the text field nearby but most users will not think of that.  And when the user starts clicking that Back button it, in some circumstances, will responsively adjust the location of the Back button so that the user clicks on empty space and must start over.  These kinds of little quirks and flaws is exactly why we are exploring custom plugins to begin with, even though we are not webdev/JS/React/Lit experts and we need all the documentation we can get.

Hi Pablo,

Does the following help you at all regarding the date time side of things?

We have a property under the “Advanced” tab called “Show month & year pickers” that allows you to select a specific month and year so that you do not have to click dozens of times to get back to a past date. Here are a couple of screen shots and the docs link is located here: https://docs.skuid.com/latest/en/skuid/fields/#:~:text=Show%20month%20%26%20year%20picker%3A%20If,the%20list%20of%20possible%20years

 


 

 

P
Userlevel 2
Badge +7

Yes, that would help!

P
Userlevel 2
Badge +7

@hoshy_ntx 

I am now creating my own plugin using that starter kit. I have it displaying a pop-up calendar date picker that I found called lit-flatpickr.  I can get it to select the date, but how do I save the selected value?  The code has a getValue() method but I can’t get it to work.  Can you show an example where I can call that method and have it return to the Nintex form to be displayed and used in the workflow?  If I can understand that last step I could start doing a lot more with these plugins.

P
Userlevel 2
Badge +7

@hoshy_ntx

I found an example from Nintex about how to store the value from the web component, but I ran into a question, which I posted here,

form plugin code -- getMetaConfig(): Promise NintexPlugin versus Promise PluginContract

Can you look and see where I am going wrong?

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings