How can I set text value dynamically in SAPUI5? - sapui5

I want to set a text value by taking a value from another page or another input area. Here is my text field. I tried many combinations for this.byId("thisOne")., but they didn't work.
this.byId("thisOne").setValue("Some thing");
another way:
sap.ui.getCore().byId("thisOne")....
The text element:
<Text text="" id ="thisOne"/>
My XML file:
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="App.view.Take"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form">
<Page showHeader="false">
<Label text="thisOne" />
<Input text="" id="thisOne" />
<Button type="Accept" text="Accept" ></Button>
<Button type="Reject" text="Reject" ></Button>
</Page>
</mvc:View>

If you specify an ID explicitly for a control, within an XML view, the actual ID will be prepended with the ID of the XML view, for example the Input control might have an actual ID of "__xmlview0--thisOne".
Best practice is to use the XML View's byId function to get the ID of a control contained within it. So for example in your controller attached to the view (App.view.Take.controller.js in your case) you could do this:
this.getView().byId("thisOne").setValue("Some thing");

Note that setValue will NOT work.
setValue is not the supported method for sap.m.Text Control. setValue is supported for sap.m.Input (or any other control which inherit properties from sap.m.Inputbase )
var oValue = sap.ui.getCore().byId("inputId").getValue();
Then
sap.ui.getCore().byId("thisOne").setText(oValue);
Refer to sap.m.Text and sap.m.Input for more details.

If you want to get your textfield and then add a value to it. You have to do this:
sap.ui.getCore().byId("thisOne").setValue("Some thing");

Related

sap.m.ObjectListItem: Need to keep whitespace (tabs) in title

<ObjectListItem
title="{i18n>uBOMItem}: {Item} Component: {ComponentDesc}"
number="{ComponentNo}"
>
I am using sap.m.ObjectListItem. While binding, I need tab space between {Item} & {ComponentDesc}.
E.g. like \t
Currently, sap.m.ObjectListItem does not support rendering whitespace for title.
And I agree with alexP's answer that it's not clean to combine multiple labels ("{i18n>uBOMItem}:" and "Component:") into one.
That being said; if it's really necessary to do so, however, you'll need to extend ObjectListItem.
Example: https://embed.plnkr.co/WaMaP4wqMevsjMxX
Internally, ObjectListItem renders its title from sap.m.Text. The Text control has a public property called renderWhiteSpaceapi which we can use to allow tabs to be rendered.
ObjectListItem is only for one value. In your case it's better to use CustomListItem.
<CustomListItem>
<HBox width="100%">
<VBox>
<Label emphasized="true" text="{i18n>uBOMItem}: {Item}" />
</VBox>
<VBox class="sapUiSmallMarginBegin">
<Label emphasized="true" text="Component: {ComponentDesc}" />
</VBox>
<VBox width="50%" justifyContent="End">
<ObjectNumber number="{ComponentNo}" />
</VBox>
</HBox>
</CustomListItem>
It's not clean to output two data bindings from your model in one label, text or similar. You should split the output. In case of an i18n label and a data binding in one control i would make a exception.

SAPUI5 Strange data binding behaviour

It's pretty silly problem but I have no idea why is it happening. I heve this in my controller:
this.getView().setModel(this.placesModel, "myCity");
then I set the data with Ajax request to my express RESTFull app and in View.xml
<List items="{path: 'myCity>/people'}">
<CustomListItem>
<VBox>
<Title text="Person:"/>
<Label text="{myCity>/people/name}"/>
<Label text="{myCity>/people/age}"/>
</VBox>
</CustomListItem>
</List>
I have object myCity with few properties. One of them is object people which is array of objects. When I try to list them like that I can see that all my people get listed but without corresponding name and age. Also I find it hard to understend when to use > when / when when >/.
Basic binding syntax with model name is {(model_name)>(path_to_property)}, if you don't have a model name (default model) you need to specify only {path_to_property}.
The initial slash (/) is needed if you don't have a contextbinding. In your case you have contextbinding set on List, so you don't need to use the slash.
Updated code:
<List items="{path: 'myCity>/people'}">
<CustomListItem>
<VBox>
<Title text="Person:"/>
<Label text="{myCity>name}"/>
<Label text="{myCity>age}"/>
</VBox>
</CustomListItem>
</List>
For more information refer to Binding Path.

How to make only one cell editable in smart table sapui5

