FR Notification: ability to close a notification with an input message

[SynoUser-NL]

Description

We are using the Notification node to display a Please wait.. message for actions that take a little bit of time. It would be nice to be able to have the flow close the Notification once the action is completed. Currently, the only possibility is to have the Notification time-out or have the user close the Notification.

Have you provided an initial effort estimate for this issue?

I am no FlowFuse team member

[joelvandal]

Here my custom "dialog" component that I use on my system. .. it allow to add custom buttons, change background color, etc. all managed on the payload.

[
    {
        "id": "6f039e5a0311095f",
        "type": "ui-template",
        "z": "d65257ac.47dde8",
        "group": "",
        "page": "",
        "ui": "d0e3588ada68dc99",
        "name": "Modal Component",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n    <v-dialog id=\"dialog\" v-model=\"visible\" width=\"500\" persistent>\n        <v-card>\n            <v-card-title>{{ title }}</v-card-title>\n            <v-card-text>\n                <p>\n                {{ body }}\n                </p>\n                <br>\n                <v-progress-linear v-if=\"progress\" indeterminate :height=\"12\"></v-progress-linear>\n                \n            </v-card-text>\n            <v-card-actions>\n                <v-spacer></v-spacer>\n                <v-btn v-if=\"show_cancel\" text @click=\"visible = false\">{{ show_cancel_label }}</v-btn>\n                <v-btn v-for=\"(button, index) in actions\" :key=\"index\" text\n                    @click=\"visible = false; send({payload: button.id})\">{{ button.text }}</v-btn>\n            </v-card-actions>\n        </v-card>\n    </v-dialog>\n</template>\n\n<script>\n\n    export default {\n        data() {\n            return {\n                loaded: false,\n                visible: false,\n                progress: false,\n                title: \"Modal\",\n                body: \"Body\",\n                show_cancel: true,\n                show_cancel_label: \"Cancel\",\n                actions: []\n            }\n        },\n        watch: {\n            msg: function(){\n                \n                this.visible = false;\n\n                if (this.msg.payload && this.msg.payload.modal) {\n\n                    this.visible = this.msg.payload.modal.visible;\n                    this.title = this.msg.payload.modal.title;\n                    this.body = this.msg.payload.modal.body;\n                    this.progress = this.msg.payload.modal.progress;\n                    \n                    this.show_cancel = this.msg.payload.modal.show_cancel;\n                    this.show_cancel_label = this.msg.payload.modal.show_cancel_label;\n                    this.actions = this.msg.payload.modal.actions;\n\n                    if (!this.show_cancel) {\n                        this.send({payload: true});\n                    }\n                }\n            }    \n        },\n        computed: {\n        },\n        methods: {\n        },\n        mounted() {\n            this.visible = false\n            this.loaded = true\n        },\n        unmounted() {\n            this.visible = false\n            this.loaded = false        }\n    }\n</script>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "widget:ui",
        "className": "",
        "x": 1370,
        "y": 720,
        "wires": [
            [
                "d5113505b6e3e8a3"
            ]
        ]
    },
    {
        "id": "d5113505b6e3e8a3",
        "type": "link out",
        "z": "d65257ac.47dde8",
        "name": "link out 11",
        "mode": "return",
        "links": [],
        "x": 1515,
        "y": 720,
        "wires": []
    },
    {
        "id": "61582d90a9bcab2b",
        "type": "link in",
        "z": "d65257ac.47dde8",
        "name": "Modal Link",
        "links": [],
        "x": 1235,
        "y": 720,
        "wires": [
            [
                "6f039e5a0311095f"
            ]
        ]
    },
    {
        "id": "d0e3588ada68dc99",
        "type": "ui-base",
        "name": "Tag Setup",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "icon"
    }
]

How to display the modal :

msg.payload = {}

msg.payload.modal = {
    visible: true,
    title: 'Remote Tunnel',
    body: 'Please wait while we start the Remote Tunnel ...',
    actions: [],
    show_cancel: false,
    show_cancel_label: '',
    backdrop: true
};

return msg;

And how to close :

msg.payload = {}

msg.payload.modal = {
    visible: false
};

return msg;

[SynoUser-NL]

Thanks @joelvandal ! Tried your solution and this works exactly how I think the Notification node should behave. So great work!

That being said, I do think that this functionality should be part of the DB2 Notification node. The bit you're doing in the section and even the section isn't really low-code anymore, so adjusting this for more buttons would not be easy for most low-code users. Also, when trying with the Cancel button enabled, clicking that button does not generate a payload message to take action on (although I'm sure that could be programmed into the behaviour of the modal).

For us, should we want to make NR instances available for more people to be used as a low-code solution, we'd like something like your solution to just be possible with the standard Notification node that is also maintained as part of the Dashboard package. Hoping that you and @joepavitt agree..

[joelvandal]

About your initial request to close the notification, what about change the this.show behavior ... if the payload === false, then it set this.show = false instead of this.show = true on all payload ?

And about my node, I'm checking to add an ui-dialog node. I'm doing some experimentation, with ability to add control all options from NR dashboard.

[joelvandal]

Here a preview of the ui-dialog that I'm working on... directly on the palette.

[SynoUser-NL]

Looks great! So this will be an additional Dashboard 2 node, to be installed with the Palette Manager?

[Steve-Mcl]

This is more possible via #932