How to open a dialog on FLP via a shell plugin?

[maximilian_doemel86]

Hi,

I tried to write a shell plugin, that adds a button to the user menu of the shell bar on FLP. If you press the button, a UI5 dialog should open. This dialog is meant for maintaining specific data so a connection to the database via OData is needed, too.

I already figured out how to create the shell plugin project in BAS and add it to my Launchpad via the portal service. But I currently fail to create the dialog. In the Component.js I load a XML fragment, which contains the structure of my dialog, and open it. But the result looks like it's rendered in the wrong way:

It seems like basic functionality (like using translatable text with the i18n model or loading icons over sap-icon://) is not working properly.

Here is the code of my Component.js:

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "my/namespace/lockmaintenanceplugin/model/models",
    "sap/ui/core/Fragment"
], function (UIComponent, Device, models, Fragment) {
    "use strict";

    return UIComponent.extend("my.namespace.lockmaintenanceplugin.Component", {

        metadata: {
            manifest: "json"
        },

        /**
         * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
         * @public
         * @override
         */
        init: function () {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // enable routing
            // this.getRouter().initialize();

            // set the device model
            this.setModel(models.createDeviceModel(), "device");

            const renderer = sap.ushell.Container.getRenderer("fiori2");
            const properties = {
                controlType: "sap.m.Button",
                oControlProperties: {
                    text: this.i18n("title"),
                    icon: "sap-icon://wrench",
                    press: this.onUserActionPress
                },
                bIsVisible: true,
                bCurrentState: false
            };

            renderer.addUserAction(properties);
        },

        i18n(key, params) {
            console.log(this);
            return this.getModel("i18n").getResourceBundle().getText(key, params);
        },

        onUserActionPress() {
            alert("Hello World");
            Fragment.load({
                name: "my.namespace.lockmaintenanceplugin.fragment.LockDialog",
                controller: this
            }).then(dialog => {
                dialog.open();
            });
        }
    });
});

And the code of my fragment:

<c:FragmentDefinition xmlns="sap.m" xmlns:c="sap.ui.core">
    <Dialog title="{i18n>title}" type="Message" >
        <List items="{lockedYears>/}" mode="{= ${editable>/} ? 'Delete' : 'None' }">
            <headerToolbar>
                <OverflowToolbar>
                    <Title text="{i18n>lockedYears}" level="H2"/>
                    <ToolbarSpacer/>
                    <Button text="{i18n>edit}" press="onEditPress" visible="{= !${editable>/} }"/>
                </OverflowToolbar>
            </headerToolbar>

            <items>
                <StandardListItem title="{Year}" />
            </items>
        </List>
        <beginButton>
            <Button text="{i18n>save}" type="Emphasized" press="onSavePress" visible="{editable>/}" />
        </beginButton>
        <endButton>
            <Button text="{i18n>close}" press="onClosePress" />
        </endButton>
    </Dialog>
</c:FragmentDefinition>

I suppose you have to bind the fragment to the view somehow before opening the dialog, but I have not found a solution how to do this.

Any help is appreciated

[WouterLemaire · Accepted solution]

Have a look at this plug-in as an example https://github.com/lemaiwo/FioriWhatsNewPlugin/tree/master/webapp

[maximilian_doemel86 · Accepted solution]

Thank you for providing such a comprehensive example! My issue was that I did not set the models to the dialog during creation. Now it's fixed and everything is working as it should