Hi community,
I would like to display dynamically a text inside a web component.
The use case is to warn users of maintenance windows with, for example, a message like “Update scheduled for 1 March, the low code app will not be available between 10am and 11am”.
I don’t want to publish a new app every time I want to update the message.
Thanks for your help
Hi Yvan,
I’m starting an extra answer, to complement the original one, so I can add images.
If you wish to use HTML inside the grid component, you’ll have to specify the width of your grid in your CSS to make it span the full width.
e.g.
I’ve also noticed that you try to get scrolling text using CSS, but you can achieve this in a much easier way using the marquee tag in HTML5.
e.g. <marquee>{myColumn}</marquee>
The result is your dynamic DOM value scrolling your grid component.
Hi Yvan,
You could use the DataMiner Object Model.
Create a DOM definition and an instance.
The instance can easily be updated from the same or a different low-code app.
You can then use a GQI query to retrieve your message.
Alternatively, you can also create an ad-hoc data source and read it from somewhere else e.g. a file or similar.
Thanks Ive for your answer.
I tried to implement something but I have issue.
To have a dynamic text, I use a grid component (I don’t think it’s possible with a web component as we can’t use query result in this type of component)
Then I use a html code to have my text but this text is not the same when I use web component and grid component. It doesn’t use the full width of my shape and the result is not nice.
Code example below (to generate a scrolling message : Test message)
<div style="display: inline-block;
animation: scroll 12s linear infinite;
padding: 0 25%;
font-family: 'Segoe UI Light', 'Segoe UI Web Light', 'Segoe UI Web Regular', 'Segoe UI', 'Segoe UI Symbol', HelveticaNeue-Light, 'Helvetica Neue', Arial, sans-serif;
font-weight: 100;
font-size: 20px;
Test message
Thanks
Thanks Ive for your new answer.
To make it works I use the following code
<div style=”position:absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; flex-wrap: wrap;”>
<span style=”position: relative; left: 0; width: 100%; padding: 0 8px; color: #fff; text-wrap: nowrap; animation: scroll 30s linear infinite;”>My text message</span>
</div>
<style>
@keyframes scroll {
0% {
left: 100%;
}
100% {
left: -100%;
}
}
</style>
I didn’t use “marquee” tag because it seems it’s not always supported