2

I am trying to prepopulate a managed metadata field in a NewForm of my list. I don't want to save the value as it will be used as a suggestion passed in through URL a parameter that the end user is free to change.

So far I have been able to set the value of the textbox. I am having trouble verifying the string to make the form pick it up as an actual value.

I am setting the initial value using:

document.querySelector(".ms-taxonomy-writeableregion").innerHTML = "MyValue";

This appears correctly on the form but doesn't validate the value and do the full steps unless you click into the textbox.

If I try and save the form without clicking into the textbox to verify the value it will save with no error, but the managed metadata field is blank.

Does anyone have any experience with setting this value in the textbox via JavaScript?

EDIT:

I have found out a few things but still no solution.

It looks like after a selection is made from the drop down or on blur of the managed metadata field a call is made at <sitecollection>/_vti_bin/TaxonomyInternalService.json/GetMatches. I have looked into this a bit, but haven't found anything worthwhile. One of the few resources I found was Marc mentioning the potential use of it.

I tried going a different route too, like Dylan mentioned. I wasn't able to have any luck using focus() or click(). From what I can tell it is because the managed metadata fields are not made using <input> but rather <div>.

This is the HTML that renders on the NewForm for the managed metadata field:

<div title="Customer" class="ms-taxonomy-fieldeditor ms-taxonomy-fieldeditor-standard" style="width: 364px;">
    <div class="ms-rtestate-write ms-taxonomy-writeableregion ms-inputBox" 
     id="Customer_$containereditableRegion" role="textbox" aria-haspopup="true" contenteditable="true" 
     aria-autocomplete="both" aria-multiline="true" DisableRibbonCommands="True" AllowMultiLines="false" 
     RestrictPasteToText="True" RteDirty="true">​
    </div>
</div>

If you take the class ms-inputBox out of the interior <div> you can see that the 'input-like' look is only done via css. I think this is why I'm unable to get the .click() and .focus() actions to work appropriately.

Something else I found interesting was that after a value has been validated SharePoint adds in a <span> as a container for the text as a child of the <div>.

HTML after validated value:

<div title="Customer" class="ms-taxonomy-fieldeditor ms-taxonomy-fieldeditor-standard" style="width: 364px;">
    <div class="ms-rtestate-write ms-taxonomy-writeableregion ms-inputBox"
     id="Customer_$containereditableRegion" role="textbox" aria-haspopup="true" contenteditable="true" 
     aria-autocomplete="both" aria-multiline="true" DisableRibbonCommands="True" AllowMultiLines="false" 
     RestrictPasteToText="True" RteDirty="false">
        <span title="" class="valid-text">Customer X</span>
    </div>
</div>

I have tried to manually add a <span> and insert my text there. That also did not work when saving the form.

I think this info opens up more questions than answers, but if someone has any ideas on a solution that would be great.

  • Can't you just set a default value in the column settings? – Eric Alexander Dec 15 '15 at 15:26
  • In this case I will passing a value through dynamically depending on what page they came from. Example would be if they came from Customer X page, prepopulate field with Customer X, if they came from Customer Y page, prepopulate field with Customer Y. – Jordan Dec 15 '15 at 15:28
  • Gotcha. Might have to watch with browser dev tools to see if there's a particular JS function being called and then manually trigger that. – Eric Alexander Dec 15 '15 at 15:32
  • Using dev tools I can see that mySite/_vti_bin/TaxonomyInternalService.json/GetMatches is called. Have done some brief research on that and haven't found much. I haven't been able to depict what is initiating that call via dev tools yet. – Jordan Dec 15 '15 at 16:12
  • You say that the value validates when you click in the textbox -- could you just call click() or focus() on the textbox from Javascript after you have populated the value? – Dylan Cristy Dec 15 '15 at 18:10
3

I figured out how to get my field validated thanks to Paul Brown's post. In Paul's post he lists different references he used as well, one being Vadim whose answers on this site have saved me multiple times.

Here is the excerpt from Paul's post that solved the issue for me:

Validating the field

Part two of the solution is to validate the content you've just populated via a Microsoft function. The piece that tripped me here is that you need to pass a HtmlDivElement not a jQuery object to the function.

If like me you're using jQuery, get the Id of myMetadataField, trim off 'editableRegion' and hence get the ContainerId -

var myContainer = $('#' +ContainerId)

var divElement = myContainer.get(0);

If you've using the DOM then it's just document.getElementById(ContainerId).

The function call is then as follows -

var controlObject = new Microsoft.SharePoint.Taxonomy.ControlObject(divElement); controlObject.validateAll();

You should now have a validated entry in the taxonomy field (i.e. it's black text with a solid underline, not red text with a dashed underline) and the form will submit successfully.

  • Very useful and very convenient! Thanks for this – Water Feb 20 at 10:09
  • As an added note, if your taxonomy has multiple levels, the div containing the text can only be set to the last level or it won't validate correctly. – DrewB Feb 28 at 22:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.