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.

Improve this question
7
  • Can't you just set a default value in the column settings? Commented Dec 15, 2015 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. Commented Dec 15, 2015 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. Commented Dec 15, 2015 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. Commented Dec 15, 2015 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? Commented Dec 15, 2015 at 18:10

1 Answer 1

Reset to default
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.

Improve this answer
1
  • 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. Commented Feb 28, 2019 at 22:07

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.