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 !
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>');
}
});
Related
I have a ObjectPageLayout that is divided two sections, that it looks like:
<Page id="floatingFooterPage" enableScrolling="false" showNavButton="true" navButtonPress="onNavButtonPress">
<content>
<uxap:ObjectPageLayout id="ClassDetail" showHeaderContent="true">
<uxap:headerTitle>
<uxap:ObjectPageHeader></uxap:ObjectPageHeader>
</uxap:headerTitle>
<uxap:headerContent>
<f:SimpleForm editable="false" layout="ResponsiveGridLayout" singleContainerFullSize="false">
<f:content>
<Label text="{i18n>charsClass}"/>
<Text text="{ClassInfo>/classNum} {ClassInfo>/classNumDescr}"/>
<Label text="{i18n>charsClassType}"/>
<Text text="{ClassInfo>/classType} {ClassInfo>/classTypeText}"/>
</f:content>
</f:SimpleForm>
</uxap:headerContent>
<uxap:sections>
<uxap:ObjectPageSection title="{i18n>charsCharsSel}" id="SecChars">
<uxap:subSections>
<uxap:ObjectPageSubSection >
<uxap:blocks>
<mvc:XMLView width="100%" viewName="ch.mindustrie.ZMM_OBJECTS_CLASSES.view.CharacSelection" id="CharacSelection"/>
</uxap:blocks>
</uxap:ObjectPageSubSection>
</uxap:subSections>
</uxap:ObjectPageSection>
<uxap:ObjectPageSection title="{i18n>charsObject}" id="SecObject">
<uxap:subSections>
<uxap:ObjectPageSubSection >
<uxap:blocks>
<mvc:XMLView width="100%" viewName="ch.mindustrie.ZMM_OBJECTS_CLASSES.view.ObjectTable" id="ObjectTable"/>
</uxap:blocks>
</uxap:ObjectPageSubSection>
</uxap:subSections>
</uxap:ObjectPageSection>
<!-- <uxap:ObjectPageSection title="Sub classes" id="SecSub" visible="false">
<uxap:subSections>
<uxap:ObjectPageSubSection >
<uxap:blocks>
<mvc:XMLView width="100%" viewName="ch.mindustrie.ZMM_OBJECTS_CLASSES.view.ClassTree" id="SubTree"/>
</uxap:blocks>
</uxap:ObjectPageSubSection>
</uxap:subSections>
</uxap:ObjectPageSection>-->
</uxap:sections>
</uxap:ObjectPageLayout>
</content>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button id="FindObject" text="{i18n>charsObject}" press="onPress" type="Transparent"/>
</Toolbar>
</footer>
</Page>
I wanted to scroll to section SecChars programmatically and I have done as following:
_scrollToObjectSection: function () {
const oObjPage = this.byId("ClassDetail");
oObjPage.scrollToSection("SecObject", 0, 0);
}
But it does not work at all. What am I doing wrong?
Issues
The API scrollToSection awaits a global ID (the suffix "SecObject" alone is not enough). So it should be:
oObjPage.scrollToSection(this.byId("SecObject").getId());
That API, however, can be only successfully performed when the DOM of the ObjectPageLayout is fully ready. I added "fully" because calling scrollToSection within the onAfterRendering event delegate won't do anything either. There must be an additional timeout of about 450 ms. It's nowhere documented though how many milliseconds are actually required, and there is no public event for this case either.
Alternatives
Use setSelectedSection instead, as mentioned in the documentation topic Object Page Scrolling. The ObjectPageLayout will scroll to that section, but currently without any scrolling animation (iDuration = 0). The "selectedSection" is an association, hence, it can be also set within the view definition:
<uxap:ObjectPageLayout selectedSection="mySection">
<uxap:ObjectPageSection id="mySection">
Keep using scrollToSection but leverage the ⚠️ private event "onAfterRenderingDOMReady"(src) which is fired when the DOM is fully ready:
onInit: function() {
// ...
this.scrollTo(this.byId("mySection"), this.byId("myObjectPageLayout"));
},
scrollTo: function(section, opl) {
const id = section.getId();
const ready = !!opl.getScrollingSectionId(); // DOM of opl is fully ready
const fn = () => opl.scrollToSection(id);
return ready ? fn() : opl.attachEventOnce("onAfterRenderingDOMReady", fn);
},
The API getScrollingSectionId() returns a falsy value (currently "") if the DOM is not fully ready.
Hi I'm trying to get a function defined in my controller to execute when I press on a specific area of a picture. I'm using an html map to define the areas of my picture (code below)
<mvc:View id="Main" controllerName="Demo.picture.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core">
<App id="idAppControl">
<pages>
<Page title="{i18n>title}">
<content>
<Image src = "Some image source" alt="Image" useMap="Map"/>
</content>
</Page>
</pages>
</App>
<html:map name="Map" id="Map">
<html:area id= "area_1" shape="rect" coords= "0,0,240,215" alt="Chart" onclick="???"/>
<html:area id = "area_2" shape="rect" coords="240,0,480,215" alt="Start" onclick="???"/>
</html:map> </mvc:View>
Not sure if using onclick is the right way of doing this.
Controller code:
sap.ui.define([
"sap/ui/core/mvc/Controller"], function (Controller) {
"use strict";
return Controller.extend("Demo.picture.controller.Main", {
SomeMethodFoo: function () {
"method to be executed when area_1 is pressed"
},
SomeMethodGoo: function () {
"method to be executed when area_2 is pressed"
}
});});
Is it possible to attach an eventHandler for a onclick event to these areas? Or is there some other way to do this?
I guess that it would be something like this:
onclick="sap.ui.getCore().byId('__xmlview0').getController().SomeMethodFoo()"
but your need to manage yourself to know your view ID, which won't be always '__xmlview0'
I've created an app with SAPUI5 that makes use of a Flexible Column Layout.
I'm trying to navigate between pages, but I'm having difficulty.
Here is the main xml view:
<mvc:View id="Main" controllerName="SAP.demo.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.f" xmlns:core="sap.ui.core" xmlns:m="sap.m">
<m:App id="idAppControl">
<m:pages>
<m:Page title="{i18n>title}">
<m:content>
<FlexibleColumnLayout id="fcl" initialMidColumnPage="start" layout="TwoColumnsBeginExpanded">
<beginColumnPages>
<m:Page title = "Master">
<m:content>
<Button text="Chart Button" press="displayChart"/>
</m:content>
</m:Page>
</beginColumnPages>
<midColumnPages>
<m:Page id="start" title = "Detail">
<m:content>
<core:Fragment fragmentName="SAP.demo.view.Start" type="XML"/>
</m:content>
</m:Page>
<m:Page id="charts" title="Charts">
<m:content>
<core:Fragment fragmentName="SAP.demo.view.Charts" type="XML"/>
</m:content>
</m:Page>
</midColumnPages>
</FlexibleColumnLayout>
</m:content>
</m:Page>
</m:pages>
</m:App>
I want to navigate from the start page to the charts page. The controller is as follows:
sap.ui.define([
"sap/ui/core/mvc/Controller"], function (Controller) {
"use strict";
return Controller.extend("SAP.demo.controller.Main", {
displayChart:function(oEvent){
this.byId("fcl").toMidColumnPage("charts");
}
});});
Can someone please advise as to what I'm doing wrong, because it stays on the start page even after I press the button.
This is because the real ID of the view is not "charts" but "__xmlview0--charts".
Be careful with the ID always and use the API method byId('theIDHere').
In your case use one of the following options:
displayChart:function(oEvent){
this.getView().byId("fcl").toMidColumnPage(this.getView().byId("charts"));
}
Or
displayChart:function(oEvent){
this.getView().byId("fcl").toMidColumnPage(this.getView().byId("charts").getId());
}
And also add the correct XML namespace to your button
<m:Button text="Chart Button" press="displayChart"/>
Managed to fix it with the following code:
displayChart: function () {
this.byId("fcl").toMidColumnPage(this.createId("charts"));
},
I'm using table and using this property.
<ColumnListItem type="Detail" detailPress="onShowItemEditDialog">
I want the place the icon on the left side.
Because I use responsivePopover.The popover is opening on the right side.
I think I will change the table elements in this popover.
Or is there another way to change the elements of the table?
What can be done for table edit?
Please help.
you can build your own ListItem.
<List headerText="Custom Content" mode="Delete" items="{path: '/ProductCollection'}" >
<CustomListItem>
<HBox>
<core:Icon size="2rem" src="sap-icon://attachment-photo" class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" />
<VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" >
<Link text="{Name}" target="{ProductPicUrl}" press="handlePress"/>
<Label text="{ProductId}"/>
</VBox>
</HBox>
</CustomListItem>
</List>
This example is taken from: https://openui5.hana.ondemand.com/#/sample/sap.m.sample.CustomListItem/code
A little tweak worked for me. Use the below code appropriately.
onAfterRendering: function() {
$( "thead .sapMListTblNavCol" ).insertAfter( "thead .sapMListTblHighlightCol" );
$( "tbody .sapMListTblNavCol" ).insertAfter( "tbody .sapMListTblHighlightCell" );
},
This is my fragment,
The fragment not have a controller
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Dialog
title="Invio report via mail">
<content>
<FlexBox
alignItems="Start"
justifyContent="Center">
<items>
<TextArea id="idMailReport" value="themail.mail.it" rows="1" cols="50" />
</items>
</FlexBox>
</content>
<beginButton>
<Button text="Ok" press="onDialogOkButton" />
</beginButton>
<endButton>
<Button text="Close" press="onDialogCloseButton" />
</endButton>
</Dialog>
</core:FragmentDefinition>
Ho I can set che value of TextArea element?
I try to set it from a controller where I call the fragment:
var dialogFrafment = sap.ui.xmlfragment(
"dialogFragment",
"appIntra.fragment.dialog",
this // associate controller with the fragment
);
this.getView().addDependent(dialogFrafment);
dialogFrafment.open();
this.byId("idMailReport").setValue("initial.mail.com");
Can you help me?
please try
sap.ui.getCore().byId("idMailReport").setValue("initial.mail.com");
it should work.
Here is the official document.
I solve it!
var dialogFrafment = sap.ui.xmlfragment(
"appIntra.fragment.dialog",
this.getView().getController() // associate controller with the fragment
);
my problem is that i had set a name of a fragment: "dialogFragment"
Whitout it all work! ;)
A bit outdated, but might be useful for others. When you reuse your fragment inside a view, giving it unique id like:
var dialogFrafment = sap.ui.xmlfragment(
"dialogFragment", // this is fragment's ID
"appIntra.fragment.dialog",
...
);
retrieving id of your nested control goes like:
this.byId(sap.ui.getCore().Fragment().createId("dialogFragment", "idMailReport"));
That way, your prepend fragment's id to your control's id.