Is posible make a select that shows a custom icon? or we only can use SAP icons?
I'm trying this:
enter image description here
I want a dropdown like this and next to the name country that we can see the flag of each country. Is posible for a dropdown?
this is the view:
<m:Label/>
<m:Select items="{ path: 'listcountries>/countrySet' }">
<c:ListItem key="{listcountries>Land}" text="{listcountries>Landx}" icon="images/{Land}.png"/>
</m:Select>
{Land} is the same value that the name of the each picture.
and this the route of the pictures:
click
thank you!
Yes, it's possible with sap.m.Select. Here is a sample https://openui5.hana.ondemand.com/entity/sap.m.Select/sample/sap.m.sample.SelectWithIcons
<Select>
<core:ListItem key="item1" text="Text 1" icon="./path/to/icon1"/>
<core:ListItem key="item2" text="Text 2" icon="./path/to/icon2"/>
</Select>
Here is a live example https://codepen.io/pdimov/pen/gORgdBm
Related
I implemented a functionality so that the users of my SAPUI5 application can change between different SAPUI5 themes. Now I would like to place a button in the existing ShellBar of my app to trigger that functionality from there.
Currently I have a fragment with the following code, which I want to make use of within a simple button in the ShellBar. I tried different things like f.ex. calling it via the avaterPressed attribute from the shellbar, but it looks all messed up - I'd be very happy if someone could help me out here - Thanks!
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Menu itemSelected="onSelectTheme" >
<MenuItem text="Choose Theme">
<items>
<MenuItem key="sap_fiori_3" text="Standard Light" />
<MenuItem key="sap_fiori_3_dark" text="Standard Dark" />
<MenuItem key="sap_hcw" text="High Contrast White" />
<MenuItem key="sap_hcb" text="High Contrast Black" />
</items>
</MenuItem>
</Menu>
</core:FragmentDefinition>
It should look like the "Administrator" button in the following example (Instead of "User Settings" there should be my text "Choose Theme" from the fragment shown above: https://sapui5.hana.ondemand.com/sdk/test-resources/sap/tnt/demokit/toolpageapp/webapp/index.html?sap-ui-theme=sap_horizon#/
If you want to keep using the ShellBar, you can implement the press event on the Avatar and use the ActionSheet for your needs.
https://sapui5.hana.ondemand.com/#/entity/sap.m.ActionSheet/sample/sap.m.sample.ActionSheet
The developers from the linked example don't use the SAPUI5 Control ShellBar, but instead they made use of ToolHeader, which you can also implement within the Control ToolPage.
With ToolHeader, you can simply add a Button wherever you'd like and also call the fragment from f.ex. the profile picture button (shown below).
<tnt:ToolHeader>
<Avatar src="..." press="YOUR_FUNCTION_TO_OPEN_FRAGMENT"/>
</tnt:ToolHeader>
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 have added two buttons(Approve, Reject) in Process Flow node. But I am not able to click on that buttons.
Can anyone help on this, How we can click on that buttons?
sap.suite.ui.commons.sample.ProcessFlow
ProcessFlow
Code
<ProcessFlow id="processflow1" scrollable="false" nodePress="onNodePress" foldedCorners="true" nodes="{/nodes}" lanes="{/lanes}">
<nodes>
<ProcessFlowNode id="processflownode1" laneId="{lane}" nodeId="{id}"
title="{title}" titleAbbreviation="{titleAbbreviation}"
children="{children}" state="Neutral" stateText="{stateText}"
texts="{texts}" focused="false" selected="false"
highlighted="false" isTitleClickable="false">
<zoomLevelOneContent>
<m:HBox height="100%" justifyContent="SpaceBetween" renderType="Bare">
<m:Button type="Accept" text="Approve" press="onPress"></m:Button>
<m:Button text="Reject" type="Reject"/>
</m:HBox>
</zoomLevelOneContent>
</ProcessFlowNode>
</nodes>
<lanes>
<ProcessFlowLaneHeader laneId="{id}" iconSrc="{icon}" text="{label}" position="{position}"/>
</lanes>
</ProcessFlow>
Screenshot
This feature is not possible with ProcessFlowNode. You can use nodePress event to open an action sheet or popover for your actions according to your need.
For more information please check:
Process Flow | SAP Fiori Design Guidelines
I am new to SAPUI5, I need suggestions understanding outline a Web App.
I am trying to develop an Online Questionnaire which will display questions and options and user can navigate to different questions with next and previous buttons.
Here is what I was thinking while designing:
I would first use a Page Control which will have a header that displays a Title and a footer which will contain Next and Previous buttons.
The Page will have Content which will then consist of VBOX and HBOX
for holding questions and answers.
Inside this VBOX and HBOX I will bind the text coming from my Json model or from my SAP HANA database.
Is it possible to bind values to HBOX and VBOX?
Kindly suggest more like should I use a different layout for this or some other idea.
Your suggestion is ok. You can also use for example this approach.
<mvc:View
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<l:VerticalLayout
class="sapUiContentPadding"
width="100%">
<l:content>
<Label text="Label A (required)" labelFor="input-a"/>
<Input id="input-a" required="true"/>
<Label text="Label B (bold)" labelFor="input-b" design="Bold" />
<Input id="input-b"/>
<Label text="Label C (normal)" labelFor="input-c"/>
<Input id="input-c"/>
</l:content>
</l:VerticalLayout>
</mvc:View>
I am using a sap.ui.table.Table control and have added some controls in the 'extension' aggregation. Specifically, I have added a HorizontalLayout that has 2 buttons in it. However, both the buttons show up as left aligned. I tried changing the alignment but nothing seems to get them to show up on the extreme right.
Here is the code snippet:
`<table:Table height="100%" width="100%">
<table:extension>`
<l:HorizontalLayout>
<Button text="Save" />
<Button text="Cancel"/>
</l:HorizontalLayout>
</table:extension>
</table:Table>
A HorizontalLayout will be left-aligned only.
Why not use a MatrixLayout instead with a single cell and set its hALign property to Right?