I've provided a quick example, but how do I select a default time (select item) as 05:00 for example? Please not that I've needed to capture time with the select (and not the timepicker) because our customer wanted to force 15 minute intervals).
<Select id="openingTime" selectedKey="{SearchResults>startTime1}"
valueFormat="HH:mm" displayFormat="HH:mm"
change="onTimeChangedOpening"
visible="{SearchResults>isOpen}" valueState="{SearchResults>startTimeValid}"
placeholder="Enter Opening Time">
<core:ListItem key="" text="Select"/>
<core:Item key="00:00" text="00:00"/>
<core:Item key="00:15" text="00:15"/>
<core:Item key="00:30" text="00:30"/>
<core:Item key="00:45" text="00:45"/>
<core:Item key="01:00" text="01:00"/>
<core:Item key="01:15" text="01:15"/>
<core:Item key="01:30" text="01:30"/>
<core:Item key="01:45" text="01:45"/>
<core:Item key="02:00" text="02:00"/>
<core:Item key="02:15" text="02:15"/>
<core:Item key="02:30" text="02:30"/>
<core:Item key="02:45" text="02:45"/>
<core:Item key="03:00" text="03:00"/>
<core:Item key="03:15" text="03:15"/>
<core:Item key="03:30" text="03:30"/>
<core:Item key="03:45" text="03:45"/>
<core:Item key="04:00" text="04:00"/>
<core:Item key="04:15" text="04:15"/>
<core:Item key="04:30" text="04:30"/>
<core:Item key="04:45" text="04:45"/>
You can achieve it by setting:
selectedKey = "05:00"
You also need to add this to:
<core:Item key="05:00" text="05:00"/>
Here is jsbin example. You can changed selected value in the line:
oSelect.setSelectedKey("B");
We can set default key by below code
<Select
forceSelection="true"
selectedKey="{SearchResults/0/startTime1}"
items="{
path: '/SearchResults'
}">
<core:Item key="{/startTime1}" text="{startTime1}" />
</Select>
Related
I developed a SAPUI5 page with a list of items and a search feature using the control sap.ui.comp.filterbar.FilterBar. The framework defines automatically a text for the button which triggers the search and also for a placeholder that appears as default in the search field.
I would like to customize this in order to have better control of its content and a better multi language management with i18n settings. How can I do this customization? I looked at the documentation but it does not mention a property which I can easily make this change.
Follows a piece of code that implements this part of the View
<!-- ... -->
<fb:FilterBar xmlns:fb="sap.ui.comp.filterbar" xmlns="sap.m" xmlns:core="sap.ui.core"
id="filterBar"
search=".onSearch"
showRestoreButton="false"
showClearButton="true"
showFilterConfiguration="false"
>
<fb:filterGroupItems>
<fb:FilterGroupItem
groupName="__$INTERNAL$"
name="A"
label="{i18n>workstreamsOptions}"
partOfCurrentVariant="true"
visibleInFilterBar="true"
>
<fb:control>
<ComboBox id="WorkStreamCombobox" change=".onChange">
<core:Item key="001" text="{i18n>ws1}" />
<core:Item key="002" text="{i18n>ws2}" />
<core:Item key="003" text="{i18n>ws3}" />
<core:Item key="004" text="{i18n>ws4}" />
<core:Item key="005" text="{i18n>ws5}" />
<core:Item key="006" text="{i18n>ws6}" />
<core:Item key="007" text="{i18n>ws7}" />
<core:Item key="008" text="{i18n>ws8}" />
<core:Item key="009" text="{i18n>ws9}" />
</ComboBox>
</fb:control>
</fb:FilterGroupItem>
<fb:FilterGroupItem
groupName="__$INTERNAL$"
name="B"
label="{i18n>typeOfInterface}"
labelTooltip="Tooltip Example"
partOfCurrentVariant="true"
visibleInFilterBar="true"
>
<fb:control>
<ComboBox id="TypeCombobox" change=".onChange">
<core:Item key="001" text="{i18n>typeInbound}" />
<core:Item key="002" text="{i18n>typeOutbound}" />
<core:Item key="003" text="{i18n>typeNotClassified}" />
</ComboBox>
</fb:control>
</fb:FilterGroupItem>
</fb:filterGroupItems>
</fb:FilterBar>
<!-- ... -->
If I understood it correctly you are looking to overwrite and customize the placeholder for the default search ..
It can be controlled by the following code.
onToggleSearchField: function (oEvent) {
var oSearchField = this.oFilterBar.getBasicSearch();
var oBasicSearch;
if (!oSearchField) {
oBasicSearch = new SearchField({
showSearchButton: false,
placeholder:"Custom Placeholder"
});
} else {
oSearchField = null;
}
this.oFilterBar.setBasicSearch(oBasicSearch);
oBasicSearch.attachBrowserEvent("keyup", function (e) {
if (e.which === 13) {
this.onSearch();
}
}.bind(this)
);
},
and Initialize the onToggleSearchField() in your onInit() function.
Customizing the same via i18n... Set your text in your i18n and control the placeholder accordingly using the following logic.
this.getView().getModel('i18n').getResourceBundle().getText(
'Your PlaceHolder Name from i18n')
Thanks,
Abhi
I am trying to build an application that has table#1 with clickable items and display data in another view with table#2 depending on which item you clicked in the first table.
This is some weird behaviour and I'll try to explain the problem the best I can:
The application works fine the first time you use it - I click an Item in table#1 -> it navigates to the view with table#2 and displays the dependent data. Everything works perfectly fine.
Now if i navigate back to table#1 and click another item, it loads table#2 but without any data.
The third time (and every time after that) I navigate back and click an item in table #1 and table#2 is supposed to load I get the error message :
"Error: Missing template or factory function for aggregation items of Element sap.m.Table"
I have tried reloading the item aggregation, destroying the template on navigation, reloading model data and setting the templateSharable flag to true / false but nothing helped in any way.
I'm posting the relevant code for the view with table #2 below
My XML Code:
<f:SimpleForm id="simpleform" editable="true" layout="ResponsiveGridLayout">
<f:content>
<semantic:SemanticPage id="page" headerPinnable="false" toggleHeaderOnTitleClick="false" >
<semantic:content id="posContent">
<Table
id="rkDetailTable"
noDataText="{i18n>tableNoDataText}"
>
<columns>
<Column>
<Text text="Pos ID"/>
</Column>
<Column>
<Text text="{i18n>Art_RkDetail}" />
</Column>
<Column>
<Text text="{i18n>Betrag_RkDetail}"/>
</Column>
</columns>
<items>
<ColumnListItem id="rkDetailTableTemplate" type="Navigation" press="onDetail">
<cells>
<ObjectIdentifier title="{RkposId}" />
<Text text="{RksatzId}" />
<ObjectNumber number="{RkposBetrag}" unit="EUR" />
</cells>
</ColumnListItem>
</items>
</Table>
</semantic:content>
</semantic:SemanticPage>
</f:content>
</f:SimpleForm>
The corresponding controller:
onInit: function () {
this.getRouter().getRoute("RkItemDetail").attachMatched(this.onRouteMatched, this);
},
onRouteMatched: function (oEvent) {
var oArguments = oEvent.getParameter("arguments");
var RkId = oArguments.RkId;
var sBindingPathAbrechnung = "/AbrechnungSet(" + RkId + (")");
this.getView().byId("simpleform").bindElement(sBindingPathAbrechnung);
var sBindingPathPosition = "/AbrechnungSet(" + RkId + (")/ToPos");
this.byId("rkDetailTable").bindItems({
path: sBindingPathPosition,
template: this.byId("rkDetailTableTemplate"),
templateShareable: true
});
}
Disregard the element binding, it is used for something else in that view.
Thank you!
In you table change the <items> aggregation to <dependents>.
<Table
id="rkDetailTable"
noDataText="{i18n>tableNoDataText}"
>
<columns>
...
</columns>
<dependents>
<ColumnListItem id="rkDetailTableTemplate" type="Navigation" press="onDetail">
...
</ColumnListItem>
</dependents>
</Table>
I have been working on dialog in fragment , for a sample :
test.fragment.xml :
<core:FragmentDefinition
xmlns="sap.m"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<Dialog title="P Selection" id='TestDialog1'>
<content>
<f:SimpleForm id="SimpleFormDisplay354"
minWidth="1024"
maxContainerCols="2"
editable="false"
layout="ResponsiveGridLayout"
title=""
labelSpanL="3"
labelSpanM="3"
emptySpanL="4"
emptySpanM="4"
columnsL="1"
columnsM="1">
<f:content>
<Label text="DC" />
<Select id='Test1DCId'
forceSelection="false"
items="{
path: '/P/DC',
sorter: { path: 'Name' }
}">
<core:Item key="{key}" text="{value}" />
</Select>
<Label text="Quantity" />
<Select id='Test1Quantity'
forceSelection="false"
items="{
path: '/P/Quantity',
sorter: { path: 'Name' }
}">
<core:Item key="{key}" text="{value}" />
</Select>
</f:content>
</f:SimpleForm>
</content>
<buttons>
<Button text="OK" press="onTest1OkButtonPress" />
</buttons>
<buttons>
<Button text="Cancel" press="onTest1CancelButtonPress" />
</buttons>
</Dialog>
</core:FragmentDefinition>
In test.view.xml:
The view part when I want to open a dialog is as:
<m:Select id="Gu" items="{/Gu/GList}" change="onTestPress">
<c:Item key="{key}" text="{value}" />
<m:layoutData>
<l:GridData span="L2 M2 S2"/>
</m:layoutData>
</m:Select>
In test.Controller.js:
onTestPress: function () {
this.ADD = 'Yes';
if (!this.byId("TestDialog1")) {
this._oDialog = sap.ui.xmlfragment("test", this);
this.getView().addDependent(this._oDialog);
}
this._oDialog.open();
},
here in similar way may I how can I use multiple dialogs in the same fragment ? Is this possible ?
I have tried as giving another dialog with different ID TestDialog2 ,
And in view some test button and on press , i need to open a Dialog and i tried as:
onTestButtonPress: function () {
this.ADD = 'Yes';
if (!this.byId("TestDialog2")) {
this._oDialog1 = sap.ui.xmlfragment("test1", this);
this.getView().addDependent(this._oDialog1);
}
this._oDialog1.open();
},
But this doesn't work as expected also Throws error Error: Error: adding element with duplicate id.....
I have searched Doc's and many examples but i have been stuck finding an example which shows this use case......
Any help or a sample or a guiding link is much appreciated , TIA
I'm trying to implement filters using SAPUI5 FilterBar. I want to add a field which works like a dropdown filter only when you type something in it. When you put the cursor, it should not show any results, but as you start typing something, the matching results should show up in the dropdown.
Here is a working example: Plunker
You could use a Input object in the filterGroupItems aggregation of the FilterBar control.
Note: The filterItems aggregation is deprecated as of version 1.48
<fb:FilterBar id="filterBar">
<fb:filterGroupItems>
<fb:FilterGroupItem
groupName="GroupExample"
name="regionGroup"
label="Example"
visibleInFilterBar="true">
<fb:control>
<Input showSuggestion="true">
<suggestionItems>
<core:Item key="001" text="Russia"/>
<core:Item key="002" text="America"/>
<core:Item key="003" text="Australia"/>
<core:Item key="004" text="Germany"/>
</suggestionItems>
</Input>
</fb:control>
</fb:FilterGroupItem>
</fb:filterGroupItems>
</fb:FilterBar>
Which produces:
Be sure to add the visibleInFilterBar="true" attribute if you want your input field to be visible without having to add it in the Filters prompt.
If you want to add the Input items dynamically, add an aggregation binding to the <items>.
To do that, change the Input control as follows:
<Input suggestionItems="{path: '/dropdownData'}" showSuggestion="true">
<suggestionItems>
<core:Item key="{key}" text="{text}"/>
</suggestionItems>
</Input>
And set the model according to your datasource (here it's a JSONModel) in the controller:
onInit: function() {
this.oModel = new JSONModel("/data.json");
var oView = this.getView();
oView.setModel(this.oModel);
}
<m:Table id="tableId"
inset="false"
mode="MultiSelect"
width = "100%"
fixedLayout="false"
border-collapse="collapse"
items="{
path: 'jsonViewModel>/results',
sorter: {
path: 'ProductId'
}
}">
<columns>
<Column
minScreenWidth="Desktop"
demandPopin="true">
<Text text="Product No" />
</Column>
<Column
minScreenWidth="Desktop"
demandPopin="true"
hAlign="Left">
<Text text="Model" />
</Column>...
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier
title="{jsonViewModel>ProductId}"/>
<Select id="selectId"
items="{
path: '/ModelList',
sorter: { path: 'Name' }
}">
<core:Item key="{modelId}" text="{Name}" />
</Select>...
</cells>
</ColumnListItem>
</items>
</Table>
First I have a jsonViewModel which is holding Products JSON array and also there is a ModelList service which gives me the list of models. So I should be able to fill some inputs(I didn't show other inputs cause I can retrive their values) and select model of products. But if I have 5 products I also have 5 select elements and I can't retrieve the select item for each rows(for each products). For example I can't retrieve the value with these codes in controller:
var oSelect = this.getView().byId("selectId");
var selectedItemObject = oSelect.getSelectedItem().getBindingContext().getObject();
var selectedModelName = selectedItemObject.Name;
Cause I have 5 select elements indeed and with these codes I can't retrieve every selected item object. Any help would be appreciated.
Cant we go through every row and then fetch the select control and then fetch the selectedItem? I mean,
var aItems = this.getView().byId("tableId").getItems();
for(var i =0;i<aItems.length;i++){
var aCells = aItems[i].getCells();
// I know select is at 0th cell, so I can use aCells[0].
var rowSelectedKey = aCells[0].getSelectedItem().getKey();
// once you have the selcetedKey, you can save them in a local array or // model and after the loop, you can work with them
}