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.
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.
I need to retrieve id of a control (VBox which has id="multipleChoiceQuestion") and need to hide it on button press.
How to do this?
App.view.xml
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core"
displayBlock="true" controllerName="opensap.onlinequestionnaire.controller.App" height="100%">
<VBox id="multipleChoiceHolder">
<HBox width="700px" backgroundDesign="Solid" alignItems="Center" id="mCHorHolder1">
<CheckBox id="checkBox1"/><Label text="{questionnaire>/data/0/answers/0}" id="multipleChoice1"/>
</HBox>
</VBox>
App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller){
Controller.extend("opensap.onlinequestionnaire.controller.App", {
goToNext:function() {
alert("Next Question");
alert(this.byId('multipleChoiceQuestion'));
}
});
});
In my goToNext:function() I would like to retrieve the id of the VBox and would like to hide it.
I tried alerting this.byId() but it returns undefined.
Get the VBox:
// id as stated in the description
oVBox = this.getView().byId("multipleChoiceQuestion");
// or
// id as stated in the view in the code sample
oVBox = this.getView().byId("multipleChoiceHolder");
Set visibility:
oVBox.setVisible(false);
By the way, the id's of your post description and the view in your post's code sample are not identical. But I'm sure you're aware of this minor mix-up which has nothing to do with your question of a general approach to retrieve and hide a control. Just wanted to mention it to be on the safe side
The ID of your VBox is "multipleChoiceHolder" and not "multipleChoiceQuestion". So, shouldn't it be this.byId('multipleChoiceHolder') instead of this.byId('multipleChoiceQuestion')?
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>');
}
});
Suppose I have the following XML view:
<mvc:View xmlns:mvc="sap.ui.core.mvc" ...>
<Page>
<content>
<l:VerticalLayout>
<l:content>
<core:Fragment fragmentName="my.static.Fragment" type="XML" />
</l:content>
</l:VerticalLayout>
</content>
</Page>
</mvc:View>
The fragment my.Fragment is statically loaded. However, I now want to dynamically change the to-be-loaded fragment (ideally using data binding the fragmentName property, but any other means should be ok as well), ie. something like this:
<mvc:View xmlns:core="sap.ui.core.mvc" ...>
<Page>
<content>
<l:VerticalLayout>
<l:content>
<core:Fragment fragmentName="{/myDynamicFragment}" type="XML" />
</l:content>
</l:VerticalLayout>
</content>
</Page>
</mvc:View>
However, the latter does not work, and the Fragment definitions don't allow for data binding... I might have missed something, but how should I dynamically change the Fragment in my XML view based on a parameter/model property/etc?
For now, I have resorted to a custom control instead of directly using a fragment in my view, and have that control do the dispatching to the appropriate Fragment, but I feel there should be an easier, out-of-the-box way...
I think the only solution will be initialization of fragment from onInit method of controller:
sap.ui.controller("my.controller", {
onInit : function(){
var oLayout = this.getView().byId('mainLayout'), //don't forget to set id for a VerticalLayout
oFragment = sap.ui.xmlfragment(this.fragmentName.bind(this));
oLayout.addContent(oFragment);
},
fragmentName : function(){
return "my.fragment";
}
});
The fragment name can also result from a binding, including an expression binding which evaluates to a constant. As formatter functions return strings, and not booleans, === 'true' has been added in the following example:
Example: Dynamic Fragment Name
<core:Fragment fragmentName="{= ${path: 'facet>Target', formatter: 'sap.ui.model.odata.AnnotationHelper.isMultiple'} === 'true'
? 'sap.ui.core.sample.ViewTemplate.scenario.TableFacet'
: 'sap.ui.core.sample.ViewTemplate.scenario.FormFacet' }" type="XML"/>
I am creating a SAP Fiori application. I have input in a dialog box in that I have to fetch the input value. I am defining the dialog in fragment view.
When I try to give the id for input I am getting an error as adding element with duplicate id.
------ Fragment View------
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
<Dialog title="Title" class="sapUiPopupWithPadding" >
<content>
<HBox>
<items>
<Text text="Name"></Text>
<Input value="" id="myId" > </Input>
</items>
</HBox>
</content>
<beginButton>
<Button text="Ok" press="DialogButton" />
</beginButton>
</Dialog>
---Controller Code---
DialogButton:function(oEvent) {
var myIdValue=sap.ui.getCore().byId("myId").getValue();
console.log("ID Value :::"+ myIdValue);
oDialogFragment.close();
}
You create a new dialog fragment instance every time you need to open the dialog .
This will cause the duplicated ID issue. Please keep a dialog fragment instance in your controller.
Please see the sample code:
DialogButton:function(oEvent) {
if(!this.oDialog) {
this.oDialog = sap.ui.xmlfragment("you.dialog.id", this );
}
this.oDialog.open();
}
take a look at the following help
IDs in Declarative XML or HTML Fragments you need to add an ID when the fragment is instantiated, that way the control has a prefix which is unique
It is also a good idea to add your fragment as dependant to your main view. This way it will be destroyed when the main view is destroyed. And you will not get duplicate id error when navigating away from your view and back.
DialogButton:function(oEvent) {
if(!this.oDialog) {
this.oDialog = sap.ui.xmlfragment("you.dialog.id", this );
this.getView().addDependent(this.oDialog);
}
this.oDialog.open();
}