Smart Filter Bar

TypeAhead is not working. When I start typing, no http requests are sent.

Take a look at the $metadata document and make sure there are ValueHelp annotations for this field. The Target attribute must look like this: {Namespace}.{EntityName}/{FieldName}.

Make sure that the namespace in the Target attribute is correct.

Example of a ValueHelp annotation:

<Annotations Target="FAP_VENDOR_LINE_ITEMS_SRV.Item/Creditor" xmlns="http://docs.oasis-open.org/odata/ns/edm">
	<Annotation Term="com.sap.vocabularies.Common.v1.ValueList">
		<Record>
			<PropertyValue Property="CollectionPath" String="Vendors"/>
			<PropertyValue Property="SearchSupported" Bool="true"/>
			<PropertyValue Property="Parameters">
				<Collection>
					<Record Type="com.sap.vocabularies.Common.v1.ValueListParameterInOut">
						<PropertyValue Property="LocalDataProperty" PropertyPath="Creditor"/>
						<PropertyValue Property="ValueListProperty" String="VendorID"/>
					</Record>
				</Collection>
			</PropertyValue>
		</Record>
	</Annotation>
	</Annotations>

I have a field Entered on that’s an Input field. It should be a DatePicker.

Take a look at the $metadata document and make sure that the property is of type Edm.DateTime and the property is annotated with sap:display-format="Date".

I tried to set default values for a filter field in the control configuration in JavaScript. These default values don’t have any effect.

The ControlConfiguration and GroupConfiguration are intended to be used to add static configuration in an XML view.

There are three properties that can be set dynamically; these are visible, label, and visibleInAdvancedArea.

All other properties and aggregations are not dynamic. This means they have to be set statically in the XML view, and not dynamically by JavaScript. Any changes made in the ControlConfiguration or GroupConfiguration after the initialize event was fired do not have any effect.

If you have to set values of a filter field dynamically in JavaScript, you can use the setFilterData API.

The value help dialog for a filter field contains a table with multiple columns. How can I change the order of these columns?

The order of the columns is specified in the OData $metadata document in the ValueHelp annotation.

There is one column for each ValueListParameterInOut or ValueListParameterOut in the corresponding annotation.

The order of the columns is the same as the order of the InOut/Out parameters in the $metadata document. You can’t use configuration in the XML view to change this order. If you want to change the order, you can do it in the OData $metadata document.

I have added custom controls to the SmartFilterBar. If I save a variant and load it again the custom fields are initial. What do I have to do to enable custom fields for variant management?

In general, custom fields cannot be handled automatically by the SmartFilterBar. You have to implement this in the view’s controller. The SmartFilterBar offers two events that can be used to enable custom fields for variant management:

• beforeVariantSave
• afterVariantLoad

You can use the beforeVariantSave event to update the model of the SmartFilterBar with the values from the custom fields. Every value within the model is stored as a variant. The values of custom fields should be stored under the property _CUSTOM, for example, oSmartFilter.setFilterData({_ CUSTOM :{field1:"abc", field2:"123"}});

You can use the event afterVariantLoad to get the values from the model and use them to update the custom filter fields, for example:

oData = oSmartFilter.getFilterData();
var oCustomFieldData = oData["_CUSTOM"];
oCustomField1.setValue(oCustomFieldData.field1);

If both events are handled in this way, custom fields are enabled for variant management.

How can I set initial or default data in the SmartFilterBar control?

Static data can be set in the SmartFilterBar using the ControlConfiguration in the view.xml:

<smartFilterBar:SmartFilterBar id="smartFilterBar" ...>
… 
<smartFilterBar:controlConfiguration>
              <smartFilterBar:ControlConfiguration key="CompanyCode" visible="true" index="3"…>
                     <smartFilterBar:defaultFilterValues>
                            <smartFilterBar:SelectOption low="0001">
                            </smartFilterBar:SelectOption>
                     </smartFilterBar:defaultFilterValues>
              </smartFilterBar:ControlConfiguration>

How can I set dynamic data as initial or default data in the SmartFilterBar control, for example, for navigation parameters?

Dynamic data can be set as initial or default in the SmartFilterBar by registering to the initialise event and setting JSON/JSONstring using the setFilterData API in your controller.js.

…
onInitSmartFilter: function(oEvent) { //Assuming that this is the eventhandler registered for the "initialise" event of the SmartFilterBar control in your view.xml
              var    oSmartFilter = oView.byId("smartFilterBar");
              var oTodaysDate = new Date();
              //Sample Data
              var oJSONData = {
                           Company: {
                                  items: [ //MultiInput fields with filter-restriction="multi-value" (Ex: shown as Tokens based on control type)
                                         {
                                            key:"0001",
                                            text:"SAP SE" //Display text on the token --> not used for filtering!
                                   },
                                   {
                                      key:"0002",
                                      text:"SAP XYZ"
                                  }
                                   ]
                           },                         
                           SomeDate: { //DateRange field with filter-restriction="interval"
                                  low: oTodaysDate, //Date fields require JavaScript Date objects!
                                  high: oTodaysDate
                           }, 
                           YearInterval: {
                                  low: "2000-2014" //simple input field with filter-restriction="interval" --> text separated by a single "-"
                           },
                           Ledger:"0L" //Single-value field --> Plain input
              };
              
              oSmartFilter.setFilterData(oJSONData); //Data will be updated with existing data in the SmartFilter
       },
…

How does the SmartFilterBar determine if a filter has a value assigned to it?