in my SAPUI5-application i use breadcrumbs. This feature is quite nice, but on a specific word ("Vertrag") the link to the overriding breadcrumb is collapsed and there's a dropdown-field. By changing the word from "Vertrag" to "Vertrags", the overriding breadcrumb isn't collapsed anymore.
Can you help me, to disaple this dropdown-field?
XML-file containing the breadcrumb:
<FlexBox height="50px" alignItems="Start" justifyContent="Center">
<Breadcrumbs currentLocationText="{i18n>Contract}">
<Link press="onPressBreadcrumb" text="{i18n>Overview}" id="Overview"/>
</Breadcrumbs>
</FlexBox>
OK
Not OK
Thanks.
I think, this must be a issue on calculation width of the flex box. Try to play with margins, pattern or other stuff that affect rendering.
Or try to force for test like this
<FlexBox height="50px" alignItems="Start" justifyContent="Center">
<Breadcrumbs currentLocationText="{i18n>Contract}">
<Link press="onPressBreadcrumb" text="{i18n>Overview}" id="Overview"/>
</Breadcrumbs>
<Label text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" />
</FlexBox>
It may be necessary to test it on all popular browsers.
Related
I am trying to make a business critical SAPUI5 application more accessible using screen readers by adding ARIA labels and landmarks. One issue is that some SAPUI5 elements such as sap.m.Title's without text have been used (abused) for layout purposes. I would like to add the aria-hidden attribute or a SAPUI5 analogue to these Title elements. But I can't figure out how to do this. I would like to change
<Title text="" class="title" />
into
<Title aria-hidden="true" text="" class="title" />
But setting aria-hidden on the Title like this seems to be invalid. How would I go about setting a standard HTML attribute on a SAPUI5 control?
Thank you in advance for your help!
Joshua
I tried to find a solution by checking other questions with a similar error but none could help me. I tried to run the Component.js from my app in sandbox. Running the index.html works fine. My starting view is this:
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
controllerName="com.sap.build.standard.qrCodeScanner.controller.Home"
>
<Page id="home"
class="customHomeBackground"
showHeader="true"
title="Home"
showFooter="true"
>
<content>
<FlexBox
class="customFlexBoxHome"
justifyContent="Center"
alignItems="Center"
wrap="Wrap"
>
<GenericTile class="customTile"
header="Scan invitations"
subheader="from your customers"
frameType="OneByOne"
press="_onGenericTilePress1"
>
<TileContent>
<ImageContent src="sap-icon://bar-code"/>
</TileContent>
</GenericTile>
</FlexBox>
</content>
<footer/>
<headerContent/>
<subHeader/>
<customHeader/>
</Page>
</mvc:View>
It's simply a single GenericTile. I can't access this view because of
Error: Cannot add direct child without default aggregation defined for control sap.m.GenericTile
Accessing the other views is no problem. So when I add e.g. a button instead of the GernericTile + children, it works fine.
I also tried to add one of these sample tiles instead but same error.
What's the problem with the GenericTile?
Piggybacking on #sunil-b-n's answer:
In the current version of UI5 the example code works fine, as per the plunkr Sunil provided.
However, if you change the library version to 1.38.15 like this, it is broken as per OP's question.
Look at the difference. In the latest version, this code is valid:
<GenericTile>
<TileContent>
<ImageContent src=""/>
</TileContent>
</GenericTile>
But in old versions, named aggregations need to be explicitly added accordingly:
<GenericTile>
<tileContent> <!-- named aggregation required. Default since 1.46.x -->
<TileContent>
<content> <!-- named aggregation required. Default since 1.38.18 -->
<ImageContent src=""/>
</content>
</TileContent>
</tileContent>
</GenericTile>
You need to figure out what version of UI5 you're on and use the appropriate SDK documentation to build your app, otherwise you'll run into trouble.
You can view the version-specific Demo Kit by adding the version number to the URL, e.g. https://ui5.sap.com/1.38.8/
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="com.sap.build.standard.qrCodeScanner.controller.Home" >
<Page id="home" class="customHomeBackground" showHeader="true" title="Home" showFooter="true">
<content>
<FlexBox class="customFlexBoxHome" justifyContent="Center" alignItems="Center" wrap="Wrap">
<GenericTile class="customTile" header="Scan invitations" subheader="from your customers" frameType="OneByOne" press="_onGenericTilePress1">
<TileContent>
<ImageContent src="sap-icon://bar-code" />
</TileContent>
</GenericTile>
</FlexBox>
</content>
<footer/>
<headerContent/>
<subHeader/>
<customHeader/>
</Page>
</mvc:View>
This view is loading completely fine in the latest SAPUI5 version.
Working plnkr here
content is the default aggregation for sap.m.Page.
guess because of the wrapped sap.m.Page around the sap.m.GenericTile. just omit the sap.m.Page and you won't get the error. the sap fiori design guidelines says that tiles are used to display and launch apps on the launchpad. And therefore, they shall not be used on an overview page or anywhere else.
How can I set a line break between two controls?
I want to display one by one in vertical manner.
You can use a flex box control: either <VBox> or <HBox>.
<VBox xmlns="sap.m" wrap="Wrap" renderType="Bare">
<!-- ... -->
</VBox>
You don't really use linebreaks but layout controls.
If you want to have an element below another element, put both of them in a vertical layout.
https://sapui5.hana.ondemand.com/explored.html#/entity/sap.ui.layout.VerticalLayout/samples
<l:VerticalLayout>
<Input placeholder="UserID" />
<Input placeholder="Password" type="Password" />
</l:VerticalLayout>
Don't forget to include the namespace: xmlns:l="sap.ui.layout"
You can also nest different layouts: Outer layout is vertical, and each row of the vertical layout can be a horizontal layout where items are placed next to each other.
Edit: This also works in IE9. VBox unfortunately does not work in IE9.
Hey guys and Happy Easter,
I am working on an extension for the backend and would like to have the standard toolbar with save and cancel options in my own extension.
So I would like to have sth. like this:
I am kind of an newbie and would like to have a little more detailed answer.
Found something about addToolbarItem on the internet but don't know how to use it.
Edit:
Unfortunately I have to work with TYPO3 v4.5 and pibase extension and don't have enough time to change the version to 6.2.9...
Thanks!
Assuming you're using TYPO 6.x+ and Extbase!
You can put additional elements from your view to the layout by additional sections. most probably your view now looks like:
<f:layout name="Default"/>
<f:section name="content">
<h1>Foo</h1>
</f:section>
so add new section i.e.:
<f:layout name="Default"/>
<f:section name="myButtons">
<f:be.buttons.icon icon="actions-document-new" title="Create new Foo" />
</f:section>
<f:section name="content">
<h1>Foo</h1>
</f:section>
And finally in your Default.html layout render your section in proper place (set it as optional, otherwise you'll get an exception if missing!)
....
<div class="typo3-docheader-buttons">
<div class="left">
<f:render section="myButtons" optional="true"/>
</div>
<div class="right">
<span title="Reload" class="t3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-refresh"> </span>
<f:be.buttons.shortcut />
</div>
</div>
....
Of course this way you can also set other elements like <f:be.menus.actionMenu>, <f:be.pageInfo /> etc, or even just your text labels.
Check ViewHelpers in typo3/sysext/fluid/Classes/ViewHelpers/Be/ for some ready to use elements.
I'm using the ComboBox from the AjaxControlToolkit v4.1.50731. When it displays on the page, the dropdown list renders well below the origin of the control. Unfortunately, I can't post an image due to SO restrictions.
I kept the code to a minimum on the page to avoid any possible conflicts:
<AjaxToolKit:ComboBox ID="ComboBox1" runat="server">
<asp:ListItem Text="Mild" Value="0" />
<asp:ListItem Text="Medium" Value="1" />
<asp:ListItem Text="Hot" Value="2" />
</AjaxToolKit:ComboBox>
Any idea why this is happening or how it can be corrected?
The issue was caused by CSS styling but I couldn't isolate it the exact cause. To resolve the problem, I created a new page with no styling and only the combo box control, calling it "PlainComboBox.aspx". Then I used an iframe tag in the page where I wanted to display the combo box, as seen below:
<iframe src="PlainComboBox.aspx" frameborder="0" height="130" >
<p>Your browser does not support iframes.</p>
</iframe>
This isolated the combo box from any styling issues elsewhere on the page and rendered correctly.