Search code examples
javascriptsapui5refresheslintpage-refresh

what is th proper way to refresh a full page on SAPUI5 (ESLINT:(sap-no-location-reload))?


Environment :

Framework : SAPUI5
Version : 1.65.6
IDE : web-ide

Problem :

My code works but according to the IDE maybe not in the proper way, Web-Ide return the error :

location.reload() is not permitted. (sap-no-location-reload)
[ESLINT: (sap-no-location-reload)]

Code (minimal to reproduce):

the controller :

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
    "use strict";

    return Controller.extend("namespace.controller.App", {
        onInit: function () {
            this.getView().setModel(new JSONModel({ 
                    actualizationDate: new Date()
                    }), "frontEnd");
        },
        onPressRefresh: function(){
            location.reload();
        }
    });
});

And the view :

<mvc:View 
    controllerName="namespace.controller.App" 
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>title}">
                    <content>
                        <Label text="{i18n>lastActualizedDateTime}" labelFor="lastActualizedTime" class="sapUiSmallMarginEnd"/>
                        <DateTimePicker 
                            id="lastActualizedTime" 
                            value="{path: 'frontEnd>/actualizationDate'}" 
                                    valueFormat="yyyy-MM-dd HH:mm:ss" 
                                    displayFormat="yyyy-MM-dd HH:mm:ss" 
                                    enabled="false"/>
                        <Button icon="sap-icon://refresh" type="Transparent" press="onPressRefresh"/>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

For reproduce you can directly copy past the code in WebIde creating template from SAPUI5 Application.

Remarks:

  • I know the code work normally with location.reload();, I wish to know if their is a proper way to do the same in SAPUI5 (By proper way I mean not returning ESLINT error)
  • location.reload(); is in onPressRefresh on the controller, their is more code only for you to be able to reproduce the problem by a simple copy past in your web-ide

Solution

  • The reasoning behind this being in their linting is proper way to hard refresh is to not do it at all. If you want to ignore the error,

    location.reload(); // eslint-disable-line sap-no-location-reload
    

    However, if the only reason to refresh is to refresh the date, rewrite as follows:

        sap.ui.define([
            "sap/ui/core/mvc/Controller",
            "sap/ui/model/json/JSONModel"
        ], function (Controller, JSONModel) {
            "use strict";
    
            return Controller.extend("namespace.controller.App", {
                onInit: function () {
                    this.getView().setModel(new JSONModel({ 
                            actualizationDate: new Date()
                            }), "frontEnd");
                },
                onPressRefresh: function(){
                    this.refreshDate();
                },
                refreshDate: function(){
                    const oModel = this.getView().getModel("frontEnd");
                    oModel.setProperty("/actualizationDate", new Date();
                    oModel.updateBindings();
                }
            });
        });