Fiori Elements List Report Filter Bar update mode

[gregorw]

Hello SAP Fiori Experts,

the post of armin.sproll on Fiori Elements List Report navigation using filter parameter helped me to pass a parameter from the SAP Fiori Launchpad Tile to the Fiori Elements List Report. But now I face the next challenge. I want to do what the SAP Fiori Design Guidelines for the List Report suggest for the Filter Bar and execute the search filtered with the provided parameter directly. But I do not find any documentation on how I can influence the update mode so I can get the recommended live update mode.

Hope someone has already solved this. Perhaps jocelyn.dart?

CU
Gregor

[florian_halder]

Hi all,

since the last answers on the subject are a few years old, is there another approach to this in the meantime, using RAP/Annotations at the backend?

Thanks in advance

Florian

[MaxFou · Accepted solution]

Hi Gregor,

I think you can add the code below to force the option "Execute on select = true" by default for the Standard variant for all the users:

sap.ui.controller("myApp.ext.controller.ListReportExt", {
	onInit: function() {
		var oMySmartFilterTab = this.getView().byId("listReportFilter");
		oMySmartFilterTab.addAggregation("customData",
			new sap.ui.core.CustomData({
				key: "executeStandardVariantOnSelect",
				value: true
			}));
	}
});<br>

If you test it with a user which has not already personalized the variant Standard, it must work.

For information, this parameter "executeStandardVariantOnSelect" will be read in method SmartFilterBar.prototype._initializeVariantManagement

var bValue = this._checkHasValueData(this.data("executeStandardVariantOnSelect"));
if (bValue) {
	this._oSmartVariantManagement._executeOnSelectForStandardVariantByXML(bValue);
}

In the following methods of VariantManagement, framework will check if the user changed the variant Standard, if not, it will use our default value:

VariantManagement.prototype._executeOnSelectForStandardVariantByXML = function(bSelect) {
	this.bExecuteOnSelectForStandardViaXML = bSelect;
};

VariantManagement.prototype._executeOnSelectForStandardVariantByUser = function(bSelect) {
	this.bExecuteOnSelectForStandardByUser = bSelect;
};

VariantManagement.prototype.getExecuteOnSelectForStandardVariant = function() {
	if (this.getSupportExecuteOnSelectOnSandardVariant()) {
		if (this.bExecuteOnSelectForStandardByUser !== null) {
			return this.bExecuteOnSelectForStandardByUser;
		}
	}
	return this.bExecuteOnSelectForStandardViaXML;
};<br>

I tried to add the parameter "executeStandardVariantOnSelect = true" directly in the Annotation file but without success so far but maybe it's possible...

Max

[gregorw · Accepted solution]

Hi Max,

thank you for the great input. "executeStandardVariantOnSelect" made the trick. Now up to the next challenges.

Best regards
Gregor

[former_member306541 · Accepted solution]

Hi Max, hi Gregor,

thanks for the code snippets and your explanations. The above code with adding CustomData to the SmartFilterBar seems to work with liveMode = false, only. If liveMode is set true, it does not apply the search on init. The only way, I got this to work, is to call the search-method on the SmartFilterBar after rendering. Can you approve this?

Best regards,

Christian.

[MaxFou]

Hi Gregor,

Not sure if this is what you are looking for but you could try something like this:
Add a controller extension in the manifest.json:

"sap.ui5": {
		"extends": {
			"extensions": {
				"sap.ui.controllerExtensions": {
					"sap.suite.ui.generic.template.ListReport.view.ListReport": {
						"controllerName": "myApp.ext.controller.ListReportExt"
					}
				}
			}
		},

Inside the extended controller, you can execute the search:

sap.ui.controller("myApp.ext.controller.ListReportExt", {
	onAfterRendering: function() {
		//Get my filter tab control
		var oMySmartFilterTab = this.getView().byId("listReportFilter");
		//Find the filter control
		var oMySmartFilter = oMySmartFilterTab.getAllFilterItems().find(function(oElement) {
			return oElement.getProperty("name") === "MyField";
		}).getControl();
		// Add a default value to the filter control
		oMySmartFilter.setTokens([new sap.m.Token({
			key: "MY_VALUE",
			text: "=MY_VALUE"
		})]);
		// Execute the search
		oMySmartFilterTab.search();
	}
});

I added a default value in the Filter but in your case, from my understanding, it's already pre-filled by the Intent parameter.

Max

[gregorw]

Hi Max,

the parameter that should be searched for is already correctly passed from the Fiori Launchpad (SCP Portal Service). I've tested now the suggestion from db48526ccb71414183a64aa46e31e784 and used the setLiveMode function:

sap.ui.controller("TestCDS.ext.controller.ListReportExt", {
	onInit: function() {
		var oMySmartFilterBar = this.getView().byId("listReportFilter");
		var liveMode = oMySmartFilterBar.getLiveMode();
		if(!liveMode) {
			oMySmartFilterBar.setLiveMode(true);
		}
	}
});

That works fine when I'm in the app and change one of the fields in the filter bar. But when the app is launched from the launchpad the search isn't executed automatically. Of course I could call search() when one of the fields is not empty, but I would expect this as the default behaviour.

Perhaps you have another idea.

Best regards
Gregor

[Jocelyn_Dart]

Hi folks

you can also use the UI Adaptation at designtime in the Web IDE to add this to the app.

Similar to https://blogs.sap.com/2017/08/27/fiori-elements-export-to-microsoft-excel-via-the-ui-adaptation-edit...

Rgds,

Jocelyn

[gregorw]

Hi jocelyn.dart,

thank you for pointing me to this option. Unfortunately I don't see this option in my Web IDE instances. Have you seen my comment?

CU
Gregor

[Jocelyn_Dart]

Hi Gregor, I've checked this on my own applications in the SAP Cloud Platform Full Stack Web IDE and the option is definitely still showing. I also checked the plug-ins but there's nothing that appears to be necessary to turn this on.

As per my blog have you used the context menu on the top folder of your app?

Is the app a Fiori elements app? i.e. created with the wizard template. If the option is not showing then I'm guessing the Web IDE is not recognizing your app as a Fiori elements app.

Suggest you double check that you meet the prerequisites for the UI Adaptation editor as per the Cloud Platform Web IDE documentation. You should be able to check the Project type is correct as per the documentation below.

https://help.sap.com/viewer/825270ffffe74d9f988a0f0066ad59f0/Cloud/en-US/b0dd2d4673894b0db825dabc178...

Rgds,

Jocelyn

[Joseph_BERTHE]

Hello Gregor,

Be sure that in your project setting you have the UI Adaptator :

Regards,

Joseph

[gregorw]

Hi Joseph,

thank you for this tip with the screenshot.

CU
Gregor

[raeijpe]

This works for me. Live mode enables and direct execution

        onInitSmartFilterBarExtension: function (oEvent) {
            var oSmartFilterBar = oEvent.getSource();
            var liveMode = oSmartFilterBar.getLiveMode();
            if (!liveMode) {
                oSmartFilterBar.setLiveMode(true);
                oSmartFilterBar.addEventDelegate({onAfterRendering:function(oEvent){
                    oEvent.srcControl.getBasicSearchControl().fireSearch()
                }})
            }
        },