Dashboard Code Mode Label Changes

Renato Marcello dos Reis shared this question 9 months ago
Answered

Hi everyone,


I was trying to put a simple text in a dashboard which will receive a value from a JS code.


To achieve this, I've tried a few things and I had some issues that I couldn't figure out what's happening. I hope any of you guys can point me to the right direction.


Let's try to explain my approach.


If we simply pick up the reference to the field, and show it's values, we're gonna receive some interesting issues. Let's see some code:


let dataText = this.apis.canvas.select('Data');

console.log(dataText.innerText);


The above code is receiving the values from the label in a variable and I'm just showing it's innerText in console. This very values are empty even if the label has a text.


I think this happen's, because the console is showing it's values before the actual value was rendered. Every code using, is under onRenderer function, so I can't understand what's going on in this case.


To solve my issue, I created a observer, which will force this change when the value is equal to something.


let observer = new MutationObserver(function() {

if (dataText.innerText == "Test") {

dataText.innerText = "Today";

console.log(dataText);

}

});


observer.observe(dataText, { childList: true });


The above code works, but somehow, the value is not respecting the field format options, and it's rendering the result with the default values.


Is there any other way to achieve this simple change you guys can suggest or something I'm doing wrong?

Thanks in advance!

Regards,

Renato Marcello

Replies (1)

photo
1

Hi Renato,

I hope you're well.

You're right that a Mutation Observer object is the correct way to access the dataText.

I also found that changing the value of the innerText would simply re-render the object with default values. I might have to query this with the developer team to find out why and whether it's possible to keep all the original formatting. You may have to set the styling with innerHTML, e.g.

dataText.innerHTML = "<strong><span style=\"font-size: 40px;</span></strong>";

Kind regards,

Chris

photo
1

Hi Chris,

Thanks a lot for your help and answer to this.

Your suggestions seems to work pretty well. By using innerHTML, I can provide the CSS style I needed, though I would prefer to have less code. If by any chance the developer team does not have another sugestion, I can manage to work with the CSS block code in JS.

Thank you very much for this kind suggestion.

Regards,

Renato Marcello

photo
1

Hi Renato,

No problem at all!

I've created an internal task for the developer team, to see if we can find a more elegant solution. I'll let you know as soon as I find out.

Kind regards,

Chris

photo
1

Hi Renato,

Just to let you know I'm still waiting to hear back. I'll keep you updated.

Kind regards,

Chris

photo
1

Hi Chris,


No problem, I'm gonna wait until the answer arrives. The workaround you provided already solved my problem. Just wanting to know if there's any other way, so our team with less understanding of CSS or HTML can provide some solutions when the time comes.

photo
1

Hi Renato, I hope you're well.

I realise this is low priority, but just to let you know that we're still waiting for an update on this one, but hopefully we'll get something soon.

Kind regards,

Chris

photo
1

Hi Chris,


Thanks a lot for your response.

No worries, it has low priority indeed. I will patiently wait!

Regards,

Renato Marcello

photo
1

Hi Renato,

A Happy New Year to you!

Just to let you know, it does look like this is currently the only way to set the text formatting here. So I'll now mark this as answered.

Kind regards,

Chris

photo
Leave a Comment
 
Attach a file