How to have multiple dialogs in a single fragment - sapui5

I have been working on dialog in fragment , for a sample :
test.fragment.xml :
<core:FragmentDefinition
xmlns="sap.m"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<Dialog title="P Selection" id='TestDialog1'>
<content>
<f:SimpleForm id="SimpleFormDisplay354"
minWidth="1024"
maxContainerCols="2"
editable="false"
layout="ResponsiveGridLayout"
title=""
labelSpanL="3"
labelSpanM="3"
emptySpanL="4"
emptySpanM="4"
columnsL="1"
columnsM="1">
<f:content>
<Label text="DC" />
<Select id='Test1DCId'
forceSelection="false"
items="{
path: '/P/DC',
sorter: { path: 'Name' }
}">
<core:Item key="{key}" text="{value}" />
</Select>
<Label text="Quantity" />
<Select id='Test1Quantity'
forceSelection="false"
items="{
path: '/P/Quantity',
sorter: { path: 'Name' }
}">
<core:Item key="{key}" text="{value}" />
</Select>
</f:content>
</f:SimpleForm>
</content>
<buttons>
<Button text="OK" press="onTest1OkButtonPress" />
</buttons>
<buttons>
<Button text="Cancel" press="onTest1CancelButtonPress" />
</buttons>
</Dialog>
</core:FragmentDefinition>
In test.view.xml:
The view part when I want to open a dialog is as:
<m:Select id="Gu" items="{/Gu/GList}" change="onTestPress">
<c:Item key="{key}" text="{value}" />
<m:layoutData>
<l:GridData span="L2 M2 S2"/>
</m:layoutData>
</m:Select>
In test.Controller.js:
onTestPress: function () {
this.ADD = 'Yes';
if (!this.byId("TestDialog1")) {
this._oDialog = sap.ui.xmlfragment("test", this);
this.getView().addDependent(this._oDialog);
}
this._oDialog.open();
},
here in similar way may I how can I use multiple dialogs in the same fragment ? Is this possible ?
I have tried as giving another dialog with different ID TestDialog2 ,
And in view some test button and on press , i need to open a Dialog and i tried as:
onTestButtonPress: function () {
this.ADD = 'Yes';
if (!this.byId("TestDialog2")) {
this._oDialog1 = sap.ui.xmlfragment("test1", this);
this.getView().addDependent(this._oDialog1);
}
this._oDialog1.open();
},
But this doesn't work as expected also Throws error Error: Error: adding element with duplicate id.....
I have searched Doc's and many examples but i have been stuck finding an example which shows this use case......
Any help or a sample or a guiding link is much appreciated , TIA

Related

How to customize the "sap.ui.comp.filterbar.FilterBar" control?

I developed a SAPUI5 page with a list of items and a search feature using the control sap.ui.comp.filterbar.FilterBar. The framework defines automatically a text for the button which triggers the search and also for a placeholder that appears as default in the search field.
I would like to customize this in order to have better control of its content and a better multi language management with i18n settings. How can I do this customization? I looked at the documentation but it does not mention a property which I can easily make this change.
Follows a piece of code that implements this part of the View
<!-- ... -->
<fb:FilterBar xmlns:fb="sap.ui.comp.filterbar" xmlns="sap.m" xmlns:core="sap.ui.core"
id="filterBar"
search=".onSearch"
showRestoreButton="false"
showClearButton="true"
showFilterConfiguration="false"
>
<fb:filterGroupItems>
<fb:FilterGroupItem
groupName="__$INTERNAL$"
name="A"
label="{i18n>workstreamsOptions}"
partOfCurrentVariant="true"
visibleInFilterBar="true"
>
<fb:control>
<ComboBox id="WorkStreamCombobox" change=".onChange">
<core:Item key="001" text="{i18n>ws1}" />
<core:Item key="002" text="{i18n>ws2}" />
<core:Item key="003" text="{i18n>ws3}" />
<core:Item key="004" text="{i18n>ws4}" />
<core:Item key="005" text="{i18n>ws5}" />
<core:Item key="006" text="{i18n>ws6}" />
<core:Item key="007" text="{i18n>ws7}" />
<core:Item key="008" text="{i18n>ws8}" />
<core:Item key="009" text="{i18n>ws9}" />
</ComboBox>
</fb:control>
</fb:FilterGroupItem>
<fb:FilterGroupItem
groupName="__$INTERNAL$"
name="B"
label="{i18n>typeOfInterface}"
labelTooltip="Tooltip Example"
partOfCurrentVariant="true"
visibleInFilterBar="true"
>
<fb:control>
<ComboBox id="TypeCombobox" change=".onChange">
<core:Item key="001" text="{i18n>typeInbound}" />
<core:Item key="002" text="{i18n>typeOutbound}" />
<core:Item key="003" text="{i18n>typeNotClassified}" />
</ComboBox>
</fb:control>
</fb:FilterGroupItem>
</fb:filterGroupItems>
</fb:FilterBar>
<!-- ... -->
If I understood it correctly you are looking to overwrite and customize the placeholder for the default search ..
It can be controlled by the following code.
onToggleSearchField: function (oEvent) {
var oSearchField = this.oFilterBar.getBasicSearch();
var oBasicSearch;
if (!oSearchField) {
oBasicSearch = new SearchField({
showSearchButton: false,
placeholder:"Custom Placeholder"
});
} else {
oSearchField = null;
}
this.oFilterBar.setBasicSearch(oBasicSearch);
oBasicSearch.attachBrowserEvent("keyup", function (e) {
if (e.which === 13) {
this.onSearch();
}
}.bind(this)
);
},
and Initialize the onToggleSearchField() in your onInit() function.
Customizing the same via i18n... Set your text in your i18n and control the placeholder accordingly using the following logic.
this.getView().getModel('i18n').getResourceBundle().getText(
'Your PlaceHolder Name from i18n')
Thanks,
Abhi

