Saving/Retrieving the Custom Fields Data of the SmartFilterBar with SmartVariant in FIORI

[former_member246153]

Issue

In my scenario i have a SmartFilter bar bound with an EntitySet in my Fiori application. I have enabled the SmartVariant for the SmartFilterBar. With that i have also added two custom fields to my SmartFilter bar. The values of the custom fields are bound to a local JsonModel. So while saving the variant my custom fields are getting ignored and it only saves the standard selection fields which are exposed in the CDS.

<smartFilterBar:SmartFilterBar id="smartFilterBar" useToolbar="false" smartVariant="VariantId"

	persistencyKey="SmartFilterPKey" entitySet="EntitySetName" enableBasicSearch="false">

<smartFilterBar:controlConfiguration>

    <smartFilterBar:ControlConfiguration key="Key1" visibleInAdvancedArea="true">

	<smartFilterBar:customControl>

            <Custom Filed1...

               value="{customFilterModel>/value1}">

        <smartFilterBar:customControl>

     </smartFilterBar:ControlConfiguration>

     </smartFilterBar:ControlConfiguration>

     <smartFilterBar:ControlConfiguration key="Key2" visibleInAdvancedArea="true">

         <smartFilterBar:customControl>

            <Custom Filed2..

               value="{customFilterModel>/value2}">

        <smartFilterBar:customControl>

     </smartFilterBar:ControlConfiguration>

</smartFilterBar:controlConfiguration>

</smartFilterBar>

 

Solution

The SmartFilterBar has two events that can be used to save the custom fields to the selected smart variant

• beforeVariantFetch


• afterVariantLoad

<smartFilterBar:SmartFilterBar id="smartFilterBar" useToolbar="false" smartVariant="VariantId"

	persistencyKey="SmartFilterPKey" entitySet="EntitySetName" enableBasicSearch="false"

        beforeVariantFetch="onBeforeVariantFetch" afterVariantLoad="onAfterVariantLoad">

<smartFilterBar:controlConfiguration>

    <smartFilterBar:ControlConfiguration key="Key1" visibleInAdvancedArea="true">

	<smartFilterBar:customControl>

            <Custom Filed1...

               value="{customFilterModel>/value1}">

        <smartFilterBar:customControl>

     </smartFilterBar:ControlConfiguration>

     </smartFilterBar:ControlConfiguration>

     <smartFilterBar:ControlConfiguration key="Key2" visibleInAdvancedArea="true">

         <smartFilterBar:customControl>

            <Custom Filed2..

               value="{customFilterModel>/value2}">

        <smartFilterBar:customControl>

     </smartFilterBar:ControlConfiguration>

</smartFilterBar:controlConfiguration>

</smartFilterBar>

beforeVarientSave

This event is fired before a variant is saved. The event can be used to adapt the data of the custom filters, which will be saved as variant later.

onBeforeVariantFetch: function () {

	let customFiltersObject = this.getModel("customFilterModel").getData();

	this.byId("smartFilterBar").setFilterData({

		_CUSTOM: customFiltersObject

	});

}

So here we are getting custom fields data form the customFilterModel and setting this data with the property _CUSTOM to FilterData property of the SmartFilterBar. So these Custom Fields data will be retained while saving the variant.

afterVariantLoad

This event is fired after a variant has been loaded and applied to the FilterBar. The event can be used to adapt custom filters with data from the variant.

onAfterVariantLoad: function () {

    let filterData = this.byId("smartFilterBar").getFilterData();

    this.getModel("customFilterModel").setData(filterData._CUSTOM);	

}

Here while loading the variant we are using this event handler to get the SmartFilterBar FilterData and set the _CUSTOM property values to the customFilterModel which is bound to the custom Fields in the UI.

 

Conclusion

With the help of these event handlers we are able to save and retrieve the custom filed values of the SmartFilterBar along with the SmartVariant.

Please feel free to ask your questions or post your comments.

Thanks.