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

HTML content in widgets

SOLVED
Highlighted
Level 7

HTML content in widgets

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 

1 ACCEPTED SOLUTION

Accepted Solutions

Re: HTML content in widgets

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;
}
3 REPLIES

Re: HTML content in widgets

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;
}

Re: HTML content in widgets

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?

Re: HTML content in widgets

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.