bendkt/ui5con2022-p13n-ws

UI5con 2022 P13n Workshop

P13nify Everything - Personalization for Any Control

⚠️ Note

The tutorial moved to https://github.com/SAP-samples/ui5-p13n-tutorial. This git repo will become an archive and will not receive updates.

Made with ❤️ for

Description

In this tutorial you can learn how to add personalization capabilities to almost every control. If you have a custom control that you would like to enhance with filtering, sorting, or other options this tutorial is for you.

You will be lead through the enablement of a custom control using the assets provided by UI5. You can also learn, how to use those assets to enhance your application with personalization capabilities. You should be able to apply your knowledge afterwards in your own application or control development.

A recording of the corresponding UI5Con workshop is available on UI5con HYBRID 2022: P13nify Everything - Personalization for Any Control (Workshop).

UI5 Components in Focus

• sap.m.p13n.Engine
• sap.ui.fl.variants.VariantManagement

Disclaimer

The sap.m.p13n.Engine is currently in the status experimental. It is included in UI5 and usable, but we are still considerung minor changes of the API. This is why for productive usage you should wait for the public release, which we plan for one of the next UI5 versions. Thank you for your understanding!

Prerequisites

• Intermediate UI5 knowledge (e.g. application or control development)
• Tools: git, Node.js
• Code Editor

Exercises

1. Setup the Application
2. Custom Table for P13n (sources, run app)
3. Engine Registration (sources, run app)
4. Column Selection (sources, run app)
5. Sorting and Grouping (sources, run app)
6. Changing Control State (sources, run app)
7. Grid Filter Control (sources, run app)
8. Filtering the Table (sources, run app)
9. Info Toolbar for Filters (sources, run app)
10. Customizations and Clear Filters (sources, run app)
11. VariantManagement (sources, run app)

Final Application

This is the application you build during the tutorial:

Have a look now!

Feedback and Issues

Please do not hesitate to let us know if you find something that is wrong or could be improved. You can open a new issue in this repository.

Authors

• Benedikt Schölch
• Martin Häuser

License

Copyright (c) 2022 SAP SE or an SAP affiliate company. All rights reserved.

ui5con2022-p13n-ws's Issues

Reuse p13n Engine in UI5 Web Components for React?

Hi @bendkt and @martinhaeuser,

thank you for this great workshop. I've mentioned you both already in my comment to the issue Support SAPUI5 Flexibility for the VariantManagement control #3168 that I've filed in the UI5 Web Components for React project. But I think a cross reference from here makes sense. Hope there is a way to reuse the p13n Engine in UI5 Web Components for React.

Best Regards
Gregor

exercises don't work anymore?

I guess the example doesn't work anymore? Could it be possible?

Engine - from exercise 3

 Engine.register(this, {
            helper: this.oHelper,
            modification: new ModificationHandler(),
            controller: {
                Columns: new SelectionController({
                    control: this,
                    targetAggregation: "columns"
                })
            }
        });

reuslts in =>

TypeError: Engine.show is not a function. (In 'Engine.show(this, ["Columns"], {
            title: "Table Settings",
            source: oEvent.getSource()
        })', 'Engine.show' is undefined)

It works if I build an instance this Engine = new Engine()and use after that this.Engine.register....

open Dialog

 (this.)Engine.show(this, ["Columns"], {
            title: "Table Settings",
            source: oEvent.getSource()
        });

update: Use Engine.getInstance() as if ishown in example for p13n

Engine.getInstance().show(this, ["Columns"], {
            title: "Table Settings",
            source: oEvent.getSource()
        });

reuslts in =>

this.getModificationHandler(t).hasChanges is not a function. (In 'this.getModificationHandler(t).hasChanges({selector:t,changeTypes:r},i?.payload)', 'this.getModificationHandler(t).hasChanges' is undefined)