Skip to main content
Nintex Community Menu Bar

Extracting value from field in Form to be used in JS

  • August 9, 2019
  • 7 replies
  • 89 views
Forum|alt.badge.img

Dear Nintex community 

I am starting my adventure with Nintex, JS and jQuery.

I've spent alredy few hours trying to find solution this but seems that I still missing the concept...

 

So what I have:

1. List on sharepoint with column "State"

 

3881i0187F8C1301835FC.png

 

2. In forms I've assigned as follows:

3882iBE6256ADB51692E7.png

3. I've written this code in CustomJS field:

NWF.FormFiller.Events.RegisterAfterReady(function(){
var Sstate = NWF$('#' + varState);
console.log("Sstate= " + Sstate + " Sstate.val()= " +Sstate.val()+ " Sstate.text()= " + Sstate.text() + " varState= " + varState);
});

4. and this is what I received in console log when I am opening the form: 

3883iDCBAA9F40674D9AA.png

Sstate= [object Object]  Sstate.val()= undefined  Sstate.text()=  varState= ctl00_ctl54_g_2e434ee3_cc48_4bca_87f0_294c48339002_ctl00_ListForm1_formFiller_FormView_ctl38_cd490519_949d_48e6_90af_d0f96aacd0a9

What the hell I am doing wrong? :) Why I cant see nowhere in console log that the value of field State is "NH"? Please help! :)

    7 replies

    MegaJerk
    Forum|alt.badge.img+14
    • MegaJerk
    • Scholar
    • August 13, 2019

    Welcome to the world of JavaScript and Nintex Forms! It's a little frustrating sometimes, but it's never impossible :) 

    Moving on, the reason you're having an issue is because of how Nintex Forms generates the Form in different modes. 

    I noticed that you're in View Mode on in your screenshot, and wouldn't ya know, Nintex Forms (which I will now refer to simply as "Forms") doesn't actually generate IDs and place them onto the elements! Though it still creates the variable that it's obligated to make, it puts a GUID inside of it that doesn't actually point back to any ID on an element! Yay!

    3904i916D8A71A92DB21D.png

     

    That being said, there IS some useful information there if you know what you're looking for. 

     

    Notice how the parent Div Element (where the mouse pointer is) has an attribute called "data-controlname". See that value? That's the same name of the Control as given on the Form in the settings:

    3905i9A4FC427E8E0A208.png

     

    Because the name of the control is ALWAYS applied to the topmost level of a Control (the ONE exception being Panels... because they are silly), you can use it in more places and in a more reliable way than you can with the ID variables. 

     

    Using the name shown above ("slt_State"), you could use the following code to grab the value: 

     

    NWF$("[data-controlname='slt_State'] [formcontrolid][name]").val()

     

    Now you should be able to get the value of your controls no matter which mode you're viewing the form in!

    I hope this helps! 

    ---------

     

     

    Additional Notes: There are a few other topics which may be of interest but necessarily relevant to your situation. I would just like to make you aware of them in the event that they come up. 

     

    1. The code I'm using above does not specify what is called 'Context'. Because Controls can either be placed inside of a Repeating Section - or - on the Form proper, there needs to be some specificity when trying to grab the value of a control depending on which context it resides in.

      Where you can normally only have ONE control with a Control Name, any Control inside of a Repeating Section is... well... Repeated. So you can have MANY controls with the same Control Name. See the problem? When trying to grab the value of a Control in a Repeating Section, you'll first need to figure out the Row that the Control is in, and then look for it in there.

    2. There are a few Controls were the above methods do not work. Rich Text, for instance, will not return a value using my code above. Almost everything else will. Just make sure that you test it before you commit to using it!

    3. The Panel Control does not set the attribute 'data-controlname' to the Control Name that can be set in the Properties / Settings of the control because that would be too easy. Instead it sets it to the Title that you give it, and will then truncate the title down to 15 characters, replacing anything beyond that with an ellipsis.

      "Super Special Panel Name" will become "Super Special P..." 

      It is often better to target a Panel using a CSS Class name instead. 

     

    I hope this isn't too overwhelming! Please ask more questions as they come to you! 

     

     

     

    allan
    Nintex Partner
    Forum|alt.badge.img+9
    • allanNintex Partner
    • Nintex Partner
    • May 19, 2020

    @MegaJerk Thanks for the input, I just have a question left.
    What I'm doing is copying the attachments from the task to the main item (via workflow) and updating the NFFormData of the item to position them correctly. I am now trying to do it the other way around : getting the attachments from NFFormData from the main item to display them at the correct position (with the control name) on my task form via JS.
    I noticed that the datac-controlname is not generated for attachments on form, but the NFFormData is correctly saved after the submit of the form.

     

    My question is : how is it possible to get the correct attachment control on a form with JS except via using a CSS class ?

     

    I suppose it should be possible since Forms is doing some kind of mapping between "data-controlid" (or "formcontrolid") and "data-controlname".

    MegaJerk
    Forum|alt.badge.img+14
    • MegaJerk
    • Scholar
    • June 9, 2020

    I'm not entirely sure I understand what the problem is, but you can target your attachment controls by using a class instead of a Control Name.

     

    8091i0877ED0004F70A24.png

    (Notice that there is a space between classes)

     

    The other Attachment Control has a class of "attachment2". 

     

    Using the code:

    NWF$(".attachments1"); //or NWF$(".attachments2");

     

    will then target the appropriate control via JavaScript. 

     

    Does this solve your issue? 

     

    allan
    Nintex Partner
    Forum|alt.badge.img+9
    • allanNintex Partner
    • Nintex Partner
    • June 9, 2020

    I don't really have a problem per say, it's more some questions I've been trying to answer.
    I usually target my controls on my form with data-controlname, this way I do not have to change the form to add CSS classes.

    I had some forms with hundreds of controls (yeah.. I know...), so when I don't have to add a CSS on dozens on controls, I prefer not to.

    For example, I target the Title control with :

    NWF$('div[data-controlname="Title"] input')

     

    The thing is that the name of the attachments control does not generate a data-controlname attribute in the DOM, so this does not work :

    NWF$('div[data-controlname="MyAttachments"]')

     

    I was wondering how to get do the mapping between the data-controlid and the data-controlname, because attachments controls have a data-controlid.
    I'm guessing there's some way to it, I'm just not sure how. That was my question 😉

    MegaJerk
    Forum|alt.badge.img+14
    • MegaJerk
    • Scholar
    • June 9, 2020

    Ah. The Attachment Controls *do* get a Control Name, it's just that they can't be set by anything we do and is always automatically generated as "Attachment Control", which is useless for differentiating between multiple Attachment Controls. There is nothing we can do to change it.

     

    Because of this I would recommend just using a class to target them as the code change is marginally different. You could also throw them into a Panel with a specific control name, but because the Panels *ALSO* have problems with control names (they will become truncated depending on a few conditions... making them unreliable), I'd recommend just sticking to classes. 

     

     

    MegaJerk
    Forum|alt.badge.img+14
    • MegaJerk
    • Scholar
    • June 9, 2020

    To clarify, because I just thought of something, you have the ability to set the name to whatever you'd like (though I do not know if it would mess anything up when the information was trying to post to Sharepoint upon Form Submit) via the clientside js. It's just that it doesn't seem worth the effort when you'd need to target the individual controls via some other means (ie: classes), and if you're going through the effort of doing that... why not just keep that methodology elsewhere? 

     

    Giving them a unique class, looping through each Attachment Control, and setting the data-controlname to the custom class name would certainly be one way to approach it, but it would also be long winded and not entirely worthwhile imo.

     

    I hope that this helps. 

    allan
    Nintex Partner
    Forum|alt.badge.img+9
    • allanNintex Partner
    • Nintex Partner
    • June 10, 2020
    Thanks for the answer, that was what I thinking. And thanks for the input.
    I am not necessarily trying to change the data-controlname, I just wanted to use the same way of working with all my controls (and spare me time to add CSS classes on dozens of controls) and be consistent. But if it's just a few, that's ok,
    I think we can close our conversation on this topic
    Sidebar Buttons
    Nintex Community Home Contact Nintex Support Email Nintex Community Check Nintex Status
    Terms & ConditionsAccessibility statement