Error "Cannot add direct child without default aggregation defined for control ..."

I am getting the error "Cannot add direct child without default aggregation defined for control sap.m.Label". Not sure what this means. Here is my fragment:
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:f="sap.f">
<ResponsivePopover id="popover" title="{Name}" class="sapUiPopupWithPadding" placement="Bottom">
<beginButton>
<Button id="submit" text="{i18n>submit}" press="onSubmit" class="sapUiTinyMargin"/>
</beginButton>
<content>
<f:GridContainer>
<f:layout>
<f:GridContainerSettings rowSize="5rem" columnSize="8rem" gap="1rem"/>
</f:layout>
<f:layoutS>
<f:GridContainerSettings rowSize="5rem" columnSize="10rem" gap="0.5rem"/>
</f:layoutS>
<f:layoutXS>
<f:GridContainerSettings rowSize="5rem" columnSize="10rem" gap="0.5rem"/>
</f:layoutXS>
<Label text="{i18n>req}" required="true">
<f:layoutData>
<f:GridContainerItemLayoutData columns="3"/>
</f:layoutData>
</Label>
<Label id="txt" text="{i18n>cat}" required="true">
<f:layoutData>
<f:GridContainerItemLayoutData columns="3"/>
</f:layoutData>
</Label>
<RadioButton id="rbtn1" text="{i18n>grq}">
<f:layoutData>
<f:GridContainerItemLayoutData columns="4"/>
</f:layoutData>
</RadioButton>
<RadioButton id="rbtn2" text="{i18n>frq}">
<f:layoutData>
<f:GridContainerItemLayoutData columns="4"/>
</f:layoutData>
</RadioButton>
<TextArea id="txtarea" value="" placeholder="{i18n>typeq}" growing="true" growingMaxLines="10" width="100%">
<f:layoutData>
<f:GridContainerItemLayoutData columns="7"/>
</f:layoutData>
</TextArea>
<Text text="{i18n>note}">
<f:layoutData>
<f:GridContainerItemLayoutData columns="7"/>
</f:layoutData>
</Text>
</f:GridContainer>
</content>
</ResponsivePopover>
</core:FragmentDefinition>
Expected result is the fragment will load with out errors.
The named aggregation must have the same namespace as the parent tag.
The namespace of the parent control tag and the aggregation tag must be the same. (Source)
In your case, the issue is in <SomeSapMControl><f:layoutData>. Remove the f: in <f:layoutData> so that it matches with the parent's (default) namespace.
sap.ui.require([
"sap/ui/core/Core"
], Core => Core.attachInit(() => sap.ui.require([
"sap/ui/core/Fragment"
], Fragment => Fragment.load({
definition: `<f:GridContainer xmlns:f="sap.f" xmlns="sap.m">
<Label text="Label within GridContainer">
<layoutData>
<f:GridContainerItemLayoutData columns="3"/>
</layoutData>
</Label>
</f:GridContainer>`
}).then(control => control.placeAt("content")))));
<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m,sap.f,sap.ui.layout"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody"></body>
"Cannot add direct child without default aggregation defined for control sap.m.Label". Not sure what this means.
Within control definition, control developers can assign a default aggregation so that application developers can add children without having to put an aggregation name explicitly in the XML view definition. An example of this is sap.f.GridContainer. Its default aggregation is items.src Hence, you won't need to add <f:items> to add children there (See my code snippet above).
If, however, the control has no default aggregation and the child node name matches with none of the named aggregations, the XML processor will throw the above error.
The sap.m.Label and the other controls cannot be used inside sap.f.Gridcontainer directly. You'll need to place them inside <f:items> first.
From the documentation: https://sapui5.netweaver.ondemand.com/sdk#/api/sap.f.GridContainer%23overview
<f:GridContainer>
<f:layout>
<f:GridContainerSettings rowSize="5rem" columnSize="5rem" gap="1rem" />
</f:layout>
<f:layoutS>
<f:GridContainerSettings rowSize="4rem" columnSize="4rem" gap="0.5rem" />
</f:layoutS>
<f:items>
<GenericTile header="Sales Fulfillment">
<layoutData>
<f:GridContainerItemLayoutData rows="2" columns="2" />
</layoutData>
</GenericTile>
<w:Card manifest="url-to-manifest">
<w:layoutData>
<f:GridContainerItemLayoutData rows="6" columns="3" />
</w:layoutData>
</w:Card>
<Panel>
<layoutData>
<f:GridContainerItemLayoutData columns="4" />
</layoutData>
<Text text="Sales information" />
</Panel>
</f:items>
</f:GridContainer>

