Custom Control in Page Variant (Fiori Elements)

[mvoros]

Hi,

I have an old freestyle UI5 app that I am trying to convert to a Fiori Elements - List/Object Page (oData v4) app. The app contains a filter bar and a custom UI5 control that shows the data retrieved from backend. I managed to re-implement this setup in Fiori elements using the method described here.

https://sapui5.hana.ondemand.com/test-resources/sap/fe/core/fpmExplorer/index.html#/customElements/C...

So my Fiori Elements app has two views below the filter bar: a table view and a view with my custom control. Users can change the settings of the custom control. Up to this point, this all works.

My struggle is that I want the configuration of my custom control to be part of the page variant. When user changes the settings, I should be able to flag the page variant as modified. When a page variant is saved, my control should provide a JSON payload that gets saved as part of the page variant. When page variant is applied, a method of my control should be called so the control can be adjusted. 

As I mentioned, I have this in the first version of the app that uses sap.ui.comp controls. The trick that I am using there is that I store my control settings in the variant for the smart filter bar and I can simply call method currentVariantSetModified of the smart variant management control. This has been working for some time.

Sadly, I can't reproduce this approach as the controls used in the Fiori Elements are different (not sap.ui.comp) and I can't find suitable methods/events.

I made the control configuration to be part of the app state but this does not seem to be related to variant management. As far as I understand, the app state is only used during navigation. I also looked at sap.m.p13n.Engine but the dialog panels provided by this control do not fit my configuration settings. 

I can see that if I get a reference to page variant management via ID, I get object of type sap.ui.fl.variants.VariantManagement. I can see that it has a private aggregation that contains the standard smart variant. So that would give me access to setModified method. but this is really hacky and I still don't know where to store my configuration.

Is there an easy way to include own UI control settings into the page variant? Any guidenance in this area will be appreciated.

[mvoros · Accepted solution]

Here's an update from me. I managed to make it work with p13n Engine but I am not happy with the solution. I am confused by restrictions that Engine provides. The following repo provided all required info.

https://github.com/SAP-samples/ui5-p13n-tutorial/tree/main

The solution is:

- extend UI control definition in XML with the following part:

 sap.ui.fl:flexibility="sap/m/flexibility/EngineFlex"

 - register control with p13n engine. Here I don't provide any list of items with metadata helper as I don't want to use the dialog provided by the engine. It seems to work fine. I also have to use Sort controller. For some reason I could not make it work with SelectController

const oHelper = new MetadataHelper([]);
Engine.getInstance().register(oCalendar, {
			                helper: oHelper,
					controller: {
						Calendar: new SortController({ control: oCalendar })
					}
				});

 - when I close my own settings dialog, I use method applyState to set the new configuration. Nothing interesting here.

- I listen to stateChange event so I can adjust my control when there is a change in the state. Again, nothing interesting.

This all works out of the box with page variant that is present in the Fiori Elements app. That is super nice.

What I don't like about API provided? There does not seem to be a way how to store more settings in the state. In this particular case, I want to store just two properties. Hence SortController kinda works for me as I store the properties as two "sort" properties. But if I have some boolean or numerical settings, how can I make these settings to be part of the variant? Some workarounds with the provided controllers will be ugly.

Ideally, p13n engine should provide an easy option where consumer of API provides own settings dialog and can store any JSON payload as settings for the control.

Any one with better knowledge or more experience in this area?

[mvoros · Accepted solution]

Maybe a question for UI developers (do they read this forum?). Looking at the code, it seems like methods readXConfig and enhanceXConfig allows to store random config on the control. Sadly, the methods are not released. Is there a plan to release these methods so UI control developers can use them to store custom state?