如何在SAPUI5/SAP FIORI中不使用智能控件创建变式

Hey there! As a fellow Fiori developer who's been in your shoes, I totally get the frustration of wanting to add variant management to a custom filter set—since standard smart controls handle this out of the box, but custom components require a bit of extra work. Here's a step-by-step solution that doesn't force you to rebuild everything with smart controls:

1. Leverage the Standard VariantManagement Control #

You don't need smart controls to use Fiori's variant system—start by adding the sap.ui.comp.variants.VariantManagement control to your view. This is the core component that handles saving, loading, and managing variants, regardless of what other controls you're using.

2. Manually Serialize/Deserialize Filter States #

Since your filter components are custom (tree table, checkboxes, etc.), the variant control won't automatically pick up their values. You'll need to write simple logic to:

• Save variants: Collect all filter values when the user clicks "Save Variant"
• Load variants: Push saved values back into your filter components when a variant is selected

Example Controller Logic #

Here's a simplified snippet to show how this works:

// Handler for saving a new variant
onSaveVariant: function() {
    // Gather all filter parameters from your custom components
    const filterState = {
        treeSelectedKeys: this.byId("customTreeTable").getSelectedKeys(),
        filterCheckbox: this.byId("statusCheckbox").getSelected(),
        selectedRadio: this.byId("priorityRadioGroup").getSelectedButton().getKey(),
        searchQuery: this.byId("searchField").getValue(),
        inputText: this.byId("customInput").getValue(),
        dropdownKey: this.byId("categoryDropdown").getSelectedKey()
    };

    // Get the VariantManagement control instance
    const variantManager = this.byId("variantMgr");
    // Save the variant with your custom filter state attached
    variantManager.saveVariant({ customData: filterState });
},

// Handler for when a variant is selected
onVariantSelected: function(oEvent) {
    const selectedVariant = oEvent.getParameter("variant");
    const savedFilterState = selectedVariant.getCustomData();

    if (savedFilterState) {
        // Restore each filter component's state
        this.byId("customTreeTable").setSelectedKeys(savedFilterState.treeSelectedKeys);
        this.byId("statusCheckbox").setSelected(savedFilterState.filterCheckbox);
        
        // Restore radio button selection
        const radioButtons = this.byId("priorityRadioGroup").getButtons();
        radioButtons.forEach(btn => btn.setSelected(btn.getKey() === savedFilterState.selectedRadio));
        
        this.byId("searchField").setValue(savedFilterState.searchQuery);
        this.byId("customInput").setValue(savedFilterState.inputText);
        this.byId("categoryDropdown").setSelectedKey(savedFilterState.dropdownKey);

        // Trigger your existing filter logic to apply the restored state
        this.applyFilters();
    }
}

3. Optional: Persist Variants to Backend (Instead of Local Storage) #

If you want variants to be available across devices/browsers, you can extend this logic to save the variant data to an OData service:

• Create a custom OData entity (e.g., FilterVariant) with fields for user ID, variant name, and the serialized filter state (as a string)
• When saving a variant, send the filterState JSON to your backend service
• When loading variants, fetch the user's saved variants from the backend and populate the VariantManagement control

Key Notes to Keep in Mind #

• Make sure all your filter components have unique IDs so you can reliably fetch their values in the controller
• For tree tables, if you support multi-level selection, ensure you serialize all selected keys (not just top-level nodes)
• Add validation for required filter fields if needed before saving a variant
• Test edge cases, like empty filter states or partial selections, to ensure variants load correctly

内容的提问来源于stack exchange，提问作者Vikky