Skip to main content
M
mneufeld13-Aquamarine
13-Aquamarine
November 2, 2018
Solved

HTML content in widgets

  • November 2, 2018
  • 1 reply
  • 4209 views

Is there any way to put HTML tags into for example Label widget? For instance i need to:

- put a label like "H2O" but more like chemical style (water symbol), in HTML I would use "H<sub>2</sub>O" but when I put it into into label Text attribute HTML is not interpretted

- put some text with fragments in bold like: "This is a very <b>long</b> text"

 

The only what somehow "worked" is to put many labels one to each other ant assign different CSS to it, but it is pain. 

 

Thanks in advance for any hints,

Michal 

    Best answer by ClayHelberg

    You can do this, but it will probably need to use some scripting. It also kind of breaks the Angular model, so you may run into some funny results if you do anything that affects the label in other parts of the experience.

    Set up your label as normal with some dummy content. Then, in your Home.js, add the following:

    $scope.init = function() {
 // set content of label-2 with HTML
 var labeldiv = document.querySelector("*[widget-id='label-2'] div");
 labeldiv.innerHTML = "H<sub>2</sub>O";
}

angular.element(document).ready($scope.init);

    This assumes static content. If you need to update content in reaction to something else happening in the experience, you could make a function to set the content, and then call the function from the appropriate event, something like this:

    $scope.setHTML = function(labelid, html) {
 var labeldiv = document.querySelector("*[widget-id='" + labelid + "'] div");
 labeldiv.innerHTML = html;
}

    1 reply

    C
    ClayHelberg18-OpalAnswer
    18-Opal
    November 6, 2018

    You can do this, but it will probably need to use some scripting. It also kind of breaks the Angular model, so you may run into some funny results if you do anything that affects the label in other parts of the experience.

    Set up your label as normal with some dummy content. Then, in your Home.js, add the following:

    $scope.init = function() {
 // set content of label-2 with HTML
 var labeldiv = document.querySelector("*[widget-id='label-2'] div");
 labeldiv.innerHTML = "H<sub>2</sub>O";
}

angular.element(document).ready($scope.init);

    This assumes static content. If you need to update content in reaction to something else happening in the experience, you could make a function to set the content, and then call the function from the appropriate event, something like this:

    $scope.setHTML = function(labelid, html) {
 var labeldiv = document.querySelector("*[widget-id='" + labelid + "'] div");
 labeldiv.innerHTML = html;
}
      M
      mneufeld13-AquamarineAuthor
      13-Aquamarine
      November 13, 2018

      Thanks @ClayHelberg, it works to some extent.

      For Labels it is fine.

      I also tried it with button. I used:

      $scope.init = function() {
      var buttonText = document.querySelector("*[widget-id='button-7'] button");
      buttonText.innerHTML = "H<sub>2</sub>SO<sub>4</sub>";
      }

       

      and I use:

      angular.element(document).ready($scope.init);

      When I navigate to such view my button remains empty. When I navigate to next view and go back, it is in place.

      I put additional: $timeout(function(){$scope.init();}, 800); and it helps. But i put 800 based on some tests... For 200 it still remains empty, so it does not seem to be stable solution. Any hint for that?

      C
      ClayHelberg18-Opal
      18-Opal
      November 15, 2018

      Hmm. My guess is that Angular is doing some kind of dynamic formatting on the button widget that interferes with replacing its content if you do it too early. I'm not sure I have any better ideas than adding the timeout as you've done.

      Terms & ConditionsCookie settingsAccessibility statement