Use free-style code to mimic the standard value help

In the freestyle SAPUI5 application, value help is always a common requirement. The value help is composited with a filter and table in a dialog.
If you compare the demo in the demo kit and the standard value help generated by the Fiori Element you can see there is a big difference.
Value Help Dialog:

Value help generated by Fiori Element.

In the standard value help, there is no footer in the dialogue. and there is no header tab like “define condition”. Personally, I like the clean layout.
So, according to the standard value help layout, it seems that if we want to mimic the standard value help we just need to add the smart future and smart table in a dialog and use the fixFlex control to separate them.
There is the example code:

<core:FragmentDefinition xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout"
	xmlns:u="sap.ui.unified" xmlns:smartTable="sap.ui.comp.smarttable" xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
	xmlns:f="sap.f">
	<Dialog id="referenceSalesContractDialog" showHeader="ture" draggable="true" enableScrolling="false"
		resizable="true" contentHeight="90%" contentWidth="93%">
		<customHeader>
			<Bar id="barId">
				<contentLeft>
					<Title text="" />
				</contentLeft>
			</Bar>
		</customHeader>
		<Page showHeader="false" showFooter="false" enableScrolling="false">
			<content>
				<l:FixFlex minFlexSize="20">
					<l:fixContent>
						<smartFilterBar:SmartFilterBar filterBarExpanded="false" expandAdvancedArea="false"
							enableBasicSearch="true" entitySet="">
							<smartFilterBar:layoutData>
								<FlexItemData shrinkFactor="0" />
							</smartFilterBar:layoutData>
						</smartFilterBar:SmartFilterBar>
					</l:fixContent>
					<l:flexContent>
						<smartTable:SmartTable tableType="ResponsiveTable" class="sapUiSmallMarginBeginEnd"
							demandPopin="true" enableAutoColumnWidth="true" useVariantManagement="false" header="Items"
							enableExport="false" showRowCount="true" entitySet="">
							<smartTable:layoutData>
								<FlexItemData growFactor="1" baseSize="0%" />
							</smartTable:layoutData>
							<Table>
								<columns>
								</columns>
								<items>
									<ColumnListItem type="Active" press="">
									</ColumnListItem>
								</items>
							</Table>
						</smartTable:SmartTable>
					</l:flexContent>
				</l:FixFlex>
			</content>
		</Page>
		<endButton>
			<Button text="Cancel" press="" />
		</endButton>
	</Dialog>
</core:FragmentDefinition>

And there are two points that need your attention.

1. Need to add a page in the dialog, otherwise, there will be an issue. I guess this is caused by the scroll bar since many controllers have their own scroll bar. So we need to add a page with the property enableScrolling=”false” to avoid the conflict about many scroll bars.
2. There is a monetary property for the Fixflex controller, if you want to enable the scroll bar in the flex content you need to add the property for the controller minFlexSize=”20″.