Customize Loading Screen

Adhoc
#1

Hello Team,

I am using Helical Insight EE 4.0 RC2. There is a popup screen that appears showing loading screen (how many resources are loaded and how many are pending). I want to customize this screen. How do I do it?

image

Thank You

1 Like
#2

Hello Degiba,

To Change the “Loading” modal on a dashboard , follow these steps:

  1. Open file : /apache-tomcat-9/webapps/hi-ee/WEB-INF/jsp/serviceLoadView.jsp
  2. Find the modal window code : search for html
    element with id=hdi-blockUI
  3. Modify the structure of the Modal Dialog by updating the HTML content

    4. e.g.

    Comment the whole div and paste below sample code. You can accordingly make changes :

    <div data-keyboard="false" data-backdrop="static" id="hdi-blockUI" class="modal"
     role="dialog">
    <div class="modal-dialog modal-dialog-centered" style="width:10vw;">
        <div class="modal-content">
			<div class="modal-header" style="border-bottom:0px" > 
				<button type="button" class="close" data-dismiss="modal" onClick="_reset_loading_panel()">&times;</button>
			</div>	
			<div class="modal-body">
				<div>
					<div class="row">
					  <div class="col-md-6" style="font-size: x-large; color:#746a6f"><span class="glyphicon glyphicon-repeat spin"></span></div>
					  <div class="col-md-6" style="font-size: x-large; color:#746a6f"><span class = "pull-right" id="request-count">0</span></div>
					 </div>
				</div>	
						
			</div>
		</div>
    </div>
</div>
#3

You can refer to the attached working code as a reference
DashboardLoadingIconCustomization.zip (56.6 KB)

#4

To Change the “Loading” modal on reports , follow these steps:

  1. Place the loading Icon Gif image in \hi\apache-tomcat-7\webapps\hi-ee\images\
  2. Create an externalstyles.css file in \hi\apache-tomcat-7\webapps\hi-ee\css\

Add below lines to this file, provide the gif name accordingly in the last line for the path -

.se_loading_icon {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(…/images/loader.gif) center no-repeat #fff;
}

  1. Include the externalstyles.css file in below JSP files :
    Location : \hi\apache-tomcat-7\webapps\hi-ee\WEB-INF\jsp

serviceLoadView.jsp
visualizeAdhoc.jsp
common-css.jsp
adhocReport.jsp
common\css.jsp

To include it , paste this line of code in the JSP files (below other link tags) -

<link data-clone="true" rel="stylesheet" href="${baseURL}/css/externalstyles.css"/>

  1. Change the report-open.js file to remove the loading modal & use the loadingIcon gif instead. Below are the changes to be done -

4.a) Take backup of \hi\apache-tomcat-7\webapps\hi-ee\js\adhoc\report-open.js file
4.b) Unminify the file (you can use https://unminify.com/)
4.c) Change the code from line 572 - 592
FROM :-
> render: function () {

                    return _react2.default.createElement(
                        _reactBootstrapModal2.default,
                        { show: !this.checkIfUpload() && this.state.visible, onHide: this.handleCancel, backdrop: "static" },
                        _react2.default.createElement(
                            _reactBootstrapModal.Header,
                            null,
                            _react2.default.createElement("h4", { className: "modal-title" }, _react2.default.createElement("span", null, "Updating"), _react2.default.createElement("i", { className: "fa fa-repeat fa-spin pull-right" }))
                        ),
                        _react2.default.createElement(
                            _reactBootstrapModal.Body,
                            null,
                            _react2.default.createElement("p", null, _react2.default.createElement("b", null, "Please wait while your request is being processed 123...")),
                            _react2.default.createElement("p", null, "Pending requests: ", this.state.requests)
                        ),
                        _react2.default.createElement(
                            _reactBootstrapModal.Footer,
                            null,
                            _react2.default.createElement("p", { className: "pull-left text-danger" }, "Time elapsed: ", this.getTime()),
                            _react2.default.createElement(_reactBootstrapModal.Dismiss, { className: "btn btn-danger" }, "Close")
                        )
                    );
                },

TO :-

render: function () {
return _react2.default.createElement(“div”,{ className: “se_loading_icon” },null);
},

Also change , line 550 - 552
FROM

hide: function () {
this.setState({ visible: !1, seconds: 1 }), this.timer && clearInterval(this.timer);
},

TO

hide: function () {
console.log(‘Hide the loading icon’);
$(’.se_loading_icon’).hide();
this.setState({ visible: !1, seconds: 1 }), this.timer && clearInterval(this.timer);
},

Save the file
4.d) Minify the file (you may use - https://www.minifier.org/)
4.e) Replace it back in the original location \hi\apache-tomcat-7\webapps\hi-ee\js\adhoc\

  1. Restart the server (clear tomcat work , temp directories before restart)
  2. Clear browser cache and test by opening any adhoc report

To Change the “Loading” modal on a dashboard , follow these steps:

  1. Open file : /apache-tomcat-9/webapps/hi-ee/WEB-INF/jsp/serviceLoadView.jsp
  2. Find the modal window code : search for html
    element with id=hdi-blockUI
  3. Modify the structure of the Modal Dialog by updating the HTML content

Remove modal - Replace with Image

  1. Add required loading Icon image (gif) to /apache-tomcat-9/webapps/hi-ee/images
  2. Change the html
    element with id=hdi-blockUI as below :

Add this CSS

.se_loading_icon { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(images/loader.gif) center no-repeat #fff; }

Restart the server (clear tomcat work , temp directories before restart). Clear browser cache and test by opening any dashboard in read mode.