CanĀ“t to bind or show data from ModelData.read to form in SapUi5

i have a big trouble that's freaking me out, check it out:
This is my xml for a View, program is divided in two differents Views, first of them, a table with navigation and second one is the details, involved in a form.
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="Hello_World.Hello_World.controller.View2"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:form="sap.ui.layout.form">
<App>
<pages>
<Page title="Detalles" showHeader="true">
<Button type="Back" press="patras" tooltip="test"/>
<VBox>
</VBox>
<form:SimpleForm id="formPruebas" maxContainerCols="2" layout="ResponsiveGridLayout" labelSpanL="5" labelSpanM="4" labelSpanS="6" title="Formulario">
<Label text="CustomerID"/>
<Text text="{jsonmodel>CustomerID}"/>
<Label text="CompanyName"/>
<Text text="{CompanyName}"/>
<Label text="ContactTitle" />
<Text text="{ContactTitle}"/>
<Label text="Adress"/>
<Text text="{Adress}"/>
<Label text="City"/>
<Text text="{City}"/>
<Label text="PostalCode"/>
<Text text="{PostalCode}"/>
<Label text="Country" />
<Text text="{i18n>Country}"/>
<Button text="Aceptar" type="Accept">
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</Button>
<Button text="Editar" width="100px">
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</Button>
</form:SimpleForm>
</Page>
</pages>
</App>
Alright so this is my controller:
onInit: function() {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("View2").attachMatched(this._onRouteMatched, this);
},
_onRouteMatched: function(oEvent) {
var idDevuelto = oEvent.getParameter("arguments").data;
var idCompleto = "/Customers('" + idDevuelto + "')";
//var oForm = this.getView().byId("formPruebas");
var oForm = this.getView().byId("formPruebas");
var serviceUrl = "myurl";
var oModelData = new sap.ui.model.odata.ODataModel(serviceUrl,{
JSON:true,
useBatch: false
});
oModelData.read(idCompleto, {
success: function (oData) {
sap.m.MessageToast.show(oData.CustomerID);
var oModel = new JSONModel(oData.results);
oForm.setModel(oModel.results);
},
error: function (oError) {
sap.m.MessageToast.show("No funca");
}
});
},
However the result is not showing on my view when i run the program, any idea?
PD: I'm pretty noob on sapui5
Finally i found the solution of the problem, if you check the XML code at the beginning of the question , you realize there is not path in Form element.
In mi first view i have a table with id and a PATH which i don't have in the Form so the fastest way i solve it is to put in the XML a slash, an example:
<form:SimpleForm id="formPruebas" maxContainerCols="2" layout="ResponsiveGridLayout" labelSpanL="5" labelSpanM="4" labelSpanS="6" title="Formulario">
<Label text="CustomerID"/>
<Text text="{/CustomerID}"/> // the slash i mean
With that fix, i only do oForm.setModel(oModel) so everything is connected and works
fine, i want to share this information if more people deal with the same error as i did.
Thanks all ideas.

creation of login page along with authentication sapui5 by storing data in json and comparing json values with user input values

