enter image description here
<openui5.googlemaps:Waypoint id = "waypoint" location="{location}"/>
<!--<openui5.googlemaps:Waypoint location="Talod"/>-->
</openui5.googlemaps:waypoints>
</openui5.googlemaps:Directions>
</openui5.googlemaps:directions>
</openui5.googlemaps:Map>
<Input id="start" value="{start}" width="180px" placeholder="Start Address">
<layoutData>
<FlexItemData growFactor="2"/>
</layoutData>
</Input>
<Input id="end" value="{end}" width="180px" placeholder="End Address">
<layoutData>
<FlexItemData growFactor="2"/>
</layoutData>
</Input>
<Button text="Find distance" type="Emphasized" width="170px" press="go"></Button>
</content>
</Page>
</pages>
</App>
Above code is of the view.I am adding code of controller but could not able to add it.I am having desired result for one start and end address but I could not able to have multiple lines for start and end address on same map.I need multiple lines with pin points as shown in image.
Related
I am making a form and one part of it is to put the telephone number. I want to divide this input in two, on the one hand a selector with the prefixes of all the countries (I get the information from a json) and on the other hand a normal input with a restriction of numbers. The problem is that as there are many prefixes I would like to see if there is a way to filter the numbers with a select because with a comboBox I can filter the problem is that it gets out of the form and the sizes are not good, however with the select everything goes correctly. I have tried these three ways but, the first one I don't think is the best, then the second one I can't look for the result and the third one it overshoots the width of the cell. Any ideas for the select?
<VBox>
<Label class="label" text="{i18n>Phone}" required="true"/>
<HBox>
<SearchField id="prefix" placeholder="Prefijo" enableSuggestions="true" search=".onSearch" suggest=".onSuggest" suggestionItems="{ path: 'country>/Dato' }">
<SuggestionItem text="{country>prefix}" key="{country>code}"/>
</SearchField>
<!--<Select id="prefix" items="{ path: 'country>/Dato' }">
<core:ListItem key="{country>code}" text="{country>prefix}"/>
</Select>-->
<!--<ComboBox id="prefix" class="input" width="30%" required="true" items="{ path: 'country>/Dato' }">
<core:ListItem key="{country>code}" text="{country>prefix}"/>
</ComboBox>-->
<Input id="phone" placeholder="{i18n>Phone}" value="" class="input phone" type="Tel" required="true" maxLength="10" liveChange="handleLiveChange"></Input>
</HBox>
<layoutData>
<l:GridData span="L6 M6 S12"/>
</layoutData>
</VBox>
You could use sap.ui.layout.form.SimpleForm to encapsulate your UI elements.
Then add 2 elements such as sap.m.Select and sap.m.MaskInput inside your form.
Here an example : https://jsbin.com/xotokavamo/2
Feel free to edit it to fit your use case.
<script>
var oForm = new sap.ui.layout.form.SimpleForm({
layout: "ResponsiveGridLayout",
editable: true
});
var oLabel = new sap.m.Label({text: "Phone"});
var oInput = new sap.m.Input({placeholder: "Enter phone number"});
var oMaskInput = new sap.m.MaskInput({placeholderSymbol: "_", placeholder: "Enter a 10 digit number"})
var oSelect = new sap.m.Select({items: [
new sap.ui.core.Item({text:"+33"}),
new sap.ui.core.Item({text:"+81"}),
]});
var oHBox = new sap.m.HBox({
items: [oSelect, oMaskInput]
})
oForm.addContent(oLabel);
oForm.addContent(oHBox);
oForm.placeAt("content");
</script>
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>
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.
i have a problem with adding an fragment to an SimpleForm in SAPUI5. I have an SimpleForm and want to add content in the form with fragments. The result should look like this:
what i want done
my fragment:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:tnt="sap.tnt"
xmlns:custom="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
<core:Title text="{i18n>beauskunftung.suche.address}"/>
<Label text="{i18n>beauskunftung.suche.streetNo}"/>
<Input editable="false" fieldGroupIds="Address" value="{AddressStreet}" id="inputStreetID"></Input>
<Input editable="false" fieldGroupIds="Address" value="{AddressStreetNumber}" id="inputNumberID">
<layoutData>
<l:GridData span="L3 M3 S4"/>
</layoutData>
</Input>
<Label text="{i18n>beauskunftung.suche.zipCity}"/>
<Input editable="false" fieldGroupIds="Address" value="{AddressZipCode}" id="inputZipID">
<layoutData>
<l:GridData span="L3 M3 S4"/>
</layoutData>
</Input>
<Input editable="false" fieldGroupIds="Address" value="{AddressCity}" id="inputCityID"/>
</core:FragmentDefinition>
if i add the fragment with javacript
var oFragment = sap.ui.xmlfragment("testistest", "com.natuvion.ddi.fragments.select.address");
var oLayout = this.getView().byId("AddressIDandSoOn");
oLayout.insertContent(oFragment, -1);
i get the following error:
Uncaught (in promise) Error: "Element sap.ui.core.Title#__title0,Element sap.m.Label#__label0,Element sap.m.Input#testistest--inputStreetID,Element sap.m.Input#testistest--inputNumberID,Element sap.m.Label#__label1,Element sap.m.Input#testistest--inputZipID,Element sap.m.Input#testistest--inputCityID" is not valid for aggregation "content" of Element sap.ui.layout.form.SimpleForm#__xmlview1--AddressIDandSoOn
I think the problem is that the add method can just add one element (if I have just a label in the fragment it works!). I looked for some element which should contains all the elements from the fragment but I didn't find one. If I add the fragment via XML on the page
<core:Fragment id="addressFragment1"
fragmentName="com.natuvion.ddi.fragments.select.address" type="XML">
</core:Fragment>
it works. At this point I have no idea how to add fragments inside an SimpleForm. I need the dynamic generation of the elements, as I have to add this depending on the given data, possibly also several times
My Question:
- How can i add an Fragment to an SimpleForm?
The programatic APIs add/insert content support only single element and not an array. So you could try looping over the array and add one by one:
var aFragment = sap.ui.xmlfragment("testistest", "com.natuvion.ddi.fragments.select.address");
var oLayout = this.getView().byId("AddressIDandSoOn");
aFragment.forEach(function (oElement) {oLayout.addContent(oElement);});
Another option you can consider is moving to sap.ui.layout.form.Form. It has composed aggregations inside: Form -> formContainers -> formElements -> label,fields[].
It looks like the address fragment could be a single FormContainer and then you could add it to the Form in a single call to addFormContainer().
I am trying to get the value of a textbox on a zul page by using some kind of getValue method. I should handle this on the zul page, not on a controller. I need to assign a listbox cell (which is the first cell of the list box below) with a value coming from the textbox.
<listcell>
<label value="" />
</listcell>
<listcell>
<toolbarbutton visible="true"
image="/resources/images/icons/1616/page_text.gif" />
</listcell>
<listcell>
<label value="#{file.name}" />
</listcell>
<listcell>
<toolbarbutton forward="onClick=onRemoveMultipleFiles"
visible="true" id="newFileAndCommentRemove" image="/resources/images/icons/1616/delete.png" />
</listcell>
</listitem>
If what you want is that after the textbox is filled then the first cell will fill with its value you can do it like this:
put an id into the label in the cell
put an onChange operation in the textbox so when the textbox change you can put its value into the cell
like this:
<textbox id="textbox" onChange="label.setValue(self.getValue())"/>
<listbox id="newFileAndComment">
<listhead>
<listheader label="1" width="30px" />
</listhead>
<listitem self="#{each=file}">
<listcell>
<label id="label"/>
</listcell>
</listitem>