UI5 - How to get Marquee Text

Question

I was researching whether UI5 has any in-built functionality to provide marquee text but I cold not find any.

It seems that I may have to use jQuery or pure javascript to implement one. But if anyone already has any solution for this, can you please share it.

My XML View:

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"controllerName="marquee.MarqueeDemo">
    <Page title="Marquee Demo">
        <content>
        <FlexBox height="100%" width="100%">
        <items>
        <FlexBox direction="Column" justifyContent="Start" >
        <Label id="idScrollText" design="Bold" text = "Hello World"></Label>
        <Text text="How are you???"></Text>
        </FlexBox>
        </items>
        </FlexBox>
        </content>
    </Page>
</mvc:View>

I would like ot have text of idScrollText to have scrolling effect like Marquee text of HTML.

WHat would be the optimal way to achieve that in Ui5?

Thanks !

From MDN : Obsolete This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.developer.mozilla.org/en/docs/Web/HTML/Element/marquee — Rahul Bhardwaj
I guess the best way is using sap.ui.core.HTML: sapui5.hana.ondemand.com/#docs/api/symbols/… Example in the Explored App sapui5.hana.ondemand.com/explored.html#/sample/… — Rafael López Martínez

Soham Shah Soham Shah · Accepted Answer · 2017-04-26T19:50:44

I was able to achieve Marquee text using sap.ui.core.HTML

My View:

<FlexBox >
<core:HTML id = "idScrollText" width="100%"></core:HTML>
</FlexBox>

My Controller:

// Scrolling Text
var sPath = "Model/scrolltextdata.json";
$.ajax({
    url: sPath,
    success: function (result, status, xhr) {
      var oDataText = result.Rowsets.Rowset[0].Row;
      that.byId("idScrollText").setContent('<marquee style="font-size: 3.0rem;color: white;font-weight: bold">' + oDataText[0].InputText +'</marquee>');
                                             }
      });

UI5 - How to get Marquee Text

1 Answers