How can I get a field element id?

Hi everyone, completely new to Skuid and trying to do something like the URL below to create an auto-complete feature in a Salesforce layout.

https://smartystreets.com/products/single-address

Done this many times on regular forms, but was able to add in the JavaScript necessary, but now I’m stuck because I don’t know how to get the Element ID of the address fields. Not sure if you can see the image below, but as you can see, it doesn’t appear that each field in the layout has an ID. It has a data-uid, but I’m not sure if/how I can use that to access this particular field.

Trying to do something like this:

var street = document.getElementById('street-address').value ;

Any help would be really appreciated!

Thanks!

Joseph

Hi Joseph,

You might try viewing the Skuid page XML from the composer. There you should be able to see the “uniqueid” for every field.

I checked in XML there I didn’t found any “uniqueId” for field ,there is only field api as Id but it’s doesn’t work. 

Yes, we have given up on this project.  We found a way to somehow find the field by using a CSS class or something, but that didn’t give us what we needed because the fields are not inside of a form.  So bummer.

You can definitely build that url with skuid.

Try just adding a ui-only formula field to your model and using a formula field to build the url out of the component fields.

Joseph,

SmartyStreets supports REST/JSON.  You can setup a data source and submit data to SmartyStreets using a Skuid model.  Your Inline JavaScript can handle the data in a model and update any fields on the Skuid page as needed.

Thanks,

Bill

There is a way to do this, but it does require JS and is a bit tricky.  in the JS where you setup smartyStreets, you can “wrap” the fields you want into a form.  Here’s a basic example:
     $(“.MemberMailingSection”).wrap(function() {
            return ‘’;
        });
    
    var liveaddress = $.LiveAddress({
            key: GetSmartyStreetsLicense,
        debug: false,
        target: “US”,
        addresses: [{
           id: ‘MemberStreetsSetup’,
        address1: ‘.MemberMailingStreet textarea’,
        locality: ‘.MemberMailingCity input’,
        administrative_area: ‘.MemberMailingState input’,
        postal_code: ‘.MemberMailingZip input’,
        country: ‘.MemberMailingCountry input’
        }]
        });

Now, for each field, I added a css class with the names you see.  I know smartystreets likes Ids (#), but this seems to work.  The “MemberMailingSection” is the css class of the column in the field editor.  

Hope this helps.