Skip to Content
0

Change layout of FilterBar having Variant and SearchField in the FilterBarToolbar

Jan 18, 2017 at 01:38 PM

69

avatar image

Hello guys,

Please help me regarding the following topic.

I have an UI5 application using rest services, but no OData.

I am using the FilterBar with the VariantManagement and a SearchField.

When displaying the application the Variant and SearchField will be displayed below the FilterBar.

However the requirement is to have these both within the FilterBarToolbar, which is the case when using the SmartFilterBar with OData.

See view1.xml

<fb:FilterBar  
id="filterBar" 
reset="onReset" 
search="onSearch"
clear="onClear" 
showRestoreButton="true" 
showClearButton="true"  >
	
		<v:VariantManagement id="filterBarVariantManagement" select="onSelect" save="onSave" enabled="true" manage="onManage" showExecuteOnSelection="true" showShare="true">
			<v:variantItems>
				<v:VariantItem text="My Global Variant" key="MGV" global="true" readOnly="false" lifecyclePackage="$TMP"/>
				<v:VariantItem text="My Better Variant" key="MBV" global="false" readOnly="false" lifecyclePackage="$TMP"/>
			</v:variantItems>
		</v:VariantManagement>
		
		<SearchField id="filterBarSearchField" showSearchButton="true" search="onSearch" ></SearchField>
		
		<fb:filterItems>
			
			<fb:FilterItem id="F1" name="F1" label="Filter1" >
				<fb:control>
					<Input type="Text" change="onChange"/>
				</fb:control>				
			</fb:FilterItem> 
			.......

What i now did is within the controller event: onAfterRendering I used JQuery to put the Variant container and SearchField container before the FilterBarToolbar.

view1.controller

onAfterRendering: function() {
	$("#__component0---dealRequestList--filterBarVariantManagement").parent().insertBefore(".sapUiCompFilterBarToolbar");
	$("#__component0---dealRequestList--filterBarSearchField").parent().insertBefore(".sapUiCompFilterBarToolbar");
}

This works fine when starting the application.

However when pressing the button "Hide Filter Bar" and after "Show Filter Bar" the FilterBar will be removed and added to the nodes. This leads to the situation that the Variant and SearchField are displayed again below the whole FilterBar.

What can i do to move (Variant and SearchField) again inside the FilterBarToolbar ?

When trying to react on changes of the FilterBar my JQuery manipulations will be overriden by the sap-ui-core. I guess my dom manipulation are to early in this case.

Please help me.

BR,

Philipp

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

0 Answers