I am using a sapui5 smart table to list down my products. It includes product code, product description and order quantity.
Among these three fields i want to update only the order quantity. It should be an inline editing in the table.
In my smart table i have enabled the property "editable" as "true". It makes the entire row is editable. Instead of making entire row editable, i want make only one cell to be editable.
Example
<smartFilterBar:SmartFilterBar id="smartFilterBar" entityType="ZDEMO_C_MyEntityType" persistencyKey="SmartFilter_Explored">
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable id="mySmartTable"
smartFilterId="smartFilterBar"
tableType="GridTable"
editable="true"
entitySet="ZDEMO_C_MyEntity"
useVariantManagement="false"
useTablePersonalisation="true"
header="My Products"
showRowCount="true"
useExportToExcel="true"
enableAutoBinding="true">
</smartTable:SmartTable>
I can see 2 ways:
Make use of "field controls" concept. It requires adding a special properties within your entity type, which define the state of the fields (cells). Also some annotations have to be introduced (in the metadata.xml by backend) to initiate the handling.
Here is a link where concept described using Form control as an example, but the same rules are applicable for Table as well:
https://blogs.sap.com/2017/06/06/dynamic-field-control-using-annotations-in-sapui5/
Redefine the table rows manually in your XML and bind the needed cell(s) against the property of the local JSON model, which could be changed depending on some conditions (e.g. Edit button press).
The 1st approach is better from the architectural perspective but requires some data model modifications (from the backend side).
The 2nd approach allows to do everything on UI and program some complex UI logic, which defines the cells state.
You choose.
You can add a sap ui table inside the smart table and add columns with customdata property. Follow these steps.
Make editable="true" as editable="false"
In your xml, make sure to add this namespace xmlns:core="sap.ui.core"
Within the smarttable tag add below.
<smartTable:SmartTable .................................
<Table>
<columns>
<Column>
<customData>
<core:CustomData key="p13nData" value='\{"columnKey": "OrderQty", "leadingProperty": "OrderQty", "columnIndex":"2"}'/>
</customData>
<Text text="Order Qty"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Input value="{OrderQty}" type="Number" editable="true"/>
</cells>
</ColumnListItem>
</items>
</Table>
</smartTable:SmartTable>
Add below tag inside table to make your column editable
<table:Column sortProperty="Max_Capacity" filterProperty="Max_Capacity" id="maxCapCol">
<Label text="Max Capacity"/>
<table:template>
<Input text="{Max_Capacity}" />
</table:template>
</table:Column>

Text field in matrix layout

I want to place a text field in a matrix layout. Please check below code and please suggest how to check XML code errors? Every time I stuck in designing the XML code. Please suggest me how to overcome that.
<core:View
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:l="sap.ui.commons.layout"
controllerName="matrix.matrix"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="ytftfhgff">
<content>
<l:MatrixLayout layoutFixed="true" columns="4" width="600px" widths="150px,150px,150px,150px">
<l:MatrixLayoutRow>
<l:MatrixLayoutCell colSpan="4">
<Text text="Its a heading" />
</l:MatrixLayoutCell>
</l:MatrixLayoutRow>
<l:MatrixLayoutRow>
<l:MatrixLayoutCell>
<Label text="First Name"/>
</l:MatrixLayoutCell>
<l:MatrixLayoutCell>
<TextField id="axscx" width="20em"></TextField>
</l:MatrixLayoutCell>
</l:MatrixLayoutRow>
</l:MatrixLayout>
</content>
</Page>
</core:View>
Thanks in advance,
sriman.
In general the errors logged by the XMLTemplateParser to the console should be understandable enough to get a basic idea of what's going wrong. In your case it is quite simple. The default namespace is set to "sap.m", i.e. the runtime tries to load the TextField control from that library. This cannot work as sap.m does not have a TextField control.
You can either use the Input control, i.e. replace TextField with Input. Or introduce an additional namespace:
xmlns:commons="sap.ui.commons"
and define the TextField in the following way:
<commons:TextField id="axscx" width="20em"/>
I would prefer using the Input field.

What is the <l:content> tag meaning?

What is the meaning of the <l:content> tag in SAPUI5? I know it is about content, but the references to this tag in the documentation are not making sense to me. Can someone give me use cases for this tag? It is used only on the <l:Grid> control?
Thanks in advance!
The Grid is the sap.ui.layout.Grid .
As you can see that Grid has an aggregation called content. The Tag <l:content> is placed there to show the interpreter, which aggregation you fill.
That is not the problem in the sap.ui.layout.Grid, since it has only one aggregation, but ...
... imagine you want to use a sap.ui.layout.form.SimpleForm.
The SimpleForm has the aggregations titleand content. So to define a title you have to write the tag <title> (with the correct prefix, in this case it would be eg. <f:title> with xmlns:f="sap.ui.layout.forms")
<mvc:View xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc">
<f:SimpleForm>
<f:title>some random title</f:title>
<f:content>
<!-- any sap.ui.core.Control you like -->
</f:content>
</f:SimpleForm>
</mvc:View>
And another thing: The aggregation, that is marked with "(default aggregation)" (in the case with the Grid it is content) you do not have to add the tag.
<mvc:View xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc">
<f:SimpleForm>
<f:title>some random title</f:title>
<!-- any sap.ui.core.Control you like, is is recognized as content -->
</f:SimpleForm>
</mvc:View>