I'm currently building a dynamic table within a sapui5 application. Therefore I'm implementing an editing mode, which is triggered through the click of a button. To change the table cells between view- and edit mode, I defined the following cells:
<items>
<ColumnListItem>
<cells>
<Text text="{Name}" visible="{= !${/editMode}}"/>
<Input value="{Name}" visible="{= ${/editMode}}" change="onChangeName"/>
<Text .../>
<Input .../>
...
</cells>
</ColumnListItem>
</items>
Unfortunately, my code does not work as intended. For example, instead of column 1 switching between the "Text" and "Input" nodes, the text node is displayed in one column and the input node in the following column. How do I get the two nodes in the same column?
View mode (Text text...)
Edit mode (Input value...)
Solved it using SAPUI5's <HBox> tag (Click here for documentation)
The code now looks like that:
<items>
<ColumnListItem>
<cells>
<HBox>
<Text text="{Name}" visible="{= !${/editMode}}"/>
<Input value="{Name}" visible="{= ${/editMode}}" change="onChangeName"/>
</HBox>
<HBox>
<Text .../>
<Input .../>
</HBox>
...
</cells>
</ColumnListItem>
</items>
Related
Screenshot of the current width:
I'm trying to expand the suggestion popup above.
Since I want to use it in a FilterBar, the Input fields are small and the Table becomes kind of useless. When trying to change the width with the Inspector, it changes back immediately.
The demo code I'm using is rather simple.
<Input xmlns="sap.m"
showSuggestion="true"
showTableSuggestionValueHelp="false"
suggestionRows="{/ZSD_DebiaSet}"
width="200px">
<suggestionColumns>
<Column popinDisplay="Inline" demandPopin="true">
<Label text="Name"/>
</Column>
<Column hAlign="Center" popinDisplay="Inline" demandPopin="true" minScreenWidth="Tablet">
<Label text="Product ID"/>
</Column>
<Column hAlign="Center" popinDisplay="Inline" minScreenWidth="Tablet">
<Label text="Supplier Name"/>
</Column>
<Column hAlign="End" popinDisplay="Inline" demandPopin="true">
<Label text="Price"/>
</Column>
</suggestionColumns>
<suggestionRows>
<ColumnListItem>
<!-- ... -->
</ColumnListItem>
</suggestionRows>
</Input>
Controls extended from sap.m.Input (i.e. including sap.m.MultiInput) have a property called maxSuggestionWidth which will let you have a wider suggestion table than the actual width of your input. Check the property here: https://openui5.hana.ondemand.com/api/sap.m.Input#methods/setMaxSuggestionWidth
If set, the value of this parameter will control the horizontal size of the suggestion list to display more data. This allows suggestion lists to be wider than the input field if there is enough space available. By default, the suggestion list is always as wide as the input field.
Note: The value will be ignored if the actual width of the input field is larger than the specified parameter value.
I added this property with value 500px (just for testing) and the result is the following (The Input width is 200px):
I think this is what you are looking for ^^ Hope it helps!
I have an application with a footer which is same for all pages. Until now, I used separate view for this which I attached to the bottoms of the pages. However, now I created two fragments for item details page (Display/Add modes), using the ObjectPageLayout and want to add my footer into both of those. As I understand, I should use fragment instead of View so I rewrote my footer view into fragment so it looks like this:
<core:FragmentDefinition xmlns="sap.m"
xmlns:f="sap.f"
xmlns:core="sap.ui.core"
>
<VBox>
<Text text=""/>
<Text text=""/>
<f:Card class="sapUiTinyMargin" height="100px" width="1144px">
<f:content>
<VBox width="100%" alignItems="Center">
<Text text=""/>
<HBox>
<Label text="{i18n>needHelp}" />
<ToolbarSpacer width="20px" />
<Link text="{i18n>contactUs}" href="mailto:xxx.xxx#xxx.com"/>
</HBox>
</VBox>
</f:content>
</f:Card>
</VBox>
</core:FragmentDefinition>
And then I put this fragment into the footer of the ObjectPageLayout, like this
<footer>
<core:Fragment fragmentName="xxx.portal.view.Footer" type="XML"/>
</footer>
However, when I try to load the page, I get the error "Assertion failed: "Element sap.m.VBox#__vbox1" is not valid for aggregation "footer" of Element sap.uxap.ObjectPageLayout#nav---connection--ObjectPageLayout"
Any idea why is it showing up and what I am doing wrong? I would also like to note that if I use some simpler elements in the footer (such as Toolbar), there is no error and it gets displayed correctly.
Thank you
A question regarding below process. I have a table maintained in blue box. Sample table maintenance and expected output.
How could I render the coordinates to a clickable table/grid like what is shown in red box. Which SAPUI5 control able to achieve this objective? The X will be the lot id which will be maintained in the table and it shall have an event triggered to show the detail information when user click on the cell. Some lot will have single cell and some will need to merge cell(Note: if the coordinate is not maintained, it shall leaves blank to that cell and is non-clickable).
Does this requirment able to achive using sapui5 for fiori app?
There are several ways to achieve this, but not all of them offer the complete set of functionality that you describe.
The first way that comes into mind is to use a sap.m.Table with the "mergeDuplicates" properties set on the columns. Example (working fiddle here):
<Table>
<columns>
<Column mergeDuplicates="true">
<header><Label text="1" /></header>
</Column>
<Column mergeDuplicates="true">
<header><Label text="2" /></header>
</Column>
<Column mergeDuplicates="true">
<header><Label text="3" /></header>
</Column>
</columns>
<ColumnListItem>
<Button text="A"/>
<Button text="B"/>
<Button text="X"/>
</ColumnListItem>
<ColumnListItem>
<Button text="A"/>
<Button text="C"/>
<Button text="C"/>
</ColumnListItem>
<ColumnListItem>
<Button text="A"/>
<Button text="C"/>
<Button text="C"/>
</ColumnListItem>
</Table>
The main downside of this is that you cannot merge cells across columns (i.e. in this example, you would get cell "C" twice: once for the second column and once for the third).
Another version is to use the sap.ui.layout.Grid. This has mostly the same limitation (that you can only merge "cells" in a single direction) and also has the added limitation that:
The Grid control is a layout which positions its child controls in a 12 column flow layout.
Lastly, you could use a sap.ui.commons.layout.MatrixLayout (which is deprecated btw, but no "full" replacement was provided). This actually can be used to model your problem completely. Example (working fiddle here):
<layout:MatrixLayout class="matrix">
<layout:rows>
<layout:MatrixLayoutRow height="4em">
<layout:MatrixLayoutCell padding="None" rowSpan="3">
<Button text="A" width="100%"/>
</layout:MatrixLayoutCell>
<layout:MatrixLayoutCell padding="None">
<Button text="B" width="100%"/>
</layout:MatrixLayoutCell>
<layout:MatrixLayoutCell padding="None">
<Button text="X" width="100%"/>
</layout:MatrixLayoutCell>
</layout:MatrixLayoutRow>
<layout:MatrixLayoutRow height="4em">
<layout:MatrixLayoutCell padding="None" colSpan="2" rowSpan="2" >
<Button text="C" width="100%"/>
</layout:MatrixLayoutCell>
</layout:MatrixLayoutRow>
<layout:MatrixLayoutRow height="4em">
</layout:MatrixLayoutRow>
</layout:rows>
</layout:MatrixLayout>
But as you see, it is slightly more complicated and may need some CSS fiddling.
I'm developing an app in SAPUI5/Fiori and I want to implement the "Step Input" control in a table for each row.
In the explored reference of Fiori, I copied the control code, but I currently get the following error:
Core-dbg.js:2711 Uncaught (in promise) Error: Error: adding element
with duplicate id '[..]--stepInput-decrementBtn'
My View looks like this:
<Table id="lineItemsList" width="auto" items="{/itemsSet}"class="sapUiResponsiveMargin">
<headerToolbar>
<Toolbar id="lineItemsToolbar">
<Title id="lineItemsHeader" text="{/lineItemListTitle}"/>
</Toolbar>
</headerToolbar>
<columns>
<Column vAlign="Middle">
<Text text="{i18n>detailLineItemTableIDColumn}"/>
</Column>
<Column hAlign="Right">
<Text text="{i18n>detailLineItemTableUnitNumberColumn}"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Label id="label1" text="{itemID}"/>
<StepInput
id="stepInput"
value="0"
width="120px"
min="0"
max="15"
step="1"
editable="true"/>
</cells>
</ColumnListItem>
</items>
</Table>
I also tested to give the StepInput no id, but still the same error.
I have had a look at your problem. I did some tests based on the SAPUI5 example https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.StepInput/preview
And found that the problems comes from the property editable which if it is manually set to true provokes the error you found.
You have several choices:
You don't put this attribute, the field will be editable and it will work
Match the value of the attribute to an element of your model (as in the example), it will work even when the value is true
Also you should create a ticket to SAP to raise this problem which is problem a standard issue.
Hope this'll help !
Almiriad is right, this is a freaking bug in the latest versions, you can see it by debugging StepInput-dbg.js >> the decrement button creation method is sent twice (because the 'setEnaditable' checks the aggregation and creates the button)
Since true is the default value for editable property, you dont need it here :)
I am developing a Online Questionnaire application. In this I am using Checkbox and Labels inside a VBox and Hbox control to display the options for my answers. These answer options I am getting them from my questionnaire.json model.
Following is my App.view.xml showing the answers layout:
<VBox id="multipleChoices">
<items>
<HBox backgroundDesign="Solid" alignItems="Center">
<items>
<CheckBox id="mCheckBox0"/>
<Label text="" id="multipleChoice0" width="500px"/>
<CheckBox id="mCheckBox1"/>
<Label text="" id="multipleChoice1" width="500px"/>
</items>
</HBox>
<HBox backgroundDesign="Solid" alignItems="Center">
<items>
<CheckBox id="mCheckBox2"/>
<Label text="" id="multipleChoice2" width="500px"/>
<CheckBox id="mCheckBox3"/>
<Label text="" id="multipleChoice3" width="500px"/>
</items>
</HBox>
</items>
</VBox>
It gets applied in front end as follows:
Q1.png
Q2.png
Problem:
You can see in Q2.png 4 Labels and 4 radio buttons are being displayed even though there are only two answer options. How do I achieve the scenario where the labels's and radio buttons/ check boxes appear in same number as the answer choices and extra ones are hidden?
Is there a dynamic control which can help me with this one?
you should bind your question from your model to a List and a ListItem can have a template with Labels and checkboxs, so you don't need to care about the size of your answers. The way you are doing it at the moment is way too static.
Checkbox has a text property, therefore you could remove the labels and do a binding inside that property
<CheckBox id="mCheckBox1" text="{model/textOption1}"/>
<CheckBox id="mCheckBox2" text="{model/textOption1}"/>