View1.view.xml
<mvc:View xmlns:f="sap.ui.layout.form" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="Login.controller.View1">
<App>
<pages>
<Page title="Login">
<f:SimpleForm maxContainerCols="2" editable="true" layout="ResponsiveGridLayout" labelSpanL="4" labelSpanM="4" emptySpanL="0" emptySpanM="0" columnsL="2" columnsM="2">
<f:content>
<Input width="100%" id="__input0" placeholder="UserID" liveChange="true" />
<Input width="100%" id="__input1" type="Password" placeholder="Password" />
<Button text="Login" width="100px" id="__button0" type="Accept" press="Validation" />
</f:content>
</f:SimpleForm>
<Table items="{ path: '/Item' }" id="tableID" width="90%">
<items>
<ColumnListItem counter="0" id="__item0">
<cells>
<Text id="a1" text="{OrderID}" />
<Text text="{Quantity}" />
</cells>
</ColumnListItem>
</items>
<columns>
<Column id="__column0">
<header>
<Label text="OrderID" id="__label0" />
</header>
</Column>
<Column id="__column1">
<header>
<Label text="Quantity" id="__label1" />
</header>
</Column>
</columns>
</Table>
<content/>
</Page>
</pages>
</App>
</mvc:View>
view1.controller.js
sap.ui.define(["sap/m/MessageToast",
"sap/ui/core/mvc/Controller", 'sap/ui/model/json/JSONModel'
], function(MessageToast, Controller, JSONModel) {
"use strict";
return Controller.extend("Login.controller.View1", {
onInit: function(oEvent) {
// set explored app's demo model on this sample
var oModel = new JSONModel(jQuery.sap.getModulePath("Login", "/model/Products.json"));
sap.ui.getCore().setModel(oModel);
this.getView().byId("tableID").setModel(oModel);
// this.getView().byId("samplepie").setModel(oModel);
},
Validation: function() {
var UserID = this.getView().byId("__input0").getValue();
var Password = this.getView().byId("__input1").getValue();
if (UserID == "") {
MessageToast.show("Please Enter UserID");
return false;
} else if (Password == "") {
MessageToast.show("Please Enter Password");
return false;
} else if (UserID == sap.ui.getCore().byId("a1").getValue()) {
MessageToast.show("authenticated ");
}
}
});
});
products.json
{
"Item": [{
"OrderID": "1100M",
"Quantity": 100
}, {
"OrderID": "11001I",
"Quantity": 250
},
{
"OrderID": "11002D",
"Quantity": 400
}
]
}
I have tried this code for login along with authentication but am getting error as getValue not defined when i used to fetch JSON values from view to controller,can anyone please give a solution?

SAPUI5 NavContainer inside sap.m.Dialog Fragement

Is there a possibilty of using a NavContainer inside a sap.m.Dialog fragment. In PopOver it is possible to have it done but when trying with Dialog nothing is rendered inside the dialog .
Here is the code :
<core:FragmentDefinition xmlns:core="sap.ui.core"
xmlns:layout="sap.ui.layout" xmlns="sap.m">
<Dialog title="Customer Search" type="Message">
<NavContainer id="navCon">
<Page id="master" title="Search ">
<Label text="Customer Name"></Label>
<Input></Input>
<Label text="Payer Code"></Label>
<Input></Input>
<Label text="Customer City"></Label>
<Input></Input>
<Label text="Customer Postal Code"></Label>
<Input></Input>
<Label text="SBU" />
<layout:ResponsiveFlowLayout>
<RadioButton groupName="supplierCaused" text="Yes" />
<RadioButton groupName="supplierCaused" text="No" />
<RadioButton groupName="supplierCaused" text="No" />
</layout:ResponsiveFlowLayout>
<Label text="CBT"></Label>
<Select id="searchCBT" width="100%"></Select>
<Label text="Region" />
<layout:ResponsiveFlowLayout>
<RadioButton groupName="hisTransaction" text="Yes" />
<RadioButton groupName="hisTransaction" text="No" />
<RadioButton groupName="hisTransaction" text="No" />
</layout:ResponsiveFlowLayout>
</Page>
<!--
<Page id="detail" showNavButton="true" navButtonPress="onNavBack"
title="Product">
<Label text="Search Results" />
</Page> -->
</NavContainer>
<beginButton>
<Button text="Random" press="onDialogClose" />
</beginButton>
</Dialog>
</core:FragmentDefinition>
It will be a lot easier for me to answer you via pure javascript. Because in any way you need to attach a open handler to this dialog right? And separating the code will make this rather simple example really complicated one. So would something like that, putted in simple script tags work ?
var btn = new sap.m.Button({text:'Open Dialog', press: function(){oDialog.open();}});
var oDialog = new sap.m.Dialog({
showHeader : false,
stretch: sap.ui.Device.system.phone ? true : false,
beginButton : new sap.m.Button({
text : 'OK',
press : function() {
oDialog.close();
}
}),
contentHeight : "500px"
});
var oNavContainer = new sap.m.NavContainer();
var oPage = new sap.m.Page({
enableScrolling : true,
title : 'Test Page',
subHeader : new sap.m.Bar({
contentMiddle : new sap.m.Button({text:'SubHeader Button'})
}),
content : [ new sap.m.Button({text:'Content Button'}) ]
});
oNavContainer.addPage(oPage);
oNavContainer.setInitialPage(oPage);
oDialog.addContent(oNavContainer);
btn.placeAt('content');
</script>
You just need to have an div item with id = "content" and it should work :)