Showing results for 
Search instead for 
Did you mean: 
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you know you can set a signature that will be added to all your posts? Set it here! X

Read XML File

5-Regular Member

Read XML File


I have some trouble reading an XML File with Vuforia Studio.

  1. The first way is the XML DOM. I have downloaded the library from here and Imported the .js files like: $"Uploaded/dom-parser.js"); Do I have to create an Object from the class dom-parser in my Home.js to call the methods?
  2. Another way was to read the XML File with the XMLHttpRequest() and save the content in a variable. This is working fine. In the XML File I have the Elements SopItemTitleText (Title), ItemText (Text, like a description) and Filename (name of an image). The ItemText contains sometimes line brakes. I was reading the string of the XML File with e.g. string.match(/<SopItemTitleText>(.*?)</g); and save its content in an Array. I delated <SopItemTitleText> and < from every entry of the Array. Unfortunately string.match(...) doesn't work, when the <SopItemTitleText> contains linebreaks.

Is there a way to import a library in the trial version of Vuforia Studio? Or reading the complete String between <SopItemTitleText> and < with the line breaks?


Another problem I had was with the CSS script. How can a textarea dynamically change the height in the context of the content in the textarea? The StudioID is textAreaWI. I was trying the following script:

margin-top: 10px;
resize: none !important;

background-color: rgba(255,255,255,0.4) !important;
overflow: hidden !important; 
font-size: 14px !important

max-height: 100% !important;
height: auto !important;

Is there also a way to mark only the text with the same background-color?


Thank you so much for your help!



Hi @Raphael97 ,


when you load the script it should be available inside the current environment (  if the java script requires no additional references) 

There is no difference for the Studio installation if you use trial or other license model. The Studio client installation is the same - an reading some file form the local direction is not affected by your current license model - is an issue for the used server and if  Thingworx functionality is available in Vuforia Studio.

I do not understand what the issue with the line brakes is

I uploaded the following xml  file to Studio Upload folder:

       <name>Belgian Waffles</name>
       <description>Two of our famous Belgian Waffles with plenty of real maple syrup</description>
       <calories>650</calories> </food>
       <name>Strawberry Belgian Waffles</name>
       <description>Light Belgian waffles covered with strawberries and whipped cream</description>
       <calories>900</calories> </food>
       <name>Berry-Berry Belgian Waffles</name>
       <description>Light Belgian waffles 
	    covered with an assortment of fresh 
		berries and whipped cream</description>
       <calories>900</calories> </food>
       <name>French Toast</name>
       <description>Thick slices made from 
	       our homemade sourdough bread</description>
       <calories>600</calories> </food>
       <name>Homestyle Breakfast</name>
       <description>Two eggs, bacon or sausage, toast, and our ever-popular hash browns</description>
       <calories>950</calories> </food>

And then used some code like this:

var parser = new DOMParser();
var stringContainingXMLSource = '<?xml version="1.0" encoding="UTF-8"?><note><to>Tove</to> <from>Jani</from><heading>Reminder</heading><body>Dont forget me this weekend!</body></note>'
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");

function loadXMLDoc(fileName) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
  };"GET", "app/resources/Uploaded/"+fileName+".xml" , true);

var myJsonArray=[]

function myFunction(xml) {
  var x, i, xmlDoc, table;
  var my_obj= {}
  xmlDoc = xml.responseXML;
  x = xmlDoc.getElementsByTagName("breakfast_menu")
  for (i = 0; i < x.length; i++) { 
   my_obj['name'] = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
    my_obj['description'] = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue
    my_obj['price'] = x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue
   my_obj['calories'] = x[i].getElementsByTagName("calories")[0].childNodes[0].nodeValue
  //document.getElementById("demo").innerHTML = table;
$scope.testFunc=function() { loadXMLDoc('example1')


where the example1.xml has the same content as exampoleLineBrake.xml but it does not have any line brakes

But I did not face any problems there. So my question is ,  what is actually the issue here?




5-Regular Member


thank you for repling.

I had some troubles using


 I will try to apply your code tomorrow.

 Do you have a solution for the other Problem? (Auto height TextArea or mark the text in a TextArea)


Thank you

I do not know such possibility (regarding the CSS question) you can set CSS style for the text. Also possible to set /replace dynamically the style by script:


angular.element(document.querySelector("[widget-id=textArea-1] textarea")).removeClass("textAreaInput").addClass("TextAreaAccepted");

To replace the used class textAreaInput by TextAreaAccepted


Another option , I think , is to have a Image widget which point to a svg file.  The svg file could contains some text with different formating. So when you click the picture you can open a popup with textArea where you will edit the text and later it will be written with some format attributes to the svg.

Please refere to About SVG and the topic Display SVG as 3D Image on Hololens

Hi everybody,

thanks @RolandRaytchev for sharing your code, this helped a lot. One thing I discovered is, that it worked better for me if I used

x= xmlDoc.getElementsByTagName("food") instead of:

x = xmlDoc.getElementsByTagName("breakfast_menu")


So now the loop for (i = 0; i < x.length; i++) ... will work with a length of 4 instead of just 1.


I tried to scipt a search funktion that throws the properties of a value if it was found in the list. Unfortunately it doesn't work jet. Any suggestions? 🙂



$scope.checkIfIncluded= function() {
var name2search = 'Belgian Waffles';
var obj ={};
obj = $;
var found=false;
var objectLength = Object.keys(obj).length;
for(var i = 0; i < objectLength; i++) {
if (obj[i].name == name2search) {
found = true;
console.log("found: "+found);
if (found==true){
console.log("found it!");
// $scope.printOutcome(name2search,obj);

if (found==false){
console.log("not found");