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.
Related
I am attempting to display a wrapped long text in an ObjectAttribute in an SAP UI5 application:
<List id="__listObjectAttributes" noDataText="Drop list items here" headerText="Shipping Information" items="{Shipments}">
<items>
<ObjectListItem id="__listItemShipments" title="{ShipmentTxt}">
<attributes>
<ObjectAttribute id="__attributeShipmentId" title="Shipment #" text="{Id}"/>
<ObjectAttribute id="__attributeShipmentCode" title="Shipment Code" text="{ShipCd}"/>
<ObjectAttribute id="__attributeShipmentLongText" title="Long Text" text="{LongText}" binding="{ShipmentLongText}"/>
</attributes>
</ObjectListItem>
</items>
</List>
The problem is, when the list is displayed the text is truncated instead of wrapped. I've been looking for ways to wrap the text in an ObjectAttribute, but to no avail.
I have found articles that say both "you can do it" and "you can't do it".
Possible: https://archive.sap.com/discussions/thread/3589475
Not possible: https://experience.sap.com/fiori-design-web/object-list-item/
If it is not possible to add this information to an ObjectAttribute, does anyone know a way to display the same information in a list that will accept wrapped text?
Solution
#Ran Hassid's answer was correct! Using a CustomListItem in combination with a SimpleForm was the best solution. Here is the code I ended up going with:
<List id="__listObjectAttributes" noDataText="Drop list items here" headerText="Shipping Information" items="{Shipments}">
<items>
<CustomListItem id="__listItemShipments">
<content>
<form:SimpleForm id="__formShipmentList" editable="true" layout="GridLayout" labelMinWidth="100">
<form:content>
<!--Id-->
<Label id="__labelShipmentId" text="Id"/>
<Text id="__textShipmentId" text="{Id}"/>
<!--Shipment Code-->
<Label id="__labelShipmentCode" text="Shipment Code"/>
<Text id="__textShipmentCode" text="{ShipCd}"/>
<!--Long text-->
<Label id="__labelShipmentLongText" text="LongText"/>
<Text id="__textShipmentLongText" text="{Longtext}" binding="{ShipmentLongText}"/>
</form:content>
</form:SimpleForm>
</content>
</CustomListItem>
</items>
</List>
Then I added the sap.ui.layout.form to the mvc:View to simplify the code:
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" xmlns:form="sap.ui.layout.form" controllerName="shipments.controller.ShipmentDetail">
I think that even if it is possible (I assume via css changes and so on) it is not recommended because it is not part of the ObjectAttribute interface. In order to achieve the same effect you can do one of the following:
Use CustomListItem instead of ObjectListItem and inside the content of it wrap a SimpleForm. The simple form layout should be grid layout because you want to position text next to the title in the same row. In the Text control you can put as longest string as you want and also control on the wrapping of it. So your code should look something like that (I didn't use binding but I assume you will know what to do in your code)
<List noDataText="Drop list items here" id="__list0">
<items>
<CustomListItem type="Navigation" id="__item1">
<content>
<sap.ui.layout.form:SimpleForm xmlns:sap.ui.layout.form="sap.ui.layout.form" xmlns:sap.ui.core="sap.ui.core" editable="true" layout="GridLayout" id="__form0" labelMinWidth="100">
<sap.ui.layout.form:content>
<sap.ui.core:Title text="Title" id="__title0" />
<Label text="Long Text" id="__label1" />
<Text text="Very long text with\nmultiple lines" />
<Label text="Other text" id="__label2" />
<Text text="Some text goes here" />
</sap.ui.layout.form:content>
</sap.ui.layout.form:SimpleForm>
</content>
</CustomListItem>
</items>
</List>
The second option is to use CustomListItem but with VBOX + HBOX. so you have a VBOX which wrap HBOX's and inside each HBOX you put title next to the text.
I recommend to go with the first approach because it's much more clear and responsive.
Good luck.
I would recommend using basic CSS to solve this issue.
XML-View:
...
<ObjectAttribute text="{aVeryLongText}" class="objectAttributeWrapper" />
...
CSS:
.objectAttributeWrapper * {
white-space: pre-line !important;
word-wrap: break-word !important;
}
This will even work if there are changes on the sap.m.ObjectAttribute Interface, since this CSS-Selector grabs all children of the element which we assigned the CSS class to.
Speaking from my experience this was a quick and stable solution. I had to extend a legacy app, where replacing the whole control would result in me needing to rewrite a whole controller.
Works like a charm and didnt break since 1.71.50
I'm writing here after a couple of hours of reading everything available on-line, including SAPUI5 Explored Apps, API, etcs.
I need to use Image with Maps to define and capture different clickable areas in an image.
SAPUI5 explored says there is an UseMap parameter, but don't provide enough info or example. I've tried and can't map and get the clicked location.
The API offers sap.m.ImageHelper, with one parameter to use maps. But it also lacks example or enough documentation.
Finally, I'm aware that there's some examples on-line using sap.ui.commons. But I couldn't find any example using sap.m
Anyone has a real working example of this?
Thank you!
Regards,
Douglas
The sap.m.Image useMap property simply adds a useMap property to the element. However you need to define a map element with the same name as in the useMap property along with the regions.
You could use the HTML control from the sap.ui.core library to add a HTML map element to the page.
<Image src="img/someImage.jpg"
width="200px"
useMap="regions"
>
</Image>
<core:HTML content='<map name="regions">
<area shape="rect" coords="0,0,82,126" href="link1.html" alt="Link 1">
<area shape="rect" coords="90,90, 158,103" href="link2.htm" alt="Link 2">
</map>'>
</core:HTML>
You don't necessarily have to revert to a stringified version of your map coding.
Here's how you can provide a map as the useMap parameter for a sap.m.image by referencing the html namespace (Note the declaration xmlns:html="http://www.w3.org/1999/xhtml" at the top):
<mvc:View controllerName="xy.controller.Master" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" >
<App>
<pages>
<Page title="{i18n>title}">
<content>
<Image src="img/Blume.PNG" densityAware="false" width="" useMap="Map">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Image>
<html:map name="Map" id="Map">
<html:area alt="" title="" href="www.google.de" shape="poly" coords="384,505,444,507,444,528,390,527"/>
<html:area alt="" title="" href="www.google.de" shape="poly" coords="426,582,494,583,494,636,426,632"/>
</html:map>
</content>
</Page>
</pages>
</App>
</mvc:View>
Credits: https://answers.sap.com/questions/290270/how-use-sapmimage-with-usemap-and-get-the-clicked.html
I have a table (sap.m.Table) and would like to change the header font to bold, but I'm unable to do that. Here is my code for one of the column definitions in my *.view.xml:
<Column xmlns="sap.m"
hAlign="Left"
width="17em"
>
<Text text="Vendor" />
</Column>
After looking at the API (sap.m.Text), I don't see a way to change the text style and I'm also new to UI5. Could someone point me to where to look for this?
sap.m.FormattedText
Another option is to use sap.m.FormattedText[api] with an inline tag <strong> within the htmlText value.
<Column ...>
<FormattedText htmlText="<strong>My Column</strong>" />
</Column>
Note
In XML, the character < needs to be escaped with <.
Browsers do not guarantee that the text within <strong> is always displayed in bold.
The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important. [source]
The element <b> is currently not supported by the FormattedText. On the other hand, <em> is supported to emphasize the text.
sap.m.Label
Instead of sap.m.Text, you can use sap.m.Label which supports "Bold" design.
<Column id="myColumn">
<Label labelFor="myColumn"
design="Bold"
text="..."
wrapping="true"
/>
</Column>
Additionally, enable the property wrapping (available since 1.50) in order to achieve the default behavior of sap.m.Text. Wrapping should be enabled for column headers as recommended by Fiori design guidelines:
Column Headers - Best Practices
Use controls that wrap [...]. Do not use controls that truncate.
Note: If the label is not labeling anything, please try with different controls like sap.m.FormattedText.
I found by chance that using <FormattedText> instead of <Text> creates bold headers. This works without (!) using any additional bold or strong markup in the htmlText of <FormattedText>.
So in your case you would go with:
<Column
hAlign="Left"
width="17em"
>
<FormattedText htmlText="Vendor" />
</Column>
Whether this works seems to be somewhat dependent on the SAPUI5 version and the theme in use.
It works for me on SAPUI5 1.108 with the default theme (no data-sap-ui-theme specified in index.html).
Try like in the Documentation
Create a custom CSS
Add your styleclass to the Control.
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");
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>