I want to display a disabled suggestion item when user types something in input field.
The thing is that by default SAPUI5 hides all disabled suggestion items and I didn't find a way to convince the framework to reconsider its behavior.
Here is an example I created for your convenience: example
Here is the code of the example:
<Input showSuggestion="true" filterSuggests="false" autocomplete="false">
<suggestionItems>
<core:Item text="item 1" key="1" enabled="true"/>
<core:Item text="item 2" key="2" enabled="false"/>
<core:Item text="item 3" key="3" enabled="true"/>
<core:Item text="item 4" key="4" enabled="true"/>
</suggestionItems>
</Input>
If you type "item" in the input field, you won't see item 2 in suggestions.
Is there a way to display item 2?
This can be achieved with a combination of custom data aggregation and CSS.
XML:
<core:Item text="item 2" key="2" >
<core:customData>
<core:CustomData key="disable-suggestion-item" value="true" writeToDom="true"/>
</core:customData>
</core:Item>
CSS:
[data-disable-suggestion-item="true"]{
opacity: 0.5;
pointer-events: none;
}
here is working solution
Related
I have a view:
<List
items="{data>/Stages}">
<CustomListItem>
<Panel>
<headerToolbar>
<Toolbar>
<content>
<Button
visible="{= ${data>/Stages/length} > 1}" />
</content>
</Toolbar>
</headerToolbar>
<content>
<Table
growing="true"
growingScrollToLoad="false"
items="{
path: 'data>FieldWorks',
templateShareable: true
}"
class="blueTable originTable techTable">
<columns>
<Column
visible="true"
vAlign="Middle"
width="15px" />
</columns>
<items>
<ColumnListItem>
<cells>
<core:Icon
visible="{ ???}"
src="sap-icon://customfont/moving"
size="2.1rem"
color="#14c6c9" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Panel>
</CustomListItem>
</List>
I have a model (example):
data: {
Stages: [{
FieldWorks: [{}, ....]
}, .....]
}
I hide my button (in my toolBar) by expression binding as you can see.
What is the best way to hide my Icon (in CustomListItem) by condition FieldWorks.length > 1
If you are using a JSON Model just add boolean property to your JSONModel to the FieldWorks entity and bind the visible property to it. Then one time you have to set it when data is loaded or created and that's it.
You can define a new property in your json Model under the FieldWorks property in order to bind the visibility of the icon.
you can use Object.defineProperty (SPEC MDN) to define your calculated new property.
I have just started with learning UI5 coding and I am not a pro in it.
I am trying to add a combo box in my search field to enhance the search option in my application, so I am using the table tag but whenever I try to insert the code:
<t:Table id="idoclist" selectionMode="MultiToggle" rows="{idoc_list_msg>/results}"
visibleRowCount="12" cellClick="onPress" sort="sortDeliveryDate"
enableCellFilter="{ui>/cellFilterOn}" ariaLabelledBy="title">
<t:headerToolbar>
<t:toolbar>
<Title text="IDOC Data" level="H1"/>
<t:ToolbarSpacer/>
<ComboBox id="filtercombo">
<core:Item key="Trkorr" text="IDOC Number"/>
<core:Item key="TrType" text="Created ON"/>
<core:Item key="As4text" text="IDOC Type"/>
<core:Item key="" text=""/>
</ComboBox>
<SearchField width="50%" search="onFilter" placeholder="Filter"/>
</t:toolbar>
</t:headerToolbar>
<!-- ... -->
I get error saying:
the aggregation node for control 'sap.ui.table.Table' is incorrect.
Can somebody please help me if I am missing on to something before this.
The headerToolbar is not a valid aggregation for sap.ui.table.Table. This means that you cannot use headerToolbar inside Table directly. Your next option would be to use the toolbar aggregation. But this has been deprecated since version 1.38 (refer to this document to know more about sap.ui.table.Table).
So you can use the extension aggregation to include your toolbar. I have modified your table with sap.m.Toolbar.
<t:Table id="idoclist" selectionMode="MultiToggle" rows="{idoc_list_msg>/results}"
visibleRowCount="12" cellClick="onPress" sort="sortDeliveryDate"
enableCellFilter="{ui>/cellFilterOn}" ariaLabelledBy="title">
<t:extension>
<Toolbar>
<Title text="IDOC Data" level="H1"/>
<ToolbarSpacer/>
<ComboBox id="filtercombo">
<core:Item key="Trkorr" text="IDOC Number"/>
<core:Item key="TrType" text="Created ON"/>
<core:Item key="As4text" text="IDOC Type"/>
<core:Item key="" text=""/>
</ComboBox>
<SearchField width="50%" search="onFilter" placeholder="Filter"/>
</Toolbar>
</t:extension>
</t:Table>
You are missing the content aggregation on your toolbar. It should look like this:
<t:Table id="idoclist" selectionMode="MultiToggle"
rows="{idoc_list_msg>/results}" visibleRowCount="12" cellClick="onPress"
sort="sortDeliveryDate" enableCellFilter="{ui>/cellFilterOn}" ariaLabelledBy="title">
<t:headerToolbar>
<t:toolbar>
<content>
<Title text="IDOC Data" level="H1"/>
<t:ToolbarSpacer/>
<ComboBox id="filtercombo">
<core:Item key="Trkorr" text="IDOC Number"/>
<core:Item key="TrType" text="Created ON"/>
<core:Item key="As4text" text="IDOC Type"/>
<core:Item key="" text=""/>
</ComboBox>
<SearchField width="50%" search="onFilter" placeholder="Filter"/>
</content>
</t:toolbar>
</t:headerToolbar>
<!-- ... -->
The sap.ui.core.Toolbar aggregation is now deprecated as of version 1.38 for sap.ui.table.Table so I would recommend using sap.m.Table on your view to look something like this:
<Table id="_yourTable">
<headerToolbar>
<Toolbar>
<content>
<Label text="Toolbar Label"></Label>
</content>
</Toolbar>
</headerToolbar>
<!-- ... -->
I downloaded this UI5 sample. After that i downloaded also the graph.json dataset from the example and tried to run it. It does not run and breaks off. I guess it's the layout.
<layoutAlgorithm>
<layout:LayeredLayout
mergeEdges="{settings>/mergeEdges}"
nodePlacement="{settings>/nodePlacement}"
nodeSpacing="{settings>/nodeSpacing}"/>
</layoutAlgorithm>
As soon as I use the ForceBasedLayout it works. But if I use the LayeredLayout instead I get an Exception.
I get the following error and the NetworkGraph remains busy:
ForceBasedLayout (this is working):
LayeredLayout (this is not working - this is what i want to use):
NetworkGraph.view.xml (with LayeredLayout):
<mvc:View
controllerName="sap.suite.ui.commons.sample.NetworkGraph.NetworkGraph"
xmlns="sap.suite.ui.commons.networkgraph"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:layout="sap.suite.ui.commons.networkgraph.layout"
xmlns:m="sap.m"
height="100%">
<l:FixFlex vertical="true">
<l:fixContent>
<m:OverflowToolbar>
<m:content>
<m:Select id="orientation" tooltip="Orientation" selectedKey="{settings>/orientation}">
<core:Item key="LeftRight" text="Left-Right"/>
<core:Item key="RightLeft" text="Right-Left"/>
<core:Item key="TopBottom" text="Top-Bottom"/>
</m:Select>
<m:Select id="nodePlacement" tooltip="Node placement" selectedKey="{settings>/nodePlacement}">
<core:Item key="BrandesKoepf" text="Brandes-Koepf"/>
<core:Item key="LinearSegments" text="Linear Segments"/>
<core:Item key="Simple" text="Simple"/>
</m:Select>
<m:Select id="arrowPosition" tooltip="Arrow position" selectedKey="{settings>/arrowPosition}">
<core:Item key="Start" text="Arrow Start"/>
<core:Item key="Middle" text="Arrow Middle"/>
<core:Item key="End" text="Arrow End"/>
</m:Select>
<m:Select id="arrowOrientation" tooltip="Arrow orientation"
selectedKey="{settings>/arrowOrientation}">
<core:Item key="ParentOf" text="Parent -> Child"/>
<core:Item key="ChildOf" text="Child -> Parent"/>
<core:Item key="None" text="Hidden"/>
</m:Select>
<m:Select id="mergeEdges" tooltip="Merge Edges" change="mergeChanged" selectedKey="0">
<core:Item key="0" text="Split edges"/>
<core:Item key="1" text="Merged edges"/>
</m:Select>
<m:Select id="nodeSpacing" tooltip="Node Spacing" selectedKey="55" change="spacingChanged">
<core:Item key="20" text="Node spacing (20)"/>
<core:Item key="40" text="Node spacing (40)"/>
<core:Item key="55" text="Node spacing (55)"/>
<core:Item key="80" text="Node spacing (80)"/>
<core:Item key="100" text="Node spacing (100)"/>
</m:Select>
</m:content>
</m:OverflowToolbar>
</l:fixContent>
<l:flexContent>
<m:FlexBox fitContainer="true" renderType="Bare" wrap="Wrap" id="graphWrapper">
<m:items>
<Graph
orientation="{settings>/orientation}"
nodes="{/nodes}"
lines="{/lines}"
groups="{/groups}"
id="graph">
<layoutData>
<m:FlexItemData growFactor="1" shrinkFactor="1" baseSize="0%" minWidth="300px"/>
</layoutData>
<layoutAlgorithm>
<layout:LayeredLayout
mergeEdges="{settings>/mergeEdges}"
nodePlacement="{settings>/nodePlacement}"
nodeSpacing="{settings>/nodeSpacing}"/>
</layoutAlgorithm>
<nodes>
<Node
key="{key}"
title="{title}"
icon="{icon}"
group="{group}"
attributes="{path:'attributes', templateShareable:true}"
shape="{shape}"
status="{status}">
<attributes>
<ElementAttribute
label="{label}"
value="{value}"/>
</attributes>
</Node>
</nodes>
<lines>
<Line arrowPosition="{settings>/arrowPosition}"
arrowOrientation="{settings>/arrowOrientation}"
from="{from}"
to="{to}"
status="{status}">
</Line>
</lines>
<groups>
<Group key="{key}"
title="{title}">
</Group>
</groups>
</Graph>
<GraphMap id="map" graph="graph">
<layoutData>
<m:FlexItemData minWidth="200px" maxWidth="25%" />
</layoutData>
</GraphMap>
</m:items>
</m:FlexBox>
</l:flexContent>
</l:FixFlex>
I can't find the problem in my code. The number of rows is always correct, but it only shows the values of the last object in the array of the binding. I'm using the correct aggregation <items> so that's not the issue. Maybe (I hope) I'm just overlooking something.
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Dialog title="{i18n>selectionTitle}" horizontalScrolling="false">
<beginButton>
<Button text="{i18n>closeSelectionButton}" press="handleCloseSelectedTrainings"/>
</beginButton>
<endButton>
<Button type="Accept" text="{i18n>submitSelectionButton}" press="handleSubmitSelectedTrainings"/>
</endButton>
<content>
<List noDataText="Empty" items="{selectedTrainings>/}" mode="Delete" delete="handleDeleteSelectionItem">
<items>
<CustomListItem >
<HBox>
<core:Icon size="2rem" src="{icon}" class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom"/>
<VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
<Text text="{Title}" />
<Label text="{Type} {= ${Begda} ? ${Begda}.toLocaleDateString() : '' }"/>
<HBox>
<CheckBox text="{i18n>selectionMgrApproved}" selected="{Approved}" />
</HBox>
</VBox>
</HBox>
</CustomListItem>
</items>
</List>
</content>
</Dialog>
You are using named model selectedTrainings for items bindings and you forgot to put a model name into CustomListItem elements. Put a model name into bindings like this:
<Text text="{selectedTrainings>Title}" />
<Input value="{binding}"/> works fine.
But if I use
<Select>
<core:Item key="{key}" text="{binding}" />
<core:Item key="1" text="O530" />
<core:Item key="2" text="O531" />
</Select>
It shows like
<Select>
<core:Item key="1" text="O530" />
<core:Item key="1" text="O530" />
<core:Item key="2" text="O531" />
</Select>
But what I want is
<Select>
<core:Item key="1" text="O530" /> (selected)
<core:Item key="2" text="O531" />
</Select>
What should I do ？
I tried to use setSelectedItem, but I used form.bindElement("/ProductSet('1')") in controller, I don't know how to get the {binding} out.
I wonder why have you used:
<Select>
<core:Item key="{key}" text="{binding}" /> <- This line of code?
<core:Item key="1" text="O530" />
<core:Item key="2" text="O531" />
</Select>
Anyways, this is how I will do it :
First my model which has the selected key :
var model = new sap.ui.model.json.JSONModel({
data: [
{
key:'2',
text:'text'
}]
});
Next, my sap.m.select in view : ( I know I have only 2 items for my select so hard code else I will use aggregation binding for sap.m.select) :
<Select selectedKey="{key}" id='idSelect'>
<core:Item key="1" text="O530" />
<core:Item key="2" text="O531" />
</Select>
Here, selectedkey will set the key stored in my model.
Next, element binding from my JSON Model in controller :
this.getView().byId('idSelect').setModel(model).bindElement({
path: '/data/' + 0
});
and binding works properly. You can change the key in JSON model and corresponding key is selected in sap.m.Select.