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>
Related
I have an issue with the Card (sap.f), i have some content on the first half of the card and i want to press the card and able to withdraw a list which i am not able to attain via Navigation List.
Please suggest which list control should be able to perform this.
<f:Card id="card">
<f:layoutData>
<f:GridContainerItemLayoutData columns="4"/>
</f:layoutData>
<f:content>
..........
<CustomListItem type="Active"
press="onShowHideMenuPress">
........ There are some items here
<List id="list" visible="false"
class="sapUiTinyMarginBegin
sapUiNoContentPadding">
</List>
</CustomListItem>
</f:content>
</f:Card>
Then in the controller the function()
onShowHideMenuPress: function()
{
this.getView().byId("list").setVisible(true);
}
I want to add a popup to my application that contains a NavContainer. I need this to switch between two different views within the popup later. Now the NavContainer seems to need a fixed value for height and width to display content. Otherwise the popup will only be displayed in the size of the header and footer line. I realized that I can fix the size, but that's not the sense of a responsive application.
My code looks like this without the fixed information:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
>
<Dialog id="genericDialog"
showHeader="false"
title="Detail View"
>
<NavContainer>
<Page id="page1">
<List items="{/avGenericSet}">
<CustomListItem class="sapUiResponsiveMargin">
<ObjectIdentifier title="{title}"/>
<Input value="{value}"/>
</CustomListItem>
</List>
</Page>
<Page id="page2">
<!-- ... -->
</Page>
</NavContainer>
<endButton>
<Button text="Close" press="closeGenericDialog"/>
</endButton>
</Dialog>
</core:FragmentDefinition>
The behavior can be observed in all popup types (Dialog, Popover, ResponsivePopover). Does any of you know a workaround or do I have to say goodbye to a "responsive" popup?
Try with contentHeight="100%" (and contentWidth if required) from the Dialog. Here is an example: https://embed.plnkr.co/7nimup1UMGsifeDQ?show=view/fragment/Dialog.fragment.xml,preview
I am getting the below error while trying to display a dialog box after user presses a button,
sap-ui-core.js:80 Uncaught Error: failed to load 'sap/m/buttons.js' from resources/sap/m/buttons.js: 404 - Resource could not be found!
Please find the XML code below.
<Dialog xmlns="sap.m"
icon="sap.icon://filter"
title="Filter product details">
<content>
<List id="ls2"
items="{/value}"
mode="MultiSelect">
<StandardListItem title="{CompanyName}"/>
</List>
</content>
<buttons>
<Button text="ok" icon="sap-icon://accept" press="handleok"/>
<Button text="Cancel" icon="sap.icon://cancel"/>
</buttons>
</Dialog>
So the issue was that the UI5 version was quite outdated after all. The aggregation buttons was introduced as of version 1.21.1.
You have to wrap the sap.m.Dialog control inside a FragmentDefinition according to the walkthrough guide.
Here is minimal example https://embed.plnkr.co/OjUCXTg2afohZyDvPp67/
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Dialog
id="helloDialog"
title="Hello World">
<buttons>
<Button text="Ok">
<Button text="Cancel">
</buttons>
</Dialog>
</core:FragmentDefinition>
And instead of using a dialog control you can use a sap.m.MessageBox control which provides you with "Ok" and "Cancel" or custom buttons.
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.
Is it possible to put sap.m.Text or sap.m.Label in an sap.m.OverflowToolbar so that they can be moved into the overflow area? With buttons, it is possible that the shrank view shows three ellipses and the hidden buttons are accessible with the dropdown. If I use label or text, however, the dropdown won't show.
As of v1.52, any control implementing the interface sap.m.IOverflowToolbarContent can be moved into the the overflow area. One of such controls has been the sap.m.Label since v1.54.
sap.m.Label
interfaces: [
// ...
"sap.m.IOverflowToolbarContent"
],
Demo:
https://openui5.hana.ondemand.com/test-resources/sap/m/OverflowToolbar.html
Also the control, to which the label is pointing via the association labelFor, can be moved into the overflow area too if needed.
Release: 1.30
https://github.com/SAP/openui5/blob/master/src/sap.m/src/sap/m/OverflowToolbarAssociativePopoverControls.js
OverflowToolbarAssociativePopoverControls._mSupportedControls = ...
(Button, OverflowToolbarButton, CheckBox, ToggleButton, Select, ComboBox, SearchField, SegmentedButton, Input, DateTimeInput, RadioButton).
So it's not possible to use text or label by default.
You can add a sap.m.Title Object to the sap.m.OverflowToolbar#content.
Within the sap.m.Title is a property called 'text' where you can assign some text.
The sap.m.Title will automatically be shrinked or disappear if it comes to an overflow. Regarding that it is just text without any related action, there is no need to show the sap.m.Title within the overflow popup.
This refers to the SAP Fiori Gudelines.
https://experience.sap.com/fiori-design/ui-components/table-bar/
Section: Behavior&Interaction --> Overflow (Generic)
"Everything else than a button cannot move into the overflow."
I'm new to sapui5 but maybe this code may be useful for you.
<footer>
<OverflowToolbar >
<ToolbarSpacer/>
<Button type="Accept" text="Accept">
<layoutData><OverflowToolbarLayoutData priority="Low" /></layoutData>
</Button>
<Button type="Reject" text="Reject">
<layoutData><OverflowToolbarLayoutData priority="Low" /></layoutData>
</Button>
<Button type="Accept" text="Accept">
<layoutData><OverflowToolbarLayoutData priority="Low" /></layoutData>
</Button>
<Button type="Reject" text="Reject">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
</OverflowToolbar>
